<template>
  <div class="vditor-markdown-editor">
    <!-- 编辑器区域 -->
    <div class="vditor-wrapper" :style="{ height: editorHeight }">
      <div ref="vditorContainer" class="vditor-container"></div>
      <!-- 加载状态 -->
      <div v-if="isLoading || !vditorInstance" class="editor-loading">
        <i class="fas fa-spinner fa-spin loading-icon"></i>
        <span class="loading-text">{{
          t("reference.loading") || "加载中..."
        }}</span>
      </div>
    </div>

    <!-- 引用标记下拉菜单 -->
    <div
      v-if="showCitationMenu"
      class="citation-menu-wrapper"
      :style="{
        position: 'fixed',
        left: citationMenuPosition.x + 'px',
        top: citationMenuPosition.y + 'px',
        zIndex: 9999,
      }"
    >
      <div ref="citationMenuRef" class="citation-menu">
        <div class="citation-menu-header">
          <span class="header-title">{{ t("reference.selectReference") }}</span>
          <div class="header-search">
            <i class="fas fa-search search-icon"></i>
            <input
              v-model="citationMenuSearch"
              type="text"
              :placeholder="t('reference.searchReferences')"
              class="search-input"
              @click.stop
            />
          </div>
        </div>
        <div class="citation-menu-list">
          <div
            v-for="reference in filteredCitationMenuReferences"
            :key="reference.workId"
            class="citation-menu-item"
            @click.stop="replaceCitation(reference)"
          >
            <span class="menu-item-note">{{
              reference.note || reference.title
            }}</span>
            <span class="menu-item-meta"
              >{{ reference.authorsText }} ({{
                reference.publicationYear
              }})</span
            >
          </div>
          <div
            v-if="
              filteredCitationMenuReferences.length === 0 &&
              references.length > 0
            "
            class="citation-menu-empty"
          >
            {{ t("reference.noMatchingReferences") }}
          </div>
          <div v-if="references.length === 0" class="citation-menu-empty">
            {{ t("reference.noReferences") }}
          </div>
        </div>
      </div>
    </div>

    <!-- 可拖拽的分割条 -->
    <div
      v-if="props.showReferences"
      class="resize-handle"
      @mousedown="startResize"
      @touchstart="startResize"
    ></div>

    <!-- 参考文献管理区域 -->
    <div
      v-if="props.showReferences"
      class="reference-section"
      :style="{ height: referenceHeight }"
    >
      <!-- 工具栏 -->
      <div class="reference-toolbar">
        <!-- 左侧按钮组 -->
        <div class="toolbar-left">
          <button
            class="toolbar-btn"
            :title="t('reference.addReference')"
            @click="openImportDialog"
          >
            <i class="fas fa-file-alt"></i>
          </button>
        </div>

        <!-- 搜索框 -->
        <div class="search-input-wrapper">
          <i class="fas fa-search search-icon"></i>
          <input
            v-model="searchQuery"
            type="text"
            placeholder="All Fields & Tags"
            class="search-input"
            @input="handleSearch"
          />
        </div>
      </div>

      <!-- 参考文献表格 -->
      <div class="reference-table-container">
        <!-- 加载状态 -->
        <div v-if="isLoadingReferences" class="reference-loading">
          <i class="fas fa-spinner fa-spin loading-icon"></i>
          <span class="loading-text">{{ t("reference.loading") }}</span>
        </div>

        <!-- 空状态 - 没有任何文献 -->
        <div v-else-if="references.length === 0" class="reference-empty">
          <i class="fas fa-book-open empty-icon"></i>
          <span class="empty-text">{{ t("reference.noReferences") }}</span>
        </div>

        <!-- 搜索无结果 -->
        <div
          v-else-if="searchQuery.trim() && filteredReferences.length === 0"
          class="reference-empty"
        >
          <i class="fas fa-search empty-icon"></i>
          <span class="empty-text">{{
            t("reference.noMatchingQuery", { query: searchQuery })
          }}</span>
          <span class="empty-hint">{{ t("reference.tryOtherSearch") }}</span>
        </div>

        <!-- 有数据时显示表格 -->
        <table v-else class="reference-table">
          <thead>
            <tr>
              <th>{{ t("reference.serialNumber") }}</th>
              <th>{{ t("reference.name") }}</th>
              <th>{{ t("reference.alias") }}</th>
              <th>{{ t("reference.author") }}</th>
              <th>{{ t("reference.year") }}</th>
              <th>{{ t("reference.details") }}</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="reference in filteredReferences"
              :key="reference.workId"
              :class="{ highlighted: selectedReferenceId === reference.workId }"
              :draggable="true"
              @click="selectReference(reference.workId)"
              @dragstart="handleReferenceDragStart($event, reference)"
            >
              <td>{{ reference.serialNumber }}</td>
              <td class="title-cell">
                <span class="title-text" :title="reference.title">{{
                  reference.title
                }}</span>
              </td>
              <td>
                <!-- 非编辑状态：显示别名文本和编辑按钮 -->
                <div
                  v-if="editingReferenceId !== reference.workId"
                  class="alias-display"
                >
                  <span class="alias-text">{{ reference.note || "-" }}</span>
                  <button
                    class="edit-alias-btn"
                    @click="startEditAlias(reference)"
                    :title="t('reference.editAlias')"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                </div>
                <!-- 编辑状态：显示输入框 -->
                <div v-else class="alias-edit">
                  <input
                    v-model="editingAlias"
                    type="text"
                    class="alias-input"
                    :placeholder="t('reference.enterAlias')"
                    @keydown.enter="handleEnterKey(reference)"
                    @blur="handleBlur(reference)"
                  />
                </div>
              </td>
              <td>{{ reference.authorsText }}</td>
              <td>{{ reference.publicationYear }}</td>
              <td class="details-cell">
                <div class="detail-icons">
                  <el-popover
                    placement="top-end"
                    :width="400"
                    trigger="click"
                    popper-class="reference-detail-popover"
                  >
                    <template #reference>
                      <i
                        class="fas fa-file-alt icon-b"
                        :title="t('reference.viewDocument')"
                        @click="viewReferenceDetail(reference, $event)"
                      ></i>
                    </template>
                    <div
                      v-if="currentDetailReference?.workId === reference.workId"
                      class="reference-detail-content"
                    >
                      <!-- 加载状态 -->
                      <div v-if="isLoadingDetail" class="detail-loading">
                        <i class="fas fa-spinner fa-spin"></i>
                        <span>{{ t("reference.loading") }}</span>
                      </div>

                      <!-- 详情内容 -->
                      <template v-else-if="currentDetailReference">
                        <div class="detail-item">
                          <div class="detail-label">
                            {{ t("reference.detailLabels.title") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.title }}
                          </div>
                        </div>
                        <div class="detail-item">
                          <div class="detail-label">
                            {{ t("reference.detailLabels.authors") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.authorsText }}
                          </div>
                        </div>
                        <div class="detail-item">
                          <div class="detail-label">
                            {{ t("reference.detailLabels.publicationYear") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.publicationYear }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.publicationDate"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.publicationDate") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.publicationDate }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.itemType"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.type") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.itemType }}
                          </div>
                        </div>
                        <div class="detail-item">
                          <div class="detail-label">
                            {{ t("reference.detailLabels.doi") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.doi || "-" }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.abstractText"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.abstract") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.abstractText }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.venueName"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.venueName") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.venueName }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.journalAbbr"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.journalAbbr") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.journalAbbr }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.issn"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.issn") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.issn }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.volume"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.volume") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.volume }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.issue"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.issue") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.issue }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.pages"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.pages") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.pages }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.language"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.language") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.language }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.landingUrl"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.landingUrl") }}
                          </div>
                          <div class="detail-value">
                            <a
                              :href="currentDetailReference.landingUrl"
                              target="_blank"
                              class="detail-link"
                              >{{ currentDetailReference.landingUrl }}</a
                            >
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.pdfUrl"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.pdfUrl") }}
                          </div>
                          <div class="detail-value">
                            <a
                              :href="currentDetailReference.pdfUrl"
                              target="_blank"
                              class="detail-link"
                              >{{ currentDetailReference.pdfUrl }}</a
                            >
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.source"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.source") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.source }}
                          </div>
                        </div>
                        <div
                          v-if="currentDetailReference.note"
                          class="detail-item"
                        >
                          <div class="detail-label">
                            {{ t("reference.detailLabels.note") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.note }}
                          </div>
                        </div>
                        <div class="detail-item">
                          <div class="detail-label">
                            {{ t("reference.detailLabels.updatedAt") }}
                          </div>
                          <div class="detail-value">
                            {{ currentDetailReference.updatedAt }}
                          </div>
                        </div>
                      </template>
                    </div>
                  </el-popover>
                  <i
                    class="fas fa-copy icon-a"
                    :title="t('reference.copyCitation')"
                    @click="handleCopyReference(reference)"
                  ></i>

                  <i
                    class="far fa-trash-alt icon-delete"
                    :title="t('reference.deleteReference')"
                    @click="handleDeleteReference(reference)"
                  ></i>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 导出文档对话框 -->
    <el-dialog
      v-model="exportDialogVisible"
      :title="t('reference.exportDocument')"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="export-dialog-content">
        <!-- 输出格式选择 -->
        <div class="export-option-section">
          <label class="option-label">{{ t("reference.outputFormat") }}</label>
          <el-radio-group v-model="exportOutputFormat" class="option-group">
            <el-radio label="markdown">Markdown</el-radio>
            <el-radio label="html">HTML</el-radio>
            <el-radio label="text">纯文本</el-radio>
          </el-radio-group>
        </div>

        <!-- 引用格式选择 -->
        <div class="export-option-section">
          <label class="option-label">{{
            t("reference.citationFormat")
          }}</label>
          <el-radio-group v-model="exportCitationFormat" class="option-group">
            <el-radio label="apa">APA</el-radio>
            <el-radio label="ieee">IEEE</el-radio>
          </el-radio-group>
          <div class="option-hint">
            <span v-if="exportCitationFormat === 'apa'">{{
              t("reference.exampleApa")
            }}</span>
            <span v-else>{{ t("reference.exampleIeee") }}</span>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="exportDialogVisible = false"
            :disabled="isExporting"
            >{{ t("reference.cancel") }}</el-button
          >
          <el-button
            type="primary"
            @click="handleExportDocument"
            :loading="isExporting"
            :disabled="isExporting"
          >
            {{
              isExporting ? t("reference.generating") : t("reference.export")
            }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导入参考文献对话框 -->
    <el-dialog
      v-model="importDialogVisible"
      :title="t('reference.importReference')"
      width="600px"
      :close-on-click-modal="false"
      @close="closeImportDialog"
    >
      <div class="import-dialog-content">
        <!-- 导入方式选择 -->
        <div class="import-method-section">
          <label class="section-label">{{ t("reference.importMethod") }}</label>
          <el-radio-group v-model="importMethod" class="import-method-group">
            <el-radio label="title">{{
              t("reference.importByTitle")
            }}</el-radio>
            <el-radio label="doi">{{ t("reference.importByDoi") }}</el-radio>
          </el-radio-group>
        </div>

        <!-- 搜索区域（左右布局） -->
        <div class="import-search-section">
          <label class="section-label-inline">
            {{
              importMethod === "title" ? t("reference.literatureTitle") : "DOI"
            }}
          </label>
          <div class="search-input-wrapper-inline">
            <el-input
              ref="importInputRef"
              v-model="importInput"
              :placeholder="
                importMethod === 'title'
                  ? t('reference.enterLiteratureTitle')
                  : t('reference.enterDoi')
              "
              clearable
              @keyup.enter="handleImportSearch"
            >
              <template #append>
                <el-button @click="handleImportSearch" :loading="isSearching">
                  {{ t("reference.search") }}
                </el-button>
              </template>
            </el-input>
          </div>
        </div>

        <!-- 搜索结果列表 -->
        <div v-if="searchResults.length > 0" class="search-results-section">
          <div class="results-header">
            <span class="results-count">{{
              t("reference.foundResults", { count: searchResults.length })
            }}</span>
          </div>
          <div class="results-list">
            <div
              v-for="result in searchResults"
              :key="result.workId"
              class="result-item"
            >
              <div class="result-content">
                <div class="result-info">
                  <div class="result-title">{{ result.title }}</div>
                  <div class="result-meta">
                    <!-- 第一行：作者、年份 -->
                    <div class="meta-row">
                      <span v-if="result.authorsText" class="result-authors">{{
                        result.authorsText
                      }}</span>
                      <span class="result-year"
                        >({{ result.publicationYear }})</span
                      >
                    </div>

                    <!-- 第二行：类型、期刊/会议信息 -->
                    <div
                      v-if="
                        result.itemType ||
                        result.venueName ||
                        result.journalAbbr
                      "
                      class="meta-row"
                    >
                      <span v-if="result.itemType" class="result-type"
                        >[{{ result.itemType }}]</span
                      >
                      <span v-if="result.venueName" class="result-venue">{{
                        result.venueName
                      }}</span>
                      <span
                        v-if="result.journalAbbr"
                        class="result-journal-abbr"
                        >({{ result.journalAbbr }})</span
                      >
                    </div>

                    <!-- 第三行：卷期号、页码、ISSN -->
                    <div
                      v-if="
                        result.volume ||
                        result.issue ||
                        result.pages ||
                        result.issn
                      "
                      class="meta-row"
                    >
                      <span v-if="result.volume" class="result-volume"
                        >Vol. {{ result.volume }}</span
                      >
                      <span v-if="result.issue" class="result-issue"
                        >No. {{ result.issue }}</span
                      >
                      <span v-if="result.pages" class="result-pages"
                        >pp. {{ result.pages }}</span
                      >
                      <span v-if="result.issn" class="result-issn"
                        >ISSN: {{ result.issn }}</span
                      >
                    </div>

                    <!-- 第四行：DOI -->
                    <div v-if="result.doi" class="meta-row">
                      <span class="result-doi">DOI: {{ result.doi }}</span>
                    </div>
                  </div>
                </div>

                <!-- 按钮组：放在右下角 -->
                <div class="result-actions">
                  <a
                    v-if="result.landingUrl"
                    :href="result.landingUrl"
                    target="_blank"
                    class="action-link"
                    @click.stop
                  >
                    <i class="fas fa-external-link-alt"></i>
                    {{ t("reference.viewOriginal") }}
                  </a>
                  <a
                    v-if="result.pdfUrl"
                    :href="result.pdfUrl"
                    target="_blank"
                    download
                    class="action-link action-pdf"
                    @click.stop
                  >
                    <i class="fas fa-file-pdf"></i>
                    {{ t("reference.downloadPdf") }}
                  </a>
                  <el-button
                    type="primary"
                    size="small"
                    @click="importReference(result)"
                    :loading="result.importing"
                  >
                    {{ t("reference.import") }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态提示 -->
        <div v-else-if="hasSearched && !isSearching" class="empty-results">
          <i class="fas fa-search empty-icon"></i>
          <p class="empty-text">{{ t("reference.noRelatedLiterature") }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  onMounted,
  onBeforeUnmount,
  onActivated,
  onDeactivated,
  nextTick,
  computed,
  watch,
} from "vue";
import { useI18n } from "vue-i18n";
// @ts-ignore
import Vditor from "vditor";
import "vditor/dist/index.css";
import {
  ElMessage,
  ElMessageBox,
  ElPopover,
  ElDialog,
  ElRadioGroup,
  ElRadio,
  ElInput,
  ElButton,
// @ts-ignore
} from "element-plus";
import * as filesApi from "@/api/files";
import { apiUpdateDraft } from "@/api/drafts";
import {
  getFileReferences,
  searchReferencesByTitle,
  searchReferencesByDoi,
  addReferenceToFile,
  getReferenceDetail,
  deleteReferenceFromFile,
  updateReferenceNote,
  getInTextCitation,
  getFormatCitation,
} from "@/api/references";
import type {
  ReferenceItem,
  ImportSearchResultItem,
  ReferenceDetail,
} from "@/api/references";
import { fileCache } from "@/utils/fileCache";
import { preprocessMathContent } from "@/utils/renderMarkdown";
import { triggerNewbieTask } from "@/utils/newbieTask";

// Props
interface Props {
  fileId: string | number;
  fileName: string;
  preloadContent?: string;
  readonly?: boolean;
  isChatAnswer?: boolean;
  folderId?: string | number;
  showReferences?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  preloadContent: "",
  readonly: false,
  isChatAnswer: false,
  showReferences: false,
});

// Emits
interface Emits {
  (
    e: "content-change",
    data: { text: string; html: string; hasChanges: boolean },
  ): void;
  (e: "outline-change", outline: OutlineItem[]): void;
  (
    e: "file-saved",
    data: {
      fileId: string | number;
      fileName: string;
      content: string;
      isAutoSave: boolean;
    },
  ): void;
  (e: "request-show-references"): void; // 请求显示参考文献区域
}

const emit = defineEmits<Emits>();

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

// Types
interface OutlineItem {
  id: string;
  text: string;
  level: number;
  element?: HTMLElement | null;
}

// Reactive state
const vditorContainer = ref<HTMLDivElement>();
const vditorInstance = ref<Vditor>();
const originalContent = ref("");
const currentContent = ref("");
const lastSavedContent = ref("");
const hasChanges = ref(false);
const hasUnsavedChanges = ref(false);
const hasUserEdited = ref(false);
const isSaving = ref(false);
const isLoading = ref(false);
const isDestroying = ref(false);

// TOS 存储相关状态
const fileStorageType = ref<string>("LOCAL");
const hasPendingTosSync = ref(false);
const tosSyncTimer = ref<number | null>(null);
const TOS_SYNC_INTERVAL = 60000;
const isTosFile = computed(() => fileStorageType.value && fileStorageType.value !== "LOCAL");
const editorScrollTop = ref(0);
// KeepAlive 生命周期处理
onDeactivated(() => {});
onActivated(() => {
  tryInitVditor();
  nextTick(() => {
    const el = vditorContainer.value?.querySelector(
      ".vditor-reset",
    ) as HTMLElement | null;

    if (el) {
      el.scrollTop = editorScrollTop.value;
    }
  });
});
const isSavedToKnowledge = ref(false); // 标记智能体文件是否已保存到知识库
const outlineItems = ref<OutlineItem[]>([]);
const outlineUpdateTimer = ref<number>();
const contentWatcherInterval = ref<number>();
const citationRerenderTimer = ref<number>(); // 引用标记重新渲染的防抖定时器

// 参考文献相关状态
const editorHeight = ref("70%");
const referenceHeight = ref("30%");
const searchQuery = ref("");
const editingReferenceId = ref<number | null>(null); // 记录正在编辑的参考文献ID
const editingAlias = ref(""); // 编辑中的别名内容
const selectedReferenceId = ref<number | null>(null); // 记录选中的参考文献ID
const isHandlingEnterKey = ref(false); // 标记是否正在处理回车键
const currentDetailReference = ref<ReferenceDetail | null>(null); // 当前查看详情的参考文献
const isLoadingDetail = ref(false); // 是否正在加载详情

// 导入参考文献对话框相关状态
const importDialogVisible = ref(false); // 对话框显示状态
const importMethod = ref<"title" | "doi">("title"); // 导入方式：title 或 doi
const importInput = ref(""); // 输入内容
const importInputRef = ref<InstanceType<typeof ElInput>>(); // 输入框引用
const isSearching = ref(false); // 搜索中状态
const hasSearched = ref(false); // 是否已经搜索过
const searchResults = ref<any[]>([]); // 搜索结果列表

// 导出对话框相关状态
const exportDialogVisible = ref(false); // 导出对话框显示状态
const exportOutputFormat = ref<"text" | "html" | "markdown">("markdown"); // 输出格式
const exportCitationFormat = ref<"apa" | "ieee">("apa"); // 引用格式
const isExporting = ref(false); // 是否正在导出

// 参考文献列表相关状态
const references = ref<any[]>([]); // 参考文献列表
const isLoadingReferences = ref(false); // 是否正在加载参考文献
const referencesTotal = ref(0); // 参考文献总数

// 引用标记菜单相关状态
const showCitationMenu = ref(false); // 是否显示引用菜单
const citationMenuPosition = ref({ x: 0, y: 0 }); // 菜单位置
const currentCitationSpan = ref<HTMLElement | null>(null); // 当前点击的引用标记
const citationMenuRef = ref<HTMLElement | null>(null); // 菜单元素引用
const citationMenuSearch = ref(""); // 引用菜单搜索关键词

// 拖拽相关状态
const isResizing = ref(false);
const startY = ref(0);
const startEditorHeight = ref(0);
const startReferenceHeight = ref(0);
const autoSaveTimer = ref<number>();
const initRetryCount = ref(0);
// const maxInitRetries = 10;

// 过滤后的参考文献（用于参考文献表格）
const filteredReferences = computed(() => {
  if (!searchQuery.value.trim()) {
    return references.value;
  }

  const query = searchQuery.value.toLowerCase().trim();
  return references.value.filter(
    (ref) =>
      ref.title.toLowerCase().includes(query) ||
      ref.authorsText.toLowerCase().includes(query) ||
      (ref.note && ref.note.toLowerCase().includes(query)) ||
      ref.publicationYear.toString().includes(query) ||
      (ref.doi && ref.doi.toLowerCase().includes(query)),
  );
});

// 过滤后的引用菜单列表
const filteredCitationMenuReferences = computed(() => {
  if (!citationMenuSearch.value.trim()) {
    return references.value;
  }

  const query = citationMenuSearch.value.toLowerCase().trim();
  return references.value.filter(
    (ref) =>
      ref.title.toLowerCase().includes(query) ||
      ref.authorsText.toLowerCase().includes(query) ||
      (ref.note && ref.note.toLowerCase().includes(query)) ||
      ref.publicationYear.toString().includes(query) ||
      (ref.doi && ref.doi.toLowerCase().includes(query)),
  );
});

// 处理参考文献表格搜索
const handleSearch = () => {
  // 搜索逻辑已在 computed 中处理
};

// 选择参考文献
const selectReference = (referenceId: number) => {
  selectedReferenceId.value = referenceId;
};

// 开始编辑别名
const startEditAlias = (reference: any) => {
  editingReferenceId.value = reference.workId;
  editingAlias.value = reference.note || "";

  // 在下一帧自动聚焦到输入框
  nextTick(() => {
    const input = document.querySelector(".alias-input") as HTMLInputElement;
    if (input) {
      input.focus();
      input.select(); // 选中所有文本
    }
  });
};

// 处理回车键事件
const handleEnterKey = (reference: any) => {
  isHandlingEnterKey.value = true;
  saveAlias(reference);
};

// 处理失焦事件
const handleBlur = (reference: any) => {
  // 如果正在处理回车键，跳过失焦事件
  if (isHandlingEnterKey.value) {
    isHandlingEnterKey.value = false;
    return;
  }
  saveAlias(reference);
};

// 保存别名
const saveAlias = async (reference: any) => {
  const workId = reference.workId;
  const newNote = editingAlias.value.trim();

  try {
    // 调用API更新别名
    const response = await updateReferenceNote(props.fileId, workId, newNote);

    // 检查响应是否成功
    const isSuccess =
      response &&
      ((response as any).code === 200 || (response as any).status === 200);

    if (isSuccess) {
      // 更新本地数据
      const refIndex = references.value.findIndex((r) => r.workId === workId);
      if (refIndex !== -1 && references.value[refIndex]) {
        references.value[refIndex].note = newNote;
      }

      // 更新文档内容中所有使用该 workId 的引用标记
      if (vditorInstance.value) {
        const contentText = vditorInstance.value.getValue();
        
        // 匹配所有使用该 workId 的引用标记：{{cite:workId:任意note}}
        const citationRegex = new RegExp(
          `\\{\\{cite:${String(workId).replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}:([^}]*)\\}\\}`,
          "g"
        );
        
        // 替换为新的引用标记
        const updatedContent = contentText.replace(
          citationRegex,
          `{{cite:${workId}:${newNote}}}`
        );
        
        // 如果内容有变化，更新编辑器
        if (updatedContent !== contentText) {
          vditorInstance.value.setValue(updatedContent);
          
          // 更新 currentContent，确保保存时使用最新内容
          currentContent.value = updatedContent;
          hasUnsavedChanges.value = true;
          hasUserEdited.value = true;
          
          // 触发内容变化处理，确保保存机制被触发
          setTimeout(() => {
            // 重新渲染引用标记
            renderCitationsInEditor();
            
            // 触发内容变化事件（这会触发自动保存）
            const finalContent = vditorInstance.value?.getValue() || updatedContent;
            handleContentChange(finalContent);
            
            // 立即触发保存，确保更改被保存
            if (hasUnsavedChanges.value && !isSaving.value) {
              autoSaveDocument();
            }
          }, 200);
        }
      }

      ElMessage.success("别名保存成功");
    } else {
      const errorMsg =
        (response as any)?.message ||
        (response as any)?.data?.message ||
        "保存失败";
      throw new Error(errorMsg);
    }
  } catch (error) {
    ElMessage.error(`保存失败: ${(error as Error).message || "未知错误"}`);
  } finally {
    // 退出编辑模式
    editingReferenceId.value = null;
    editingAlias.value = "";
  }
};

// 查看参考文献详情
const viewReferenceDetail = async (reference: any, event: Event) => {
  event.stopPropagation(); // 阻止事件冒泡

  try {
    isLoadingDetail.value = true;
    const response = await getReferenceDetail(reference.workId);

    if (response && response.data) {
      currentDetailReference.value = response.data;
    } else {
      ElMessage.error("获取文献详情失败");
      currentDetailReference.value = null;
    }
  } catch (error) {
    console.error("获取文献详情失败:", error);
    ElMessage.error(
      `获取文献详情失败: ${(error as Error).message || "未知错误"}`,
    );
    currentDetailReference.value = null;
  } finally {
    isLoadingDetail.value = false;
  }
};

// 加载参考文献列表
const loadReferences = async () => {
  if (!props.fileId) {
    console.warn("⚠️ 无法加载参考文献：fileId 为空");
    return;
  }

  try {
    isLoadingReferences.value = true;

    // 如果是从快问快答或深度检索创建的草稿，传递 isDraft: true
    const response = await getFileReferences(
      props.fileId,
      undefined,
      undefined,
      props.isChatAnswer,
    );

    if (response && response.data) {
      const { items, total } = response.data;

      // 直接使用 API 返回的数据，添加序列号
      references.value = items.map((item: ReferenceItem, index: number) => ({
        ...item,
        serialNumber: index + 1, // 使用数组索引+1作为序列号
      }));

      referencesTotal.value = total;
    } else {
      console.warn("⚠️ 参考文献 API 响应格式异常");
      references.value = [];
    }
  } catch (error) {
    console.error("❌ 加载参考文献失败:", error);
    ElMessage.error(
      `加载参考文献失败: ${(error as Error).message || "未知错误"}`,
    );
    references.value = [];
  } finally {
    isLoadingReferences.value = false;
  }
};

// 打开导入对话框
const openImportDialog = () => {
  importDialogVisible.value = true;
  importMethod.value = "title"; // 默认按标题导入
  importInput.value = "";
  searchResults.value = [];
  hasSearched.value = false;
};

// 关闭导入对话框
const closeImportDialog = () => {
  importDialogVisible.value = false;
  importInput.value = "";
  searchResults.value = [];
  hasSearched.value = false;
};

// 处理导入对话框的文献搜索
const handleImportSearch = async () => {
  if (!importInput.value.trim()) {
    ElMessage.warning(
      importMethod.value === "title" ? "请输入文献标题" : "请输入 DOI",
    );
    return;
  }

  try {
    isSearching.value = true;
    hasSearched.value = true;
    searchResults.value = [];

    let response;

    // 根据导入方式调用不同的接口
    if (importMethod.value === "title") {
      // 按标题搜索
      response = await searchReferencesByTitle(importInput.value.trim());
    } else {
      // 按 DOI 搜索
      response = await searchReferencesByDoi(importInput.value.trim());
    }

    if (response && response.data && response.data.items) {
      const items = response.data.items;

      // 直接使用 API 返回的数据，添加 importing 状态字段
      searchResults.value = items.map((item: ImportSearchResultItem) => ({
        ...item,
        importing: false, // 添加导入中状态
      }));
    } else {
      searchResults.value = [];
    }
  } catch (error) {
    console.error("搜索文献失败:", error);
    ElMessage.error(`搜索失败: ${(error as Error).message || "未知错误"}`);
    searchResults.value = [];
  } finally {
    isSearching.value = false;
  }
};

// 导入参考文献到文件
const importReference = async (reference: any) => {
  // 检查是否已经导入过
  if (references.value.some((ref) => ref.workId === reference.workId)) {
    ElMessage.warning("该文献已经导入");
    // 从搜索结果中移除已导入的项
    searchResults.value = searchResults.value.filter(
      (r) => r.workId !== reference.workId,
    );
    // 如果结果为空，重置已搜索状态，避免显示“没有找到匹配的文献”
    if (searchResults.value.length === 0) {
      hasSearched.value = false;
    }
    return;
  }

  try {
    // 设置导入中状态
    reference.importing = true;
    // 调用导入 API
    const response = await addReferenceToFile(
      Number(props.fileId),
      reference.workId,
    );
    // 检查响应是否成功
    const isSuccess =
      response &&
      ((response as any).code === 200 || (response as any).status === 200);

    if (isSuccess) {
      ElMessage.success(`成功导入文献`);

      // 从搜索结果中移除已导入的项（使用 workId 作为唯一标识）
      searchResults.value = searchResults.value.filter(
        (r) => r.workId !== reference.workId,
      );

      // 刷新参考文献列表（从后端重新加载数据）
      await loadReferences();

      // 关闭导入对话框
      closeImportDialog();
    } else {
      const errorMsg =
        (response as any)?.message ||
        (response as any)?.data?.message ||
        "导入失败";
      throw new Error(errorMsg);
    }
  } catch (error) {
    // ElMessage.error(`导入失败: ${(error as Error).message || "未知错误"}`);
  } finally {
    reference.importing = false;
  }
};

// 渲染引用标记为可视化标签（用于预览模式）
const renderCitations = (content: string): string => {
  // 匹配 {{cite:workId:note}} 格式
  const citationRegex = /\{\{cite:([^:]+):([^}]*)\}\}/g;

  return content.replace(citationRegex, (_match, workId, note) => {
    const displayText = note ? `cite:${note}` : `cite:${workId}`;
    return `<span class="citation-tag" data-work-id="${workId}">${displayText}</span>`;
  });
};

// 在编辑器 DOM 中渲染引用标签（用于编辑模式）
// 防抖重新渲染引用标签：用户停止编辑 3 秒后执行
const debouncedRerenderCitations = () => {
  // 清除之前的定时器
  if (citationRerenderTimer.value) {
    clearTimeout(citationRerenderTimer.value);
  }

  // 设置新的定时器：10 秒后执行 (减少频繁重绘导致的卡顿)
  citationRerenderTimer.value = window.setTimeout(() => {
    renderCitationsInEditor();
  }, 10000);
};

const renderCitationsInEditor = () => {
  if (!vditorContainer.value || !vditorInstance.value) return;

  // 查找编辑器内容区域
  const contentArea = vditorContainer.value.querySelector(
    '.vditor-wysiwyg__block, .vditor-ir__preview, [contenteditable="true"]',
  );

  if (!contentArea) return;

  // 快速检查：如果内容中根本没有引用标记，直接返回
  if (!contentArea.textContent?.includes("{{cite:")) return;

  // 查找所有包含 {{cite:}} 标记的文本节点
  const walker = document.createTreeWalker(
    contentArea,
    NodeFilter.SHOW_TEXT,
    null,
  );

  const nodesToReplace: { node: Text; matches: RegExpMatchArray[] }[] = [];
  let node: Text | null;

  while ((node = walker.nextNode() as Text)) {
    // 关键：检查该文本节点是否已经在 .citation-tag 元素内部
    // 如果是，说明已经渲染过了，跳过避免重复渲染
    if (node.parentElement?.closest(".citation-tag")) {
      continue;
    }

    const text = node.textContent || "";
    const citationRegex = /\{\{cite:([^:]+):([^}]*)\}\}/g;
    const matches = Array.from(text.matchAll(citationRegex));

    if (matches.length > 0) {
      nodesToReplace.push({ node, matches });
    }
  }

  // 替换找到的标记
  nodesToReplace.forEach(({ node, matches }) => {
    const text = node.textContent || "";
    const fragment = document.createDocumentFragment();
    let lastIndex = 0;

    matches.forEach((match) => {
      const fullMatch = match[0];
      let workId = match[1];
      let note = match[2];
      const matchIndex = match.index ?? 0;

      // 添加标记之前的文本
      if (matchIndex > lastIndex) {
        fragment.appendChild(
          document.createTextNode(text.substring(lastIndex, matchIndex)),
        );
      }

      // 🔍 智能匹配：检查 note 是否在参考文献列表中存在
      // 如果用户修改了引用标记的 note，尝试找到对应的参考文献
      let matchedReference = null;

      if (note && references.value.length > 0) {
        // 优先通过 note 精确匹配
        matchedReference = references.value.find(
          (ref) => ref.note && ref.note.toLowerCase() === note!.toLowerCase(),
        );

        // 如果 note 匹配不到，尝试通过 title 模糊匹配
        if (!matchedReference) {
          matchedReference = references.value.find(
            (ref) =>
              ref.title &&
              ref.title.toLowerCase().includes(note!.toLowerCase()),
          );
        }

        // 如果还是匹配不到，尝试通过 authorsText 匹配
        if (!matchedReference) {
          matchedReference = references.value.find(
            (ref) =>
              ref.authorsText &&
              ref.authorsText.toLowerCase().includes(note!.toLowerCase()),
          );
        }
      } else if (workId && references.value.length > 0) {
        // 如果没有 note，通过 workId 查找
        matchedReference = references.value.find(
          (ref) => String(ref.workId) === String(workId),
        );
      }

      // 如果找到匹配的参考文献，使用正确的 work_id 和 note
      if (matchedReference) {
        workId = String(matchedReference.workId);
        note = matchedReference.note || matchedReference.title || "";

        // 更新为正确的 markdown 标记
        const correctedMarkup = `{{cite:${workId}:${note}}}`;

        // 创建并添加 span 标签
        const span = document.createElement("span");
        span.className = "citation-tag";
        span.setAttribute("data-work-id", workId);
        span.setAttribute("data-citation-markup", correctedMarkup); // 保存修正后的标记
        span.contentEditable = "false"; // 不可编辑
        span.style.backgroundColor = "#e6f7ff";
        span.style.color = "#1890ff";
        span.style.padding = "2px 8px";
        span.style.borderRadius = "4px";
        span.style.display = "inline-block";
        span.style.fontSize = "13px";
        span.style.fontWeight = "500";
        span.style.whiteSpace = "nowrap";
        span.style.cursor = "pointer";

        // textContent 设置为修正后的 markdown 标记
        span.textContent = correctedMarkup;

        // 使用 ::before 伪元素来显示友好的文本
        span.setAttribute(
          "data-display-text",
          note ? `cite:${note}` : `cite:${workId}`,
        );

        // 添加点击事件监听器
        span.addEventListener("click", (e: MouseEvent) => {
          openCitationMenu(span, e);
        });

        fragment.appendChild(span);
      } else {
        // ⚠️ 如果在参考文献列表中找不到匹配项，保持为纯文本，不渲染样式
        // 这样用户可以看到并修正错误的引用标记
        fragment.appendChild(document.createTextNode(fullMatch));

        console.warn(`引用标记未找到匹配的参考文献: ${fullMatch}`);
      }

      lastIndex = matchIndex + fullMatch.length;
    });

    // 添加剩余的文本
    if (lastIndex < text.length) {
      fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
    }

    // 替换原始文本节点
    node.parentNode?.replaceChild(fragment, node);
  });
};

// 处理粘贴事件，检测 JSON 格式并转换为引用标记
const handlePaste = (event: Event) => {
  const clipboardEvent = event as ClipboardEvent;
  if (!clipboardEvent.clipboardData) return;

  // 获取剪贴板中的纯文本内容
  const text = clipboardEvent.clipboardData.getData("text/plain");

  // 尝试解析 JSON 格式的引用数据
  let isReferenceData = false;
  let parsedData: any = null;

  try {
    parsedData = JSON.parse(text);
    // 检查是否是有效的引用数据格式
    if (parsedData && parsedData.work_id !== undefined) {
      isReferenceData = true;
    }
  } catch (error) {
    // 不是 JSON 格式，让 Vditor 处理默认粘贴行为
    return;
  }

  // 如果是引用数据，立即阻止所有默认行为
  if (isReferenceData) {
    // 立即阻止所有默认行为
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();

    const workId = parsedData.work_id;
    const note = parsedData.note || "";

    // 构建 Markdown 标记（这样可以被保存）
    const citationMarkup = `{{cite:${workId}:${note}}}`;

    // 直接在当前光标位置插入带样式的 span 标签
    if (vditorInstance.value) {
      const selection = window.getSelection();
      if (selection && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);

        // 创建 span 元素
        const span = document.createElement("span");
        span.className = "citation-tag";
        span.setAttribute("data-work-id", String(workId));
        span.setAttribute("data-citation-markup", citationMarkup); // 保存原始标记
        span.contentEditable = "false"; // 不可编辑
        span.style.backgroundColor = "#e6f7ff";
        span.style.color = "#1890ff";
        span.style.padding = "2px 8px";
        span.style.borderRadius = "4px";
        span.style.display = "inline-block";
        span.style.fontSize = "13px";
        span.style.fontWeight = "500";
        span.style.whiteSpace = "nowrap";
        span.style.cursor = "pointer";

        // 关键修改：textContent 设置为完整的 markdown 标记
        // 这样即使 span 被 Vditor 清理，也会保留 markdown 文本
        span.textContent = citationMarkup; // 直接使用 {{cite:11:note}} 格式

        // 使用 ::before 伪元素来显示友好的文本，而不是修改 textContent
        // 通过 data 属性传递显示文本
        span.setAttribute(
          "data-display-text",
          note ? `cite:${note}` : `cite:${workId}`,
        );

        // 添加点击事件监听器
        span.addEventListener("click", (e: MouseEvent) => {
          openCitationMenu(span, e);
        });

        // 插入 span 元素
        range.insertNode(span);

        // 在 span 后面插入一个空格
        const space = document.createTextNode("\u00A0");
        range.setStartAfter(span);
        range.insertNode(space);

        // 将光标移动到空格之后
        range.setStartAfter(space);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);

        // 触发内容变化
        setTimeout(() => {
          if (vditorInstance.value) {
            const currentValue = vditorInstance.value.getValue();
            handleContentChange(currentValue);
          }
        }, 50);
      }
    }

    return false;
  }
};

// 复制引用 - 复制 JSON 格式
const handleCopyReference = async (reference: any) => {
  try {
    const workId = reference.workId;
    const note = reference.note || "";

    // 构建 JSON 格式数据
    const citationData = {
      work_id: String(workId),
      note: note,
    };

    const jsonString = JSON.stringify(citationData);

    // 复制 JSON 字符串到剪贴板
    await navigator.clipboard.writeText(jsonString);

    ElMessage.success("引用已复制到剪贴板");
  } catch (error) {
    console.error("复制引用失败:", error);
    ElMessage.error(`复制失败: ${(error as Error).message || "未知错误"}`);
  }
};

// 处理参考文献拖拽开始
const handleReferenceDragStart = (event: DragEvent, reference: any) => {
  if (!event.dataTransfer) return;

  const workId = reference.workId;
  const note = reference.note || "";

  // 构建 JSON 格式数据（和复制时一样的格式）
  const citationData = {
    work_id: String(workId),
    note: note,
  };

  const jsonString = JSON.stringify(citationData);

  // 设置拖拽数据
  event.dataTransfer.effectAllowed = "copy";
  event.dataTransfer.setData("text/plain", jsonString);
  event.dataTransfer.setData("application/json", jsonString);

  // 创建自定义拖拽预览元素 - 只显示别名
  const dragText = note ? `cite:${note}` : `cite:${workId}`;
  const dragPreview = document.createElement("div");
  dragPreview.className = "reference-drag-preview";
  dragPreview.textContent = dragText;
  dragPreview.style.position = "absolute";
  dragPreview.style.top = "-1000px";
  dragPreview.style.left = "-1000px";
  dragPreview.style.padding = "6px 12px";
  dragPreview.style.backgroundColor = "#e6f7ff";
  dragPreview.style.color = "#1890ff";
  dragPreview.style.borderRadius = "4px";
  dragPreview.style.fontSize = "13px";
  dragPreview.style.fontWeight = "500";
  dragPreview.style.whiteSpace = "nowrap";
  dragPreview.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.15)";
  dragPreview.style.border = "1px solid #91d5ff";
  dragPreview.style.zIndex = "9999";

  document.body.appendChild(dragPreview);

  // 设置自定义拖拽图像
  event.dataTransfer.setDragImage(dragPreview, 0, 0);

  // 拖拽结束后移除预览元素
  setTimeout(() => {
    document.body.removeChild(dragPreview);
  }, 0);
};

// 阻止编辑器内文本拖拽启动，防止从右到左选择时被误判为拖拽
const handleEditorDragStart = (event: Event) => {
  const dragEvent = event as DragEvent;
  const target = dragEvent.target as HTMLElement;
  // 仅允许显式设置 draggable="true" 的元素（如参考文献条目）发起拖拽
  if (!target?.closest?.('[draggable="true"]')) {
    dragEvent.preventDefault();
  }
};

// 处理编辑器区域的拖拽悬停
const handleEditorDragOver = (event: Event) => {
  const dragEvent = event as DragEvent;
  // 只在拖拽引用数据时才阻止默认行为（引用拖拽会携带 application/json 类型）
  // 无条件 preventDefault 会破坏浏览器原生的文本选择功能（尤其是从右到左选择）
  if (dragEvent.dataTransfer && dragEvent.dataTransfer.types.includes("application/json")) {
    dragEvent.preventDefault();
    dragEvent.dataTransfer.dropEffect = "copy";
  }
};

// 处理编辑器区域的拖拽放置
const handleEditorDrop = (event: Event) => {
  const dragEvent = event as DragEvent;

  if (!dragEvent.dataTransfer || !vditorInstance.value) return;

  // 获取拖拽数据
  const jsonString = dragEvent.dataTransfer.getData("text/plain");

  // 尝试解析 JSON 格式的引用数据
  let parsedData: any = null;
  let isReferenceData = false;

  try {
    parsedData = JSON.parse(jsonString);
    // 检查是否是有效的引用数据格式
    if (parsedData && parsedData.work_id !== undefined) {
      isReferenceData = true;
    }
  } catch (error) {
    // 不是 JSON 格式，让 Vditor 处理
    return;
  }

  // 只有当是引用数据时才阻止默认行为
  if (!isReferenceData) return;

  // 立即阻止所有默认行为和事件传播
  dragEvent.preventDefault();
  dragEvent.stopPropagation();
  dragEvent.stopImmediatePropagation();

  const workId = parsedData.work_id;
  const note = parsedData.note || "";

  // 构建 Markdown 标记
  const citationMarkup = `{{cite:${workId}:${note}}}`;

  // 获取放置位置 - 使用 Vditor 的可编辑区域
  const editableElement = vditorContainer.value?.querySelector(
    '[contenteditable="true"]',
  );
  if (!editableElement) return;

  // 获取准确的拖放位置
  const range = document.caretRangeFromPoint(
    dragEvent.clientX,
    dragEvent.clientY,
  );
  if (!range) return;

  // 确保 range 在编辑器内
  if (!editableElement.contains(range.startContainer)) {
    console.warn("拖放位置不在编辑器内");
    return;
  }

  // 清除当前选区，避免干扰
  const selection = window.getSelection();
  if (selection) {
    selection.removeAllRanges();
  }

  // 创建 span 元素
  const span = document.createElement("span");
  span.className = "citation-tag";
  span.setAttribute("data-work-id", String(workId));
  span.setAttribute("data-citation-markup", citationMarkup);
  span.contentEditable = "false";
  span.style.backgroundColor = "#e6f7ff";
  span.style.color = "#1890ff";
  span.style.padding = "2px 8px";
  span.style.borderRadius = "4px";
  span.style.display = "inline-block";
  span.style.fontSize = "13px";
  span.style.fontWeight = "500";
  span.style.whiteSpace = "nowrap";
  span.style.cursor = "pointer";

  // 关键修改：textContent 设置为完整的 markdown 标记
  // 这样即使 span 被 Vditor 清理，也会保留 markdown 文本
  span.textContent = citationMarkup; // 直接使用 {{cite:11:note}} 格式

  // 使用 ::before 伪元素来显示友好的文本，而不是修改 textContent
  // 通过 data 属性传递显示文本
  span.setAttribute(
    "data-display-text",
    note ? `cite:${note}` : `cite:${workId}`,
  );

  // 添加点击事件监听器
  span.addEventListener("click", (e: MouseEvent) => {
    openCitationMenu(span, e);
  });

  // 在放置位置插入 span 元素
  try {
    range.deleteContents(); // 删除选中的内容（如果有）
    range.insertNode(span);

    // 在 span 后面插入一个空格
    const space = document.createTextNode("\u00A0");
    range.setStartAfter(span);
    range.insertNode(space);

    // 将光标移动到空格之后
    range.setStartAfter(space);
    range.collapse(true);

    // 恢复选区
    if (selection) {
      selection.removeAllRanges();
      selection.addRange(range);
    }

    // 触发内容变化
    setTimeout(() => {
      if (vditorInstance.value) {
        const currentValue = vditorInstance.value.getValue();
        handleContentChange(currentValue);
      }
    }, 100);

    ElMessage.success("引用已添加到文档");
  } catch (error) {
    console.error("插入引用标记失败:", error);
    ElMessage.error("插入引用标记失败");
  }
};

// 打开引用标记菜单
const openCitationMenu = (span: HTMLElement, event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();

  currentCitationSpan.value = span;

  // 计算初始菜单位置
  const rect = span.getBoundingClientRect();
  citationMenuPosition.value = {
    x: rect.left,
    y: rect.bottom + 5, // 默认在标记下方 5px
  };

  showCitationMenu.value = true;

  // 使用 nextTick 等待菜单渲染后精细调整位置，防止溢出屏幕
  nextTick(() => {
    if (!citationMenuRef.value) return;

    const menuRect = citationMenuRef.value.getBoundingClientRect();
    const viewportHeight = window.innerHeight;
    const viewportWidth = window.innerWidth;

    let x = rect.left;
    let y = rect.bottom + 5;

    // 检查底部溢出
    if (y + menuRect.height > viewportHeight) {
      // 如果下方空间不足，尝试显示在上方
      const topY = rect.top - menuRect.height - 5;
      if (topY > 0) {
        y = topY;
      } else {
        // 如果上方也不够，尽量靠底部显示，但不超出屏幕
        y = Math.max(5, viewportHeight - menuRect.height - 10);
      }
    }

    // 检查右侧溢出
    if (x + menuRect.width > viewportWidth) {
      x = Math.max(10, viewportWidth - menuRect.width - 10);
    }

    citationMenuPosition.value = { x, y };
  });
};

// 替换引用标记
const replaceCitation = (reference: any) => {
  if (!currentCitationSpan.value) return;

  const workId = reference.workId;
  const note = reference.note || "";
  const citationMarkup = `{{cite:${workId}:${note}}}`;
  const displayText = note ? `cite:${note}` : `cite:${workId}`;

  // 更新 span 的内容和属性
  // textContent 设置为完整的 markdown 标记，用于保存
  currentCitationSpan.value.textContent = citationMarkup;
  // data-display-text 用于 ::before 伪元素显示友好的文本
  currentCitationSpan.value.setAttribute("data-display-text", displayText);
  currentCitationSpan.value.setAttribute("data-work-id", String(workId));
  currentCitationSpan.value.setAttribute(
    "data-citation-markup",
    citationMarkup,
  );

  // 关闭菜单
  showCitationMenu.value = false;
  currentCitationSpan.value = null;

  // 触发内容变化
  if (vditorInstance.value) {
    const currentValue = vditorInstance.value.getValue();
    handleContentChange(currentValue);
  }

  ElMessage.success("引用已更换");
};

// 关闭引用菜单
const closeCitationMenu = () => {
  showCitationMenu.value = false;
  currentCitationSpan.value = null;
  citationMenuSearch.value = ""; // 清空搜索关键词
};

// 点击外部关闭引用菜单
const handleClickOutside = (event: MouseEvent) => {
  if (!showCitationMenu.value) return;

  const target = event.target as HTMLElement;
  if (!target || !target.closest) {
    closeCitationMenu();
    return;
  }

  // 如果点击的是引用标记或菜单内部，不关闭
  if (target.closest(".citation-tag") || target.closest(".citation-menu-wrapper")) {
    return;
  }

  // 关闭菜单
  closeCitationMenu();
};

// 滚动时关闭引用菜单
const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement;
  if (!target) return;

  if (target.classList && target.classList.contains("vditor-reset")) {
    editorScrollTop.value = target.scrollTop;
  }
  if (!showCitationMenu.value) return;

  // 如果滚动事件发生在引用菜单内部，不关闭菜单
  if (target.closest && target.closest(".citation-menu-wrapper")) {
    return;
  }

  // 只有在页面或编辑器滚动时才关闭菜单
  closeCitationMenu();
};

// 打开导出对话框
const openExportDialog = () => {
  exportDialogVisible.value = true;
  exportOutputFormat.value = "markdown"; // 默认 Markdown
  exportCitationFormat.value = "apa"; // 默认 APA
};

// 提取文档中的引用标记并构建citationGroups
const extractCitationGroups = (
  content: string,
): { groups: number[][]; positions: { start: number; end: number }[] } => {
  const groups: number[][] = [];
  const positions: { start: number; end: number }[] = [];

  // 首先找到所有单个引用标记及其位置
  const singleCiteRegex = /\{\{cite:([^:]+):([^}]*)\}\}/g;
  const allCitations: { workId: number; start: number; end: number }[] = [];

  let match;
  while ((match = singleCiteRegex.exec(content)) !== null) {
    const workIdStr = match[1];
    if (workIdStr) {
      const workId = parseInt(workIdStr, 10);
      if (!isNaN(workId)) {
        allCitations.push({
          workId,
          start: match.index,
          end: match.index + match[0].length,
        });
      }
    }
  }
  // 将连续的引用标记分组
  if (allCitations.length === 0) {
    return { groups, positions };
  }

  const firstCitation = allCitations[0];
  if (!firstCitation) {
    return { groups, positions };
  }

  let currentGroup: number[] = [firstCitation.workId];
  let groupStart = firstCitation.start;
  let groupEnd = firstCitation.end;

  for (let i = 1; i < allCitations.length; i++) {
    const prev = allCitations[i - 1];
    const curr = allCitations[i];

    if (!prev || !curr) continue;

    // 计算两个引用标记之间的距离
    const distance = curr.start - prev.end;

    // 检查是否连续：
    // 1. 紧邻（distance = 0）
    // 2. 中间只有少量空白字符（distance <= 5，允许空格、换行等）
    const isContinuous = distance >= 0 && distance <= 5;

    if (isContinuous) {
      // 连续的引用标记，加入当前组
      currentGroup.push(curr.workId);
      groupEnd = curr.end;
    } else {
      // 不连续，保存当前组并开始新组
      groups.push(currentGroup);
      positions.push({ start: groupStart, end: groupEnd });

      currentGroup = [curr.workId];
      groupStart = curr.start;
      groupEnd = curr.end;
    }
  }

  // 保存最后一组
  if (currentGroup.length > 0) {
    groups.push(currentGroup);
    positions.push({ start: groupStart, end: groupEnd });
  }

  return { groups, positions };
};

// 处理文档导出
const handleExportDocument = async () => {
  if (!vditorInstance.value) {
    ElMessage.error("编辑器未初始化");
    return;
  }

  // 设置导出状态，阻止所有内容变化监听
  isExporting.value = true;

  // 清除所有定时器，暂停自动保存
  if (autoSaveTimer.value) {
    clearTimeout(autoSaveTimer.value);
  }
  if (contentWatcherInterval.value) {
    clearInterval(contentWatcherInterval.value);
  }

  // 禁用编辑器的input事件，防止触发内容变化
  const vditorOptions = vditorInstance.value.vditor?.options;
  const originalInputCallback = vditorOptions?.input;

  try {
    if (vditorOptions) {
      vditorOptions.input = () => {}; // 临时禁用
    }
    const outputFormat = exportOutputFormat.value;
    const citationFormat = exportCitationFormat.value;

    // 先触发一次内容转换，确保包含最新的引用标记
    const rawContent = vditorInstance.value.getValue();
    const convertedContent = convertSpanToMarkdown(rawContent);

    // 使用转换后的内容
    let markdownContent = convertedContent || currentContent.value;

    // 检查是否包含引用标记的特征字符串
    const hasCiteKeyword = markdownContent.includes("{{cite:");

    // 如果没有找到引用标记，尝试从currentContent获取
    if (!hasCiteKeyword && currentContent.value) {
      const hasInCurrent = currentContent.value.includes("{{cite:");

      if (hasInCurrent) {
        markdownContent = currentContent.value;
      }
    }

    // 提取引用标记并构建citationGroups
    const { groups: citationGroups, positions } =
      extractCitationGroups(markdownContent);

    // 如果有引用标记，显示加载提示并调用API获取格式化文本
    let formattedTexts: string[] = [];
    if (citationGroups.length > 0) {
      // 显示加载提示
      ElMessage.info({
        message: "正在生成引用格式...",
        duration: 0, // 不自动关闭
        showClose: false,
      });

      const response = await getInTextCitation(
        props.fileId,
        citationGroups,
        citationFormat,
        outputFormat,
      );

      // 关闭加载提示
      ElMessage.closeAll();

      // 检查响应数据结构
      if (response && response.data) {
        formattedTexts = response.data.texts || [];
      } else if (response && (response as any).texts) {
        formattedTexts = (response as any).texts;
      }

      // 验证返回的texts数量是否匹配
      if (formattedTexts.length !== citationGroups.length) {
        // console.warn(
        //   `⚠️ 返回的texts数量(${formattedTexts.length})与citationGroups数量(${citationGroups.length})不匹配`,
        // );
      }

      // 从后往前替换，避免位置偏移问题
      for (let i = positions.length - 1; i >= 0; i--) {
        const pos = positions[i];
        if (!pos) {
          console.warn(`⚠️ 位置${i}为空，跳过`);
          continue;
        }

        const formattedText = formattedTexts[i] || "";
        // const originalText = markdownContent.substring(pos.start, pos.end);

        const before = markdownContent.substring(0, pos.start);
        const after = markdownContent.substring(pos.end);

        markdownContent = before + formattedText + after;
      }

      // 额外验证：检查替换是否真的生效
      const stillHasCiteMarks = markdownContent.includes("{{cite:");
      const hasApaFormat = /\([^)]+,\s*\d{4}[^)]*\)/.test(markdownContent);

      if (stillHasCiteMarks) {
        console.error("⚠️⚠️⚠️ 警告：替换后内容中仍然包含 {{cite:}} 标记！");
        // 找出所有未替换的引用标记
        const remainingCites = markdownContent.match(/\{\{cite:[^}]+\}\}/g);
        console.error("未替换的标记:", remainingCites);
      }

      if (!hasApaFormat && citationFormat === "apa") {
        console.error("⚠️⚠️⚠️ 警告：替换后内容中没有检测到APA格式引用！");
      }
    } else {
      console.log("ℹ️ 文档中没有引用标记，直接导出");
    }

    // 根据输出格式处理内容
    let finalContent = markdownContent;

    if (outputFormat === "html") {
      // 将 markdown 转换为 HTML
      // 使用 Vditor 的静态方法转换，不触发编辑器事件
      if (
        typeof Vditor !== "undefined" &&
        typeof Vditor.preview === "function"
      ) {
        // 创建临时容器
        const tempDiv = document.createElement("div");
        await Vditor.preview(tempDiv, markdownContent, {
          mode: "light",
        });
        finalContent = tempDiv.innerHTML;
      } else {
        // 降级方案：简单的Markdown到HTML转换
        finalContent = markdownContent
          .replace(/^### (.+)$/gm, "<h3>$1</h3>")
          .replace(/^## (.+)$/gm, "<h2>$1</h2>")
          .replace(/^# (.+)$/gm, "<h1>$1</h1>")
          .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
          .replace(/\*(.+?)\*/g, "<em>$1</em>")
          .replace(/\n\n/g, "</p><p>")
          .replace(/^(.+)$/gm, "<p>$1</p>");
      }
    } else if (outputFormat === "text") {
      // 先保护引用格式的文本（APA和IEEE）
      // 将 [文本](引用) 中的引用内容保留
      const citationPlaceholders: { placeholder: string; original: string }[] =
        [];
      let placeholderIndex = 0;

      // 识别并保护引用格式
      finalContent = markdownContent.replace(
        /\[([^\]]+)\]\(([^)]+(?:et al\.|,|;|\d{4}|[\u4e00-\u9fa5])[^)]*)\)/g,
        (_match, text, citation) => {
          // 如果括号内包含年份、et al.、中文等引用特征，保留完整格式
          const placeholder = `__CITATION_${placeholderIndex}__`;
          citationPlaceholders.push({
            placeholder,
            original: `${text} ${citation}`, // 保留文本和引用
          });
          placeholderIndex++;
          return placeholder;
        },
      );

      // 简单的 Markdown 到纯文本转换
      finalContent = finalContent
        .replace(/#{1,6}\s+/g, "") // 移除标题标记
        .replace(/\*\*(.+?)\*\*/g, "$1") // 移除加粗
        .replace(/\*(.+?)\*/g, "$1") // 移除斜体
        .replace(/`(.+?)`/g, "$1") // 移除行内代码
        .replace(/\[(.+?)\]\(.+?\)/g, "$1") // 移除普通链接，保留文本
        .replace(/!\[.*?\]\(.+?\)/g, "") // 移除图片
        .replace(/^>\s+/gm, "") // 移除引用标记
        .replace(/^[-*+]\s+/gm, "• ") // 列表项转为项目符号
        .replace(/^\d+\.\s+/gm, "") // 移除有序列表编号
        .replace(/```[\s\S]*?```/g, "") // 移除代码块
        .trim();

      // 恢复引用格式
      citationPlaceholders.forEach(({ placeholder, original }) => {
        finalContent = finalContent.replace(placeholder, original);
      });
    }

    // 调用API获取完整的参考文献列表
    if (citationGroups.length > 0) {
      // 显示加载提示
      ElMessage.info({
        message: "正在生成参考文献列表...",
        duration: 0,
        showClose: false,
      });

      try {
        const citationResponse = await getFormatCitation(
          props.fileId,
          citationGroups,
          citationFormat,
          outputFormat,
        );

        // 关闭加载提示
        ElMessage.closeAll();

        // 检查响应数据结构
        let entries: string[] = [];
        if (citationResponse && citationResponse.data) {
          entries = citationResponse.data.entries || [];
        } else if (citationResponse && (citationResponse as any).entries) {
          entries = (citationResponse as any).entries;
        }

        // 如果有参考文献条目，添加到文档末尾
        if (entries.length > 0) {
          // 直接使用API返回的数据，不做任何序号处理
          const processedEntries = entries.map((entry) => entry.trim());

          // 根据输出格式添加参考文献列表
          if (outputFormat === "html") {
            // HTML格式
            finalContent += `\n<h2>References</h2>\n`;
            processedEntries.forEach((entry) => {
              finalContent += `<p>${entry}</p>\n`;
            });
          } else if (outputFormat === "markdown") {
            // Markdown格式
            finalContent += `\n\n## References\n\n`;
            processedEntries.forEach((entry) => {
              // 确保每个条目后有换行符
              finalContent += entry + (entry.endsWith("\n") ? "" : "\n");
            });
          } else {
            // 纯文本格式
            finalContent += `\n\nReferences\n\n`;
            processedEntries.forEach((entry) => {
              // 确保每个条目后有换行符
              finalContent += entry + (entry.endsWith("\n") ? "" : "\n");
            });
          }
        } else {
          console.warn("⚠️ API未返回参考文献条目");
        }
      } catch (error) {
        console.error("❌ 获取参考文献列表失败:", error);
        ElMessage.closeAll();
        ElMessage.warning("获取参考文献列表失败，将继续导出文档");
      }
    }

    // 确定文件扩展名
    let extension = ".md";
    let mimeType = "text/markdown";
    if (outputFormat === "html") {
      extension = ".html";
      mimeType = "text/html";
    } else if (outputFormat === "text") {
      extension = ".txt";
      mimeType = "text/plain";
    }

    const finalHasCite = finalContent.includes("{{cite:");

    // 显示所有匹配APA格式的文本
    const apaMatches = finalContent.match(/\([^)]+,\s*\d{4}[^)]*\)/g);
    if (apaMatches && apaMatches.length > 0) {
      apaMatches.forEach((match, index) => {
        console.log(`  ${index + 1}. ${match}`);
      });
    } else if (citationFormat === "apa" && citationGroups.length > 0) {
      console.error("❌❌❌ 严重错误：应该有APA引用但未找到！");
    }

    // 如果最终内容仍有cite标记，说明替换失败
    if (finalHasCite) {
      const remainingCites = finalContent.match(/\{\{cite:[^}]+\}\}/g);
      console.error("未替换的标记:", remainingCites);
    }

    // 创建下载
    const blob = new Blob([finalContent], {
      type: `${mimeType};charset=utf-8`,
    });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `${props.fileName.replace(/\.\w+$/, "")}${extension}`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);

    ElMessage.success("文档导出成功");
    triggerNewbieTask("doc_download_save");
    exportDialogVisible.value = false;
  } catch (error) {
    console.error("❌ 导出文档失败:", error);
    ElMessage.closeAll(); // 关闭加载提示
    ElMessage.error(`导出失败: ${(error as Error).message || "未知错误"}`);
  } finally {
    // 恢复编辑器的input事件
    if (vditorOptions && originalInputCallback) {
      vditorOptions.input = originalInputCallback;
    }

    // 重置导出状态
    isExporting.value = false;

    // 恢复内容监听
    startContentWatcher();
  }
};

// 删除参考文献
const handleDeleteReference = async (reference: any) => {
  try {
    // 弹出确认对话框
    await ElMessageBox.confirm(
      `确定要删除文献《${reference.title}》吗？删除后将无法恢复。`,
      "删除确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    );

    // 用户点击确定，调用删除 API
    const response = await deleteReferenceFromFile(
      props.fileId,
      reference.workId,
    );

    // 检查响应是否成功
    const isSuccess =
      response &&
      ((response as any).code === 200 || (response as any).status === 200);

    if (isSuccess) {
      ElMessage.success("文献删除成功");

      // 刷新参考文献列表（从后端重新加载数据）
      await loadReferences();
    } else {
      const errorMsg =
        (response as any)?.message ||
        (response as any)?.data?.message ||
        "删除失败";
      throw new Error(errorMsg);
    }
  } catch (error: any) {
    // 用户点击取消会抛出 cancel 错误，不需要提示
    if (error === "cancel" || error === "close") {
      return;
    }
    // 其他错误提示
    ElMessage.error(`删除失败: ${error.message || "未知错误"}`);
  }
};

// 开始拖拽调整大小
const startResize = (e: MouseEvent | TouchEvent) => {
  e.preventDefault();
  isResizing.value = true;

  const clientY = "touches" in e ? e.touches[0]?.clientY || 0 : e.clientY;
  startY.value = clientY;

  // 获取当前高度百分比
  startEditorHeight.value = parseFloat(editorHeight.value);
  startReferenceHeight.value = parseFloat(referenceHeight.value);

  // 添加全局事件监听
  document.addEventListener("mousemove", handleResize);
  document.addEventListener("mouseup", stopResize);
  document.addEventListener("touchmove", handleResize);
  document.addEventListener("touchend", stopResize);

  // 防止文本选择
  document.body.style.userSelect = "none";
  document.body.style.cursor = "ns-resize";
};

// 处理拖拽
const handleResize = (e: MouseEvent | TouchEvent) => {
  if (!isResizing.value) return;

  e.preventDefault();
  const clientY = "touches" in e ? e.touches[0]?.clientY || 0 : e.clientY;
  const deltaY = clientY - startY.value;

  // 获取容器高度
  const container = document.querySelector(
    ".vditor-markdown-editor",
  ) as HTMLElement;
  if (!container) return;

  const containerHeight = container.offsetHeight;
  const deltaPercent = (deltaY / containerHeight) * 100;

  // 计算新高度
  let newEditorHeight = startEditorHeight.value + deltaPercent;
  let newReferenceHeight = startReferenceHeight.value - deltaPercent;

  // 限制最小高度（参考文献区域最小300px，编辑器可以最小到0允许参考文献完全覆盖）
  const minReferencePercent = (300 / containerHeight) * 100;
  const maxReferencePercent = 100; // 允许参考文献覆盖整个编辑器

  newEditorHeight = Math.max(0, Math.min(100, newEditorHeight)); // 编辑器最小0%，最大100%
  newReferenceHeight = Math.max(
    minReferencePercent,
    Math.min(maxReferencePercent, newReferenceHeight),
  );

  // 更新高度
  editorHeight.value = `${newEditorHeight}%`;
  referenceHeight.value = `${newReferenceHeight}%`;
};

// 停止拖拽
const stopResize = () => {
  try {
    isResizing.value = false;

    // 移除全局事件监听
    document.removeEventListener("mousemove", handleResize);
    document.removeEventListener("mouseup", stopResize);
    document.removeEventListener("touchmove", handleResize);
    document.removeEventListener("touchend", stopResize);
  } finally {
    // 确保始终恢复样式，即使上面的代码抛异常
    document.body.style.userSelect = "";
    document.body.style.cursor = "";
  }
};

// 监听 fileId 变化，如果变为无效值，停止所有操作
watch(
  () => props.fileId,
  (newFileId, oldFileId) => {
    // 如果 fileId 变为 undefined、null 或空值，且之前有值，说明标签被关闭或文件被删除
    if (
      (!newFileId || newFileId === undefined || newFileId === null) &&
      oldFileId
    ) {
      console.warn("文件ID变为无效，停止所有操作:", oldFileId);

      // 设置销毁标志，停止所有操作
      isDestroying.value = true;

      // 清除所有定时器
      if (autoSaveTimer.value) {
        clearTimeout(autoSaveTimer.value);
        autoSaveTimer.value = undefined;
      }
      if (contentWatcherInterval.value) {
        clearInterval(contentWatcherInterval.value);
        contentWatcherInterval.value = undefined;
      }
      if (outlineUpdateTimer.value) {
        clearTimeout(outlineUpdateTimer.value);
        outlineUpdateTimer.value = undefined;
      }
      if (citationRerenderTimer.value) {
        clearTimeout(citationRerenderTimer.value);
        citationRerenderTimer.value = undefined;
      }

      // 停止 TOS 同步定时器
      stopTosSyncTimer();
    }
  },
);

// 监听 showReferences 变化，自动调整编辑器高度
// 参考文献数据已在编辑器初始化时加载，此处只控制显示/隐藏
watch(
  () => props.showReferences,
  (newValue) => {
    if (newValue) {
      // 显示参考文献区域
      editorHeight.value = "70%";
      referenceHeight.value = "30%";
    } else {
      // 隐藏参考文献区域，编辑器占满
      editorHeight.value = "100%";
      referenceHeight.value = "0%";
    }
  },
  { immediate: true },
);

// 监听导入方式变化，清空搜索结果和输入框
watch(
  () => importMethod.value,
  () => {
    // 清空搜索结果
    searchResults.value = [];
    hasSearched.value = false;
    // 清空输入框
    importInput.value = "";
    // 自动聚焦到输入框
    nextTick(() => {
      importInputRef.value?.focus();
    });
  },
);

// Initialize editor
onMounted(async () => {
  // 启动初始化流程
  tryInitVditor();

  // 添加点击外部关闭引用菜单的事件监听器
  document.addEventListener("click", handleClickOutside);

  // 添加滚动事件监听器，关闭引用菜单
  window.addEventListener("scroll", handleScroll, true); // 使用捕获模式监听所有滚动
  document.addEventListener("scroll", handleScroll, true);
});

// Cleanup
onBeforeUnmount(() => {
  isDestroying.value = true;

  // Clear timers
  if (outlineUpdateTimer.value) {
    clearTimeout(outlineUpdateTimer.value);
  }
  if (contentWatcherInterval.value) {
    clearInterval(contentWatcherInterval.value);
  }
  if (autoSaveTimer.value) {
    clearTimeout(autoSaveTimer.value);
  }
  if (citationRerenderTimer.value) {
    clearTimeout(citationRerenderTimer.value);
  }

  // Remove paste event listener
  if (vditorContainer.value) {
    vditorContainer.value.removeEventListener("paste", handlePaste, true);
  }

  // 同时移除可编辑区域的监听器
  const editableElement = vditorContainer.value?.querySelector(
    "[contenteditable='true']",
  );
  if (editableElement) {
    editableElement.removeEventListener("paste", handlePaste, true);
  }

  // 移除拖拽事件监听器（使用相同的捕获模式参数）
  if (vditorContainer.value) {
    vditorContainer.value.removeEventListener("dragstart", handleEditorDragStart, true);
    vditorContainer.value.removeEventListener("dragover", handleEditorDragOver, true);
    vditorContainer.value.removeEventListener("drop", handleEditorDrop, true);
  }

  // 同时移除可编辑区域的拖拽监听器
  if (editableElement) {
    editableElement.removeEventListener("dragstart", handleEditorDragStart, true);
    editableElement.removeEventListener("dragover", handleEditorDragOver, true);
    editableElement.removeEventListener("drop", handleEditorDrop, true);
  }

  // 移除点击外部关闭菜单的事件监听器
  document.removeEventListener("click", handleClickOutside);

  // 移除滚动事件监听器
  window.removeEventListener("scroll", handleScroll, true);
  document.removeEventListener("scroll", handleScroll, true);

  // 确保恢复 userSelect（防止拖拽中途组件销毁导致选择功能被永久禁用）
  document.body.style.userSelect = "";
  document.body.style.cursor = "";

  // 清理 MutationObserver
  if (
    vditorContainer.value &&
    (vditorContainer.value as any)._citationObserver
  ) {
    (vditorContainer.value as any)._citationObserver.disconnect();
    delete (vditorContainer.value as any)._citationObserver;
  }

  // Auto-save before destroy
  stopTosSyncTimer();
  if (!isSaving.value) {
    if (isTosFile.value) {
      // TOS 文件：如果有未保存的编辑 或 已缓存但未同步的修改，统一直接同步远端
      if ((hasUserEdited.value && hasUnsavedChanges.value) || hasPendingTosSync.value) {
        console.log("🔄 组件销毁前同步 TOS 文件到远端");
        hasPendingTosSync.value = true;
        autoSaveDocument(true);
      }
    } else {
      // LOCAL 文件：正常保存
      if (hasUserEdited.value && hasUnsavedChanges.value) {
        autoSaveDocument();
      }
    }
  }

  // Destroy Vditor instance
  if (vditorInstance.value) {
    try {
      // 检查实例是否还有 element 属性，避免访问 undefined 的错误
      if ((vditorInstance.value as any).element) {
        vditorInstance.value.destroy();
      }
    } catch (error) {
      console.error("销毁 Vditor 实例失败:", error);
    } finally {
      vditorInstance.value = undefined;
    }
  }
});

const tryInitVditor = async () => {
  // 已初始化，直接返回
  if (vditorInstance.value) return;

  const el = vditorContainer.value as HTMLElement | null;

  // ⚠️ DOM 存在 ≠ 可初始化
  if (!el || el.offsetParent === null) {
    requestAnimationFrame(tryInitVditor);
    return;
  }

  try {
    await initVditorEditor();
  } catch (err) {
    console.error("Vditor 初始化失败:", err);
    isLoading.value = false; // 确保加载状态被关闭
  }
};

// Initialize Vditor editor
const initVditorEditor = async () => {
  try {
    if (vditorInstance.value) {
      return;
    }
    if (isDestroying.value) {
      return;
    }

    // 等待 DOM 元素准备好
    await nextTick();

    // if (!vditorContainer.value) {
    //   if (initRetryCount.value < maxInitRetries) {
    //     initRetryCount.value++;
    //     // 延迟重试
    //     setTimeout(() => {
    //       if (!isDestroying.value) {
    //         initVditorEditor();
    //       }
    //     }, 100);
    //   } else {
    //     isLoading.value = false;
    //   }
    //   return;
    // }

    // // 检查容器元素是否在 DOM 中
    // if (!document.contains(vditorContainer.value)) {
    //   console.warn("Vditor 容器元素不在 DOM 中，延迟初始化");
    //   if (initRetryCount.value < maxInitRetries) {
    //     initRetryCount.value++;
    //     setTimeout(() => {
    //       if (!isDestroying.value) {
    //         initVditorEditor();
    //       }
    //     }, 100);
    //   } else {
    //     console.error(
    //       "Vditor 初始化失败：容器元素不在 DOM 中，已达到最大重试次数",
    //     );
    //     isLoading.value = false;
    //   }
    //   return;
    // }
    const el = vditorContainer.value as HTMLElement | null;

    if (!el || el.offsetParent === null) {
      throw new Error("Vditor 容器未处于可见布局态");
    }

    isLoading.value = true;

    // 设置 Vditor 全局配置，禁用国际化文件加载
    if (typeof window !== "undefined") {
      (window as any).vditorI18n = {
        zh_CN: {},
      };
      // 设置 lute 路径，改用 jsdelivr 镜像，提高国内访问速度
      (window as any).vditorLutePath =
        "https://cdn.jsdelivr.net/npm/vditor@3.11.2/dist/js/lute/lute.min.js";
    }

    // 设置超时保护：如果 10 秒后还没初始化完成，强行关闭加载状态
    const initTimeout = setTimeout(() => {
      if (isLoading.value && !vditorInstance.value) {
        console.warn("Vditor 初始化超时，尝试强制解除加载状态");
        isLoading.value = false;
      }
    }, 10000);

    // Load file content
    let content = props.preloadContent;
    if (!content && props.fileId) {
      content = await loadFileContent();
    } else if (content) {
      // 如果提供了 preloadContent，也需要移除参考文献部分
      content = removeReferencesSection(content);
    }

    // 🔧 修复数学公式渲染问题：预处理内容
    if (content) {
      content = preprocessMathContent(content);
    }

    originalContent.value = content;
    currentContent.value = content;
    lastSavedContent.value = content;
    hasChanges.value = false;
    hasUnsavedChanges.value = false;
    hasUserEdited.value = false;

    // Vditor configuration
    vditorInstance.value = new Vditor(vditorContainer.value as HTMLElement, {
      value: content || "# 欢迎使用 Vditor 编辑器\n\n开始编辑您的文档...",
      height: "100%",
      mode: "wysiwyg", // 所见即所得模式  "ir" 即时渲染模式 "preview" 预览模式
      theme: "classic",
      placeholder: "开始编辑您的文档...",
      customWysiwygToolbar: () => {},
      // 输入回调：内容变化时触发
      input: (value: string) => {
        handleContentChange(value);
      },
      // 使用 jsdelivr CDN 资源
      cdn: "https://cdn.jsdelivr.net/npm/vditor@3.11.2",
      
      // 注意：Lute 引擎配置需要在 after 回调中设置，这里无法直接配置

      // 工具栏配置
      toolbar: [
        "emoji",
        "headings",
        "bold",
        "italic",
        "strike",
        "|",
        "line",
        "quote",
        "list",
        "ordered-list",
        "check",
        "outdent",
        "indent",
        "|",
        "code",
        "inline-code",
        "|",
        "upload",
        "link",
        "table",
        "|",
        "undo",
        "redo",
        "|",
        "edit-mode",
        "outline",
        "preview",
        "fullscreen",
        "|",
        {
          name: "custom-export",
          tipPosition: "s",
          tip: "导出文件",
          className: "vditor-tooltipped vditor-tooltipped--s",
          icon: '<svg viewBox="0 0 32 32" width="16" height="16"><path d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4z"></path><path d="M26 14l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10 10-10z"></path></svg>',
          click: () => {
            openExportDialog();
          },
        },
      ],

      // 上传配置
      upload: {
        url: "/api/files/upload",
        accept: "image/*,video/*,audio/*",
        multiple: true,
        fieldName: "file",
        max: 10 * 1024 * 1024, // 10MB
        async handler(files: File[]) {
          // 自定义上传处理
          const uploadedFiles: string[] = [];

          for (const file of files) {
            try {
              const sessionRes = await filesApi.createUploadSession();
              const uploadId = (sessionRes as any).data.uploadId;
              const response = await filesApi.uploadFile({
                file,
                uploadId,
                parentId: props.folderId,
              });

              if (response && response.data) {
                const fileUrl =
                  response.data.url ||
                  response.data.downloadUrl ||
                  `/api/files/${response.data.id}/download`;
                uploadedFiles.push(fileUrl);
              }
            } catch (error) {
              console.error("文件上传失败:", error);
              ElMessage.error(`文件 ${file.name} 上传失败`);
            }
          }

          if (uploadedFiles.length > 0) {
            return JSON.stringify({
              code: 0,
              msg: "",
              data: {
                errFiles: [],
                succMap: uploadedFiles.reduce(
                  (acc, url, index) => {
                    if (files[index]) {
                      acc[files[index].name] = url;
                    }
                    return acc;
                  },
                  {} as Record<string, string>,
                ),
              },
            });
          }

          return JSON.stringify({
            code: 1,
            msg: "上传失败",
            data: { errFiles: files.map((f: File) => f.name), succMap: {} },
          });
        },
      },

      // 预览配置
      preview: {
        delay: 2000, // 增加预览延迟，从 500ms 提高到 2000ms，减轻实时预览负担
        mode: "both",
        hljs: {
          enable: true,
          lineNumber: true,
          style: "github",
        },
        math: {
          engine: "KaTeX",
        },
        markdown: {
          toc: true,
          autoSpace: true,
          // 内容净化配置：禁用净化以保留自定义 HTML 标签
          // 原因：需要保留引用标记的自定义标签 <span class="citation-tag" data-work-id="...">...</span>
          // Vditor 的 sanitize 配置只支持 boolean 类型，不支持自定义配置对象
          // 由于内容来源于用户自己创建，相对安全，因此禁用净化
          sanitize: false,
        },
        // 在渲染前处理内容，将引用标记转换为 HTML
        transform: (html: string) => {
          return renderCitations(html);
        },
      },

      // 大纲配置
      outline: {
        enable: false, // 禁用内置大纲，使用自定义侧边栏
        position: "left",
      },

      // 计数器
      counter: {
        enable: true,
        type: "markdown",
      },

      // 缓存配置
      cache: {
        enable: false, // 禁用缓存，使用自己的保存逻辑
      },

      // 回调函数
      after: () => {
        clearTimeout(initTimeout); // 成功初始化，清除超时保护
        isLoading.value = false;
        initRetryCount.value = 0; // 重置重试计数器

        // 配置 Lute 选项以保留自定义 HTML 标签
        if (vditorInstance.value && (vditorInstance.value as any).lute) {
          const lute = (vditorInstance.value as any).lute;
          // 禁用 Lute 的 HTML 净化
          if (lute.SetSanitize) {
            lute.SetSanitize(false);
          }
        }

        // 启动内容监听
        startContentWatcher();

        // 生成初始大纲
        nextTick(() => {
          setTimeout(() => {
            generateOutlineItems();
            // 在编辑器初始化后，检查并移除参考文献部分（DOM 级别）
            removeReferencesFromEditor();
          }, 500);
        });

        // 🔧 在编辑器初始化时加载参考文献数据
        // 这样可以确保引用标记能够匹配到参考文献并正确渲染样式
        loadReferences().then(() => {
          // 渲染已有的引用标记（多次尝试确保完全加载）
          setTimeout(() => {
            renderCitationsInEditor();
          }, 300);

          setTimeout(() => {
            renderCitationsInEditor();
          }, 800);

          setTimeout(() => {
            renderCitationsInEditor();
          }, 1500);
        });

        // 使用 MutationObserver 监听编辑区域的变化，保护引用标签
        setTimeout(() => {
          const contentArea = vditorContainer.value?.querySelector(
            '.vditor-wysiwyg__block, .vditor-ir__preview, [contenteditable="true"]',
          );

          if (contentArea) {
            // 保存引用标签的映射，用于恢复
            const citationBackup = new Map<Node, string>();

            // 创建 MutationObserver 来监听 DOM 变化
            const observer = new MutationObserver((mutations) => {
              let needsProtection = false;

              mutations.forEach((mutation) => {
                // 在节点被移除前，先备份其 markdown 标记
                mutation.removedNodes.forEach((node) => {
                  if (node.nodeType === Node.ELEMENT_NODE) {
                    const element = node as HTMLElement;
                    if (element.classList?.contains("citation-tag")) {
                      const markdownMarkup = element.getAttribute(
                        "data-citation-markup",
                      );
                      if (markdownMarkup) {
                        // 保存到备份映射
                        citationBackup.set(node, markdownMarkup);
                        needsProtection = true;
                      }
                    }
                  }
                });
              });

              // 延迟处理，让 Vditor 先完成其操作
              if (needsProtection) {
                // 使用 setTimeout 确保在 Vditor 处理完成后执行
                setTimeout(() => {
                  // 扫描整个编辑区域，查找丢失的引用标签
                  const allCitations =
                    contentArea.querySelectorAll(".citation-tag");
                  const existingMarkups = new Set<string>();

                  // 收集当前存在的所有引用标记
                  allCitations.forEach((citation) => {
                    const markup = citation.getAttribute(
                      "data-citation-markup",
                    );
                    if (markup) {
                      existingMarkups.add(markup);
                    }
                  });

                  // 检查哪些引用标记丢失了
                  const lostMarkups: string[] = [];
                  citationBackup.forEach((markup) => {
                    if (!existingMarkups.has(markup)) {
                      lostMarkups.push(markup);
                    }
                  });

                  if (lostMarkups.length > 0) {
                    // 通过 Vditor API 获取当前内容
                    if (vditorInstance.value) {
                      const currentContent = vditorInstance.value.getValue();
                      let hasModified = false;

                      // 对于每个丢失的标记，检查内容中是否缺失
                      lostMarkups.forEach((markup) => {
                        if (!currentContent.includes(markup)) {
                          // 尝试在合适的位置插入（这里简单追加，实际可能需要更智能的位置检测）
                          // 暂时不自动插入，而是触发重新渲染
                          hasModified = true;
                        }
                      });

                      if (hasModified) {
                        // 触发防抖重新渲染
                        debouncedRerenderCitations();
                      }
                    }
                  }

                  // 清空备份
                  citationBackup.clear();
                }, 100);
              }

              // 始终触发防抖重新渲染，以便在编辑停止后恢复标签
              if (needsProtection) {
                debouncedRerenderCitations();
              }
            });

            // 开始观察
            observer.observe(contentArea, {
              childList: true,
              subtree: true,
              characterData: false, // 不监听文本变化，只监听节点变化
            });

            // 保存 observer 引用以便后续清理
            (vditorContainer.value as any)._citationObserver = observer;
          }
        }, 1000);

        // 添加粘贴事件监听，使用捕获模式确保在 Vditor 之前拦截
        // 直接绑定到容器元素，使用捕获模式（第三个参数为 true）
        if (vditorContainer.value) {
          vditorContainer.value.addEventListener("paste", handlePaste, true);
        }

        // 同时也绑定到可编辑区域作为备份
        setTimeout(() => {
          const editableElement = vditorContainer.value?.querySelector(
            "[contenteditable='true']",
          );
          if (editableElement) {
            editableElement.addEventListener("paste", handlePaste, true);
          }
        }, 500);

        // 添加拖拽事件监听器，使用捕获模式确保在 Vditor 之前拦截
        if (vditorContainer.value) {
          vditorContainer.value.addEventListener(
            "dragstart",
            handleEditorDragStart,
            true,
          );
          vditorContainer.value.addEventListener(
            "dragover",
            handleEditorDragOver,
            true, // 使用捕获模式
          );
          vditorContainer.value.addEventListener(
            "drop",
            handleEditorDrop,
            true,
          ); // 使用捕获模式
        }

        // 同时也绑定到可编辑区域
        setTimeout(() => {
          const editableElement = vditorContainer.value?.querySelector(
            "[contenteditable='true']",
          );
          if (editableElement) {
            // 禁用编辑区域的原生拖拽，防止文本选择被误判为拖拽操作
            (editableElement as HTMLElement).setAttribute("draggable", "false");
            (editableElement as HTMLElement).style.webkitUserDrag = "none";

            editableElement.addEventListener(
              "dragstart",
              handleEditorDragStart,
              true,
            );
            editableElement.addEventListener(
              "dragover",
              handleEditorDragOver,
              true, // 使用捕获模式
            );
            editableElement.addEventListener("drop", handleEditorDrop, true); // 使用捕获模式
          }
        }, 500);
      },

      input: (value: string) => {
        handleContentChange(value);

        // 触发防抖重新渲染：用户停止编辑 3 秒后重新渲染引用标签
        debouncedRerenderCitations();
      },

      blur: () => {
        handleEditorBlur();
      },
    });
  } catch (error) {
    console.error("初始化 Vditor 编辑器失败:", error);
    ElMessage.error(`编辑器初始化失败: ${(error as Error).message}`);
    isLoading.value = false;
  }
};

// 从编辑器的 DOM 中移除参考文献部分
const removeReferencesFromEditor = () => {
  if (!vditorContainer.value || !vditorInstance.value) return;

  try {
    // 查找编辑器内容区域（WYSIWYG 模式）
    let contentArea = vditorContainer.value.querySelector(
      ".vditor-wysiwyg",
    ) as HTMLElement;

    // 如果找不到，尝试其他选择器
    if (!contentArea) {
      contentArea = vditorContainer.value.querySelector(
        ".vditor-ir__preview",
      ) as HTMLElement;
    }

    if (!contentArea) {
      contentArea = vditorContainer.value.querySelector(
        '[contenteditable="true"]',
      ) as HTMLElement;
    }

    if (!contentArea) {
      console.warn("未找到编辑器内容区域");
      return;
    }

    // 查找所有标题元素
    const headings = contentArea.querySelectorAll("h1, h2, h3, h4, h5, h6");

    for (const heading of Array.from(headings)) {
      const headingText = heading.textContent?.trim() || "";

      // 检查是否是参考文献标题（支持多种格式）
      const isReferenceHeading =
        headingText === "参考文献" ||
        headingText === "References" ||
        headingText.toLowerCase() === "references" ||
        headingText.toLowerCase().includes("参考文献") ||
        headingText.toLowerCase().includes("references") ||
        heading.id?.includes("参考文献") ||
        heading.id?.includes("References");

      if (isReferenceHeading) {
        // 找到该标题的父容器（可能是 .vditor-wysiwyg__block）
        let blockElement: HTMLElement | null = heading.parentElement;

        // 向上查找，找到包含该标题的块级元素
        while (blockElement && blockElement !== contentArea) {
          if (
            blockElement.classList?.contains("vditor-wysiwyg__block") ||
            blockElement.classList?.contains("vditor-ir__node")
          ) {
            break;
          }
          blockElement = blockElement.parentElement;
        }

        // 如果找到了块级元素，从该块开始移除
        if (blockElement) {
          // 找到该块后面的所有兄弟块
          let currentNode: Element | null = blockElement.nextElementSibling;
          const blocksToRemove: Element[] = [blockElement];

          // 收集需要移除的块（直到下一个同级或更高级的标题块）
          while (currentNode) {
            const nextNode = currentNode.nextElementSibling;

            // 检查是否是标题块
            const headingInBlock = currentNode.querySelector(
              "h1, h2, h3, h4, h5, h6",
            );
            if (headingInBlock) {
              const currentHeadingLevel = parseInt(heading.tagName.charAt(1));
              const nextHeadingLevel = parseInt(
                headingInBlock.tagName.charAt(1),
              );
              // 如果下一个标题级别小于等于当前参考文献标题级别，停止
              if (nextHeadingLevel <= currentHeadingLevel) {
                break;
              }
            }

            blocksToRemove.push(currentNode);
            currentNode = nextNode;
          }

          // 移除所有收集到的块
          blocksToRemove.forEach((block) => {
            block.remove();
          });
        } else {
          // 如果找不到块级元素，使用原来的方法（节点级移除）
          let currentNode: Node | null = heading.nextSibling;
          const nodesToRemove: Node[] = [heading];

          while (currentNode) {
            const nextNode = currentNode.nextSibling;

            if (
              currentNode.nodeType === Node.ELEMENT_NODE &&
              ["H1", "H2", "H3", "H4", "H5", "H6"].includes(
                (currentNode as Element).tagName,
              )
            ) {
              const currentHeadingLevel = parseInt(heading.tagName.charAt(1));
              const nextHeadingLevel = parseInt(
                (currentNode as Element).tagName.charAt(1),
              );
              if (nextHeadingLevel <= currentHeadingLevel) {
                break;
              }
            }

            nodesToRemove.push(currentNode);
            currentNode = nextNode;
          }

          nodesToRemove.forEach((node) => {
            node.parentNode?.removeChild(node);
          });
        }

        // 更新编辑器内容
        setTimeout(() => {
          if (vditorInstance.value) {
            const currentValue = vditorInstance.value.getValue();
            // 再次检查 Markdown 内容，确保移除
            const cleanedValue = removeReferencesSection(currentValue);
            if (cleanedValue !== currentValue) {
              vditorInstance.value.setValue(cleanedValue);
            }
            handleContentChange(cleanedValue);
          }
        }, 100);

        break; // 只移除第一个找到的参考文献部分
      }
    }
  } catch (error) {
    console.error("移除参考文献部分失败:", error);
  }
};

// 移除文档中的参考文献部分
const removeReferencesSection = (content: string): string => {
  if (!content) return content;

  // 匹配参考文献部分的正则表达式
  // 匹配 "## 参考文献"、"# 参考文献"、"## References"、"# References" 等标题
  // 以及后面的所有内容
  // 支持多种格式：
  // 1. Markdown 格式：## 参考文献、# 参考文献、### 参考文献
  // 2. 可能没有换行符的情况：直接以标题开头
  // 3. 支持中英文混合
  const referencePatterns = [
    /\n##\s*参考文献[\s\S]*$/i,
    /\n#\s*参考文献[\s\S]*$/i,
    /\n###\s*参考文献[\s\S]*$/i,
    /\n####\s*参考文献[\s\S]*$/i,
    /\n#####\s*参考文献[\s\S]*$/i,
    /\n######\s*参考文献[\s\S]*$/i,
    /\n##\s*References[\s\S]*$/i,
    /\n#\s*References[\s\S]*$/i,
    /\n###\s*References[\s\S]*$/i,
    /\n####\s*References[\s\S]*$/i,
    /\n#####\s*References[\s\S]*$/i,
    /\n######\s*References[\s\S]*$/i,
    // 匹配可能没有换行符的情况（文档开头就是参考文献）
    /^##\s*参考文献[\s\S]*$/i,
    /^#\s*参考文献[\s\S]*$/i,
    /^###\s*参考文献[\s\S]*$/i,
    /^##\s*References[\s\S]*$/i,
    /^#\s*References[\s\S]*$/i,
    /^###\s*References[\s\S]*$/i,
    // 匹配 "参考文献" 或 "References" 作为独立行（前后可能有空格）
    /\n\s*参考文献\s*[\n\r][\s\S]*$/i,
    /\n\s*References\s*[\n\r][\s\S]*$/i,
  ];

  let processedContent = content;

  for (const pattern of referencePatterns) {
    if (pattern.test(processedContent)) {
      processedContent = processedContent.replace(pattern, "");
      break;
    }
  }

  // 移除末尾多余的空行
  return processedContent.trim();
};

// Load file content
const loadFileContent = async (): Promise<string> => {
  try {
    const fileId = props.fileId;

    // 获取文件元信息以确定存储类型（非 chatAnswer 时）
    if (!props.isChatAnswer) {
      try {
        const metaRes = await filesApi.getFileMeta(fileId);
        if (metaRes?.data?.storageType) {
          fileStorageType.value = metaRes.data.storageType;
        }
      } catch (e) {
        console.warn("获取文件元信息失败，默认使用 LOCAL:", e);
      }
    }

    // 1. 尝试从持久化缓存读取
    try {
      const cached = await fileCache.getFile(fileId);
      if (cached) {
        // 如果缓存中是字符串，直接返回
        if (typeof cached.content === "string") {
          console.log("Markdown 命中持久化缓存:", fileId);
          // TOS 文件启动定时同步
          if (isTosFile.value) {
            startTosSyncTimer();
          }
          return cached.content;
        }
        // 如果缓存中是 Blob（来自 Codex），转换为字符串
        if (cached.content instanceof Blob) {
          const content = await cached.content.text();
          console.log("Markdown 从 Blob 缓存转换:", fileId);
          // TOS 文件启动定时同步
          if (isTosFile.value) {
            startTosSyncTimer();
          }
          return content;
        }
      }
    } catch (e) {
      console.warn("读取 Markdown 持久化缓存失败:", e);
    }

    // 统一使用文件下载 API
    {
      // 普通文件使用文件下载 API（返回 Blob）
      const response = await filesApi.downloadFile(props.fileId);

      // 处理 Blob 响应
      let blob: Blob | null = null;

      // 如果响应被包装了，提取 Blob
      if (response instanceof Blob) {
        blob = response;
      } else if (response && typeof response === "object") {
        const anyResponse = response as any;
        if (anyResponse.data instanceof Blob) {
          blob = anyResponse.data;
        } else if (
          anyResponse.data?.code === 200 &&
          anyResponse.data?.data instanceof Blob
        ) {
          blob = anyResponse.data.data;
        }
      }

      // 确保是 Blob 对象
      if (blob instanceof Blob) {
        let content = await blob.text();

        // 移除参考文献部分
        const originalContent = content;
        content = removeReferencesSection(content);

        // 如果内容被修改了，更新文件（可选，根据需求决定是否自动保存）
        if (content !== originalContent) {
          // console.log("📝 参考文献部分已被移除");
        }

        // 3. 写入持久化缓存
        await fileCache.setFile({
          fileId,
          content,
          type: "markdown",
          fileName: props.fileName,
        });

        // TOS 文件启动定时同步
        if (isTosFile.value) {
          startTosSyncTimer();
        }

        return content;
      } else {
        console.error("❌ 响应不是 Blob 对象:", response);
        throw new Error(`响应不是有效的Blob对象，实际类型: ${typeof response}`);
      }
    }

    return "";
  } catch (error: any) {
    console.error("❌ 加载文件内容失败:", error);
    ElMessage.error(`加载文件内容失败: ${error.message || "未知错误"}`);
    return "";
  }
};

// 将编辑器中的 span 标签转换回 Markdown 标记
const convertSpanToMarkdown = (content: string): string => {
  if (!vditorContainer.value) return content;

  // 查找所有引用标签
  const contentArea = vditorContainer.value.querySelector(
    '.vditor-wysiwyg__block, .vditor-ir__preview, [contenteditable="true"]',
  );

  if (!contentArea) return content;

  const citationSpans = contentArea.querySelectorAll(
    ".citation-tag[data-citation-markup]",
  );

  // 如果没有引用标签，直接返回原内容
  if (citationSpans.length === 0) return content;

  let convertedContent = content;

  citationSpans.forEach((span) => {
    const markup = span.getAttribute("data-citation-markup");
    const spanText = span.textContent || "";

    if (markup && spanText && markup !== spanText) {
      // 只有在内容不一致时才进行替换，减少不必要的字符串操作
      convertedContent = convertedContent.replace(spanText, markup);
    }
  });

  return convertedContent;
};

// 上一次处理的内容，用于去重
let lastProcessedContent = "";
let isProcessingContentChange = false;

// Handle content change
const handleContentChange = (text: string) => {
  // 如果组件正在销毁，不处理内容变化
  if (isDestroying.value) {
    return;
  }

  // 如果正在导出，忽略内容变化事件，避免循环触发
  if (isExporting.value) {
    return;
  }

  // 防止重入：如果正在处理内容变化，直接返回
  if (isProcessingContentChange) {
    return;
  }

  // 去重：如果内容和上次一样，直接返回
  if (text === lastProcessedContent) {
    return;
  }

  isProcessingContentChange = true;
  lastProcessedContent = text;

  try {
    // 将 span 标签转换回 markdown 标记后再保存
    const convertedText = convertSpanToMarkdown(text);

    currentContent.value = convertedText;
    hasUserEdited.value = true;
    hasChanges.value = convertedText !== originalContent.value;
    hasUnsavedChanges.value = convertedText !== lastSavedContent.value;

    // 延迟更新大纲
    debouncedUpdateOutline();

    // 触发内容变化事件（不调用getHTML避免触发循环）
    emit("content-change", {
      text: convertedText,
      html: "", // 不获取HTML，避免触发编辑器事件
      hasChanges: hasChanges.value,
    });

    // 用户停止编辑后自动保存（防抖）
    debouncedAutoSave();
  } finally {
    isProcessingContentChange = false;
  }
};

// Handle editor blur - 失焦时立即保存（作为备份机制）
const handleEditorBlur = () => {
  // 清除防抖定时器，立即保存
  if (autoSaveTimer.value) {
    clearTimeout(autoSaveTimer.value);
  }

  if (hasUserEdited.value && hasUnsavedChanges.value && !isSaving.value) {
    autoSaveDocument();
  }
};

// 上次检查的内容，用于startContentWatcher去重
let lastWatcherContent = "";

// Start content watcher
const startContentWatcher = () => {
  // 清除之前的监听器
  if (contentWatcherInterval.value) {
    clearInterval(contentWatcherInterval.value);
  }

  contentWatcherInterval.value = window.setInterval(() => {
    // 如果组件正在销毁，清除定时器并返回
    if (isDestroying.value) {
      if (contentWatcherInterval.value) {
        clearInterval(contentWatcherInterval.value);
        contentWatcherInterval.value = undefined;
      }
      return;
    }

    if (!vditorInstance.value || isExporting.value) {
      return;
    }

    try {
      const currentValue = vditorInstance.value.getValue();

      // 去重：与上次检查的内容和currentContent都比较
      if (
        currentValue === lastWatcherContent ||
        currentValue === currentContent.value
      ) {
        return;
      }

      lastWatcherContent = currentValue;

      if (currentValue !== currentContent.value) {
        handleContentChange(currentValue);
      }
    } catch (error) {
      console.error("获取编辑器内容失败:", error);
    }
  }, 10000); // 进一步降低备份监听频率，从 2s 提高到 10s，主要依靠 input 回调
};

// Auto-save document
const autoSaveDocument = async (forceRemoteSave = false) => {
  // 如果组件正在销毁，不执行自动保存
  if (isDestroying.value) {
    return;
  }

  // 检查 fileId 是否有效
  if (!props.fileId || props.fileId === undefined || props.fileId === null) {
    console.warn("文件ID无效，跳过自动保存");
    return;
  }

  // forceRemoteSave 模式只需检查 hasPendingTosSync，不依赖 hasUnsavedChanges
  if (forceRemoteSave) {
    if (!hasPendingTosSync.value || isSaving.value) return;
  } else {
    if (!hasUnsavedChanges.value || isSaving.value) return;
  }

  // 参考Vite项目：如果智能体文件已保存到知识库，跳过自动保存
  if (props.isChatAnswer && isSavedToKnowledge.value) {
    return;
  }

  try {
    isSaving.value = true;

    let response;

    if (props.isChatAnswer) {
      // 智能体回答文件使用草稿更新 API
      response = await apiUpdateDraft(props.fileId, {
        content: currentContent.value,
        title: props.fileName.replace(/\.md$/, ""),
      });
    } else if (isTosFile.value && !forceRemoteSave) {
      // TOS 文件：自动保存只写 IndexedDB 缓存，不上传远端
      await fileCache.setFile({
        fileId: props.fileId,
        content: currentContent.value,
        type: "markdown",
        fileName: props.fileName,
      });

      lastSavedContent.value = currentContent.value;
      hasUnsavedChanges.value = false;
      originalContent.value = currentContent.value;
      hasChanges.value = false;
      hasPendingTosSync.value = true;

      emit("file-saved", {
        fileId: props.fileId,
        fileName: props.fileName,
        content: currentContent.value,
        isAutoSave: true,
      });

      triggerNewbieTask("doc_generate_edit");
      console.log("💾 TOS 文件已保存到本地缓存，等待定时同步");
      return;
    } else {
      // 普通文件或 TOS 强制远端保存
      response = await filesApi.saveFileContent(props.fileId, {
        content: currentContent.value,
        fileName: props.fileName,
      }, fileStorageType.value);
    }

    // 检查保存是否成功
    const anyResponse = response as any;
    const isSuccess = props.isChatAnswer
      ? response &&
        (anyResponse.status === 200 ||
          anyResponse.code === 200 ||
          anyResponse.data)
      : response && (anyResponse.code === 200 || anyResponse.status === 200);

    if (isSuccess) {
      lastSavedContent.value = currentContent.value;
      hasUnsavedChanges.value = false;
      originalContent.value = currentContent.value;
      hasChanges.value = false;
      hasPendingTosSync.value = false; // 已同步到远端

      // TOS 文件同步成功后更新 IndexedDB 缓存
      if (isTosFile.value) {
        await fileCache.setFile({
          fileId: props.fileId,
          content: currentContent.value,
          type: "markdown",
          fileName: props.fileName,
        });
      }

      // 触发保存成功事件
      emit("file-saved", {
        fileId: props.fileId,
        fileName: props.fileName,
        content: currentContent.value,
        isAutoSave: true,
      });

      // 触发新手任务：编辑/生成文档
      triggerNewbieTask("doc_generate_edit");
    } else {
      const errorMsg = props.isChatAnswer
        ? (response as any)?.message ||
          (response as any)?.data?.message ||
          "草稿更新失败"
        : (response as any)?.message || "文件保存失败";
      throw new Error(errorMsg);
    }
  } catch (error: any) {
    console.error("自动保存失败:", error);

    // 检查是否是文件不存在的错误
    const statusCode =
      error?.response?.status || error?.status || error?.statusCode;
    const errorMessage =
      error?.response?.data?.message ||
      error?.message ||
      error?.response?.data?.error ||
      "";

    // 更精确地判断文件是否被删除：
    // 1. 404 状态码（文件不存在）
    // 2. 500 状态码 + 错误消息包含"不存在"、"无权访问"、"已删除"等关键词
    // 3. 错误消息明确表示文件不存在或无权访问
    const isFileNotFound =
      statusCode === 404 ||
      (statusCode === 500 &&
        (errorMessage.includes("不存在") ||
          errorMessage.includes("无权访问") ||
          errorMessage.includes("已删除") ||
          errorMessage.includes("not found") ||
          errorMessage.includes("no permission") ||
          errorMessage.includes("deleted"))) ||
      errorMessage.includes("草稿文件不存在") ||
      errorMessage.includes("无权访问");

    // 如果是文件不存在的错误，说明文件已被删除，停止后续的自动保存
    if (isFileNotFound) {
      console.warn("文件已被删除，停止自动保存:", props.fileId);

      // 设置销毁标志，停止所有操作
      isDestroying.value = true;

      // 清除所有定时器
      if (autoSaveTimer.value) {
        clearTimeout(autoSaveTimer.value);
        autoSaveTimer.value = undefined;
      }
      if (contentWatcherInterval.value) {
        clearInterval(contentWatcherInterval.value);
        contentWatcherInterval.value = undefined;
      }
      if (outlineUpdateTimer.value) {
        clearTimeout(outlineUpdateTimer.value);
        outlineUpdateTimer.value = undefined;
      }
      if (citationRerenderTimer.value) {
        clearTimeout(citationRerenderTimer.value);
        citationRerenderTimer.value = undefined;
      }

      // 不显示错误提示，因为文件已被删除是正常情况
      return;
    }

    // 其他错误才显示提示
    const errorPrefix = props.isChatAnswer
      ? "草稿自动保存失败"
      : "文件自动保存失败";
    ElMessage.error(`${errorPrefix}: ${(error as Error).message}`);
  } finally {
    isSaving.value = false;
  }
};

// Generate outline items
const generateOutlineItems = () => {
  if (!vditorInstance.value || !vditorContainer.value) {
    outlineItems.value = [];
    emit("outline-change", []);
    return;
  }

  try {
    // 根据不同模式查找内容容器
    // wysiwyg 模式: .vditor-wysiwyg
    // IR 模式: .vditor-ir
    // 预览模式: .vditor-preview
    let contentContainer =
      vditorContainer.value.querySelector(".vditor-wysiwyg") ||
      vditorContainer.value.querySelector(".vditor-ir") ||
      vditorContainer.value.querySelector(".vditor-content") ||
      vditorContainer.value.querySelector(".vditor-preview");

    if (!contentContainer) {
      console.warn("未找到 Vditor 内容容器，尝试从整个容器中查找");
      contentContainer = vditorContainer.value;
    }

    const headingElements = contentContainer.querySelectorAll(
      "h1, h2, h3, h4, h5, h6",
    );

    if (headingElements.length === 0) {
      outlineItems.value = [];
      emit("outline-change", []);
      return;
    }

    // 生成大纲项数组
    const newItems = Array.from(headingElements).map((element, index) => {
      const level = parseInt(element.tagName.charAt(1));
      const text = element.textContent?.trim() || "";
      let id = element.id;

      // 如果元素没有 ID，且其内容不为空，为其生成一个
      if (!id && text) {
        id = `outline-heading-${index}`;
        element.id = id;
      }

      return {
        level,
        text,
        id,
        element: element as HTMLElement,
      };
    });

    // 检查大纲是否有实际变化，减少不必要的事件触发
    const isSame =
      newItems.length === outlineItems.value.length &&
      newItems.every(
        (item, i) =>
          item.text === outlineItems.value[i].text &&
          item.level === outlineItems.value[i].level &&
          item.id === outlineItems.value[i].id,
      );

    if (isSame) return;

    outlineItems.value = newItems;
    // 发出大纲变化事件
    emit("outline-change", outlineItems.value);
  } catch (error) {
    console.error("生成大纲失败:", error);
    outlineItems.value = [];
    emit("outline-change", []);
  }
};

// Debounced update outline
const debouncedUpdateOutline = () => {
  if (outlineUpdateTimer.value) {
    clearTimeout(outlineUpdateTimer.value);
  }
  outlineUpdateTimer.value = window.setTimeout(() => {
    generateOutlineItems();
  }, 2000);
};

// TOS 定时同步：每 60 秒检查是否有待同步的修改
const syncToTos = async () => {
  if (!hasPendingTosSync.value || isSaving.value) return;
  console.log("🔄 TOS 定时同步触发");
  await autoSaveDocument(true);
};

const startTosSyncTimer = () => {
  stopTosSyncTimer();
  tosSyncTimer.value = window.setInterval(() => {
    syncToTos();
  }, TOS_SYNC_INTERVAL);
};

const stopTosSyncTimer = () => {
  if (tosSyncTimer.value) {
    clearInterval(tosSyncTimer.value);
    tosSyncTimer.value = null;
  }
};

// Debounced auto save - 用户停止编辑后自动保存
const debouncedAutoSave = () => {
  // 如果组件正在销毁，不设置新的定时器
  if (isDestroying.value) {
    return;
  }

  // 清除之前的定时器
  if (autoSaveTimer.value) {
    clearTimeout(autoSaveTimer.value);
  }

  // 设置新的定时器：用户停止编辑 15 秒后自动保存 (从 3s 增加到 15s 以解决编辑器卡顿)
  autoSaveTimer.value = window.setTimeout(() => {
    // 再次检查组件是否正在销毁
    if (isDestroying.value) {
      return;
    }
    if (hasUserEdited.value && hasUnsavedChanges.value && !isSaving.value) {
      autoSaveDocument();
    }
  }, 15000); // 15秒防抖时间
};

// Public methods (exposed via defineExpose)
const getContent = () => {
  return {
    markdown: vditorInstance.value
      ? vditorInstance.value.getValue()
      : currentContent.value,
    html: vditorInstance.value ? vditorInstance.value.getHTML() : "",
  };
};

const setContent = (content: string) => {
  if (vditorInstance.value) {
    vditorInstance.value.setValue(content);
    currentContent.value = content;
    hasChanges.value = content !== originalContent.value;

    // 渲染内容中的引用标记
    setTimeout(() => {
      renderCitationsInEditor();
    }, 300);
  }
};

const insertContent = (content: string) => {
  if (vditorInstance.value) {
    vditorInstance.value.insertValue(content);
  }
};

const scrollToHeading = (headingId: string) => {
  try {
    const element = document.getElementById(headingId);
    if (element) {
      element.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    }
  } catch (error) {
    console.error("滚动失败:", error);
  }
};

// 标记文件已保存到知识库（参考Vite项目实现）
const markAsSavedToKnowledge = () => {
  isSavedToKnowledge.value = true;
  hasUnsavedChanges.value = false; // 清除未保存状态
};

// Expose methods
defineExpose({
  getContent,
  setContent,
  insertContent,
  scrollToHeading,
  markAsSavedToKnowledge,
  autoSaveDocument,
});
</script>

<style scoped lang="scss">
.vditor-markdown-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--color-bg, #fff);
}

.vditor-wrapper {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.editor-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #fff);
  z-index: 10;

  .loading-icon {
    font-size: 32px;
    color: var(--color-primary, #1890ff);
    margin-bottom: 16px;
  }

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

.vditor-container {
  width: 100%;
  height: 100%;

  :deep(.vditor) {
    border: none;
    overflow: visible !important;
  }

  // 禁止编辑区域的原生文本拖拽，防止从右到左选择时被浏览器误判为拖拽操作
  :deep(.vditor-wysiwyg [contenteditable="true"]),
  :deep(.vditor-ir [contenteditable="true"]) {
    -webkit-user-drag: none;
    user-drag: none;
  }

  // Vditor 内部所有滚动条样式统一为 6px
  :deep(.vditor-wysiwyg),
  :deep(.vditor-ir),
  :deep(.vditor-preview),
  :deep(.vditor-content),
  :deep(.vditor-reset),
  :deep(.vditor-panel),
  :deep(.vditor) * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--color-border, #e0e0e0) transparent !important;

    &::-webkit-scrollbar {
      width: 6px !important;
      height: 6px !important;
    }

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

    &::-webkit-scrollbar-thumb {
      background: var(--color-border, #e0e0e0) !important;
      border-radius: 3px !important;

      &:hover {
        background: var(--color-text-secondary, #999) !important;
      }
    }
  }

  // 特别针对代码块、预览区域等的滚动条
  :deep(pre),
  :deep(code),
  :deep(.vditor-reset pre),
  :deep(.vditor-reset code),
  :deep(.hljs),
  :deep(.language-),
  :deep([class*="language-"]),
  :deep(.vditor-ir pre),
  :deep(.vditor-wysiwyg pre),
  :deep(.vditor-preview pre) {
    scrollbar-width: thin !important;
    scrollbar-color: var(--color-border, #e0e0e0) transparent !important;

    &::-webkit-scrollbar {
      width: 6px !important;
      height: 6px !important;
    }

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

    &::-webkit-scrollbar-thumb {
      background: var(--color-border, #e0e0e0) !important;
      border-radius: 3px !important;

      &:hover {
        background: var(--color-text-secondary, #999) !important;
      }
    }
  }

  // Vditor 内置大纲面板的滚动条和边框
  :deep(.vditor-outline) {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  :deep(.vditor-outline),
  :deep(.vditor-outline__content),
  :deep(.vditor-outline ul) {
    scrollbar-width: thin !important;
    scrollbar-color: var(--color-border, #e0e0e0) transparent !important;

    &::-webkit-scrollbar {
      width: 6px !important;
      height: 6px !important;
    }

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

    &::-webkit-scrollbar-thumb {
      background: var(--color-border, #e0e0e0) !important;
      border-radius: 3px !important;

      &:hover {
        background: var(--color-text-secondary, #999) !important;
      }
    }
  }

  :deep(.vditor-toolbar) {
    background: var(--color-card, #f5f5f5);
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    // 允许提示框溢出显示
    overflow: visible !important;

    // 隐藏 Vditor 默认导出按钮
    .vditor-toolbar__item[data-type="export"] {
      display: none !important;
    }

    // 自定义导出按钮样式
    .vditor-toolbar__item[data-type="custom-export"] {
      svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
      }

      &:hover {
        background-color: var(--color-hover, rgba(0, 0, 0, 0.04));
      }
    }
  }

  :deep(.vditor-content) {
    background: var(--color-bg, #fff);
  }

  // 工具栏按钮提示框样式 - 显示在下方
  :deep(.vditor-tooltipped) {
    position: relative;
    // 允许提示框溢出显示
    overflow: visible !important;

    // 移除默认的提示样式
    &::before,
    &::after {
      display: none !important;
    }

    // 只在hover时显示提示框，不在focus或active时显示
    &:hover:not(:active)::after {
      display: table !important;
      position: absolute;
      z-index: 999999;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: normal;
      line-height: normal;
      color: #fff !important;
      text-align: center;
      text-decoration: none;
      word-wrap: normal;
      white-space: nowrap;
      background: rgba(0, 0, 0, 0.9) !important;
      border-radius: 4px;
      content: attr(aria-label);
      // 显示在下方，紧贴按钮
      top: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%);
      // 确保宽高自适应内容
      width: auto;
      height: auto;
      min-height: fit-content;
      max-width: none;
      box-sizing: content-box;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
      // 确保内容完整显示
      overflow: visible;
      // 文本渲染优化
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      vertical-align: middle;
    }

    // 只在hover时显示箭头，不在active时显示
    &:hover:not(:active)::before {
      display: block !important;
      position: absolute;
      z-index: 999999;
      width: 0;
      height: 0;
      pointer-events: none;
      content: "";
      border: 5px solid transparent;
      // 箭头指向上方（提示框在下方），紧贴按钮
      border-bottom-color: rgba(0, 0, 0, 0.9);
      top: calc(100% - 3px);
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

// 深色主题适配
:root[data-theme="dark"] {
  .vditor-container :deep(.vditor) {
    background: var(--color-bg, #1a1a1a);
  }

  .vditor-container :deep(.vditor-toolbar) {
    background: var(--color-card, #2c2c2c);
    border-color: var(--color-border, #404040);

    // 隐藏 Vditor 默认导出按钮
    .vditor-toolbar__item[data-type="export"] {
      display: none !important;
    }

    // 深色主题下的自定义导出按钮样式
    .vditor-toolbar__item[data-type="custom-export"] {
      &:hover {
        background-color: var(--color-hover, rgba(255, 255, 255, 0.05));
      }
    }
  }

  .vditor-container :deep(.vditor-content) {
    background: var(--color-bg, #1a1a1a);
    color: var(--color-text, #fff);
  }

  // 深色主题下的加载状态样式
  .editor-loading {
    background: var(--color-bg, #1a1a1a);

    .loading-icon {
      color: var(--color-primary, #1890ff);
    }

    .loading-text {
      color: var(--color-text-secondary, #aaa);
    }
  }

  // 深色主题下的滚动条样式
  .vditor-container :deep(.vditor-wysiwyg),
  .vditor-container :deep(.vditor-ir),
  .vditor-container :deep(.vditor-preview),
  .vditor-container :deep(.vditor-content),
  .vditor-container :deep(.vditor-reset),
  .vditor-container :deep(.vditor-panel),
  .vditor-container :deep(.vditor) * {
    scrollbar-color: var(--color-border, #404040) transparent !important;

    &::-webkit-scrollbar-thumb {
      background: var(--color-border, #404040) !important;

      &:hover {
        background: var(--color-text-secondary, #666) !important;
      }
    }
  }

  // 深色主题下代码块等的滚动条样式
  .vditor-container :deep(pre),
  .vditor-container :deep(code),
  .vditor-container :deep(.vditor-reset pre),
  .vditor-container :deep(.vditor-reset code),
  .vditor-container :deep(.hljs),
  .vditor-container :deep(.language-),
  .vditor-container :deep([class*="language-"]),
  .vditor-container :deep(.vditor-ir pre),
  .vditor-container :deep(.vditor-wysiwyg pre),
  .vditor-container :deep(.vditor-preview pre) {
    scrollbar-color: var(--color-border, #404040) transparent !important;

    &::-webkit-scrollbar-thumb {
      background: var(--color-border, #404040) !important;

      &:hover {
        background: var(--color-text-secondary, #666) !important;
      }
    }
  }

  // 深色主题下大纲面板的边框和滚动条样式
  .vditor-container :deep(.vditor-outline) {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  .vditor-container :deep(.vditor-outline),
  .vditor-container :deep(.vditor-outline__content),
  .vditor-container :deep(.vditor-outline ul) {
    scrollbar-color: var(--color-border, #404040) transparent !important;

    &::-webkit-scrollbar-thumb {
      background: var(--color-border, #404040) !important;

      &:hover {
        background: var(--color-text-secondary, #666) !important;
      }
    }
  }

  // 深色主题下的提示框样式
  .vditor-container :deep(.vditor-tooltipped) {
    &:hover:not(:active)::after {
      background: rgba(60, 60, 60, 0.95) !important;
      color: #f0f0f0 !important;
    }

    &:hover:not(:active)::before {
      border-bottom-color: rgba(60, 60, 60, 0.95) !important;
    }
  }
}

// 引用标记下拉菜单样式
.citation-menu-wrapper {
  position: fixed;
  z-index: 9999;
}

.citation-menu {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  min-width: 280px;
  max-width: 400px;
  max-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.citation-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #e4e7ed;

  .header-title {
    font-size: 12px;
    color: #909399;
    font-weight: 500;
    white-space: nowrap;
  }

  .header-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 200px;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 4px 8px;
    transition: all 0.2s;

    &:focus-within {
      border-color: #1890ff;
      background-color: #ffffff;
    }

    .search-icon {
      color: #909399;
      font-size: 12px;
      margin-right: 6px;
      flex-shrink: 0;
    }

    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      color: #303133;
      font-size: 12px;
      min-width: 0;

      &::placeholder {
        color: #c0c4cc;
      }
    }
  }
}

.citation-menu-list {
  overflow-y: auto;
  max-height: 340px;

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

  &::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;

    &:hover {
      background: #c0c4cc;
    }
  }
}

.citation-menu-item {
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;

  &:hover {
    background: #f5f7fa;
  }

  &:active {
    background: #e6f7ff;
  }

  .menu-item-note {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    line-height: 1.4;
  }

  .menu-item-meta {
    font-size: 12px;
    color: #909399;
    line-height: 1.2;
  }
}

.citation-menu-empty {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 13px;
}

// 深色主题适配
:root[data-theme="dark"] {
  .citation-menu {
    background: #1e1e1e;
    border-color: #3a3a3a;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
  }

  .citation-menu-header {
    border-bottom-color: #3a3a3a;

    .header-title {
      color: #a0a0a0;
    }

    .header-search {
      background-color: #2a2a2a;
      border-color: #3a3a3a;

      &:focus-within {
        border-color: #1890ff;
        background-color: #1e1e1e;
      }

      .search-icon {
        color: #666;
      }

      .search-input {
        color: #e0e0e0;

        &::placeholder {
          color: #666;
        }
      }
    }
  }

  .citation-menu-list {
    &::-webkit-scrollbar-thumb {
      background: #4a4a4a;

      &:hover {
        background: #5a5a5a;
      }
    }
  }

  .citation-menu-item {
    &:hover {
      background: #2a2a2a;
    }

    &:active {
      background: rgba(24, 144, 255, 0.15);
    }

    .menu-item-note {
      color: #e0e0e0;
    }

    .menu-item-meta {
      color: #808080;
    }
  }

  .citation-menu-empty {
    color: #808080;
  }
}
</style>

<style lang="scss">
// 全局样式：移除 Vditor 的边框（不使用 scoped，确保能够覆盖 Vditor 内部样式）
.vditor-markdown-editor {
  .vditor {
    border: 0 !important;
    border-width: 0 !important;
  }

  .vditor-wysiwyg,
  .vditor-ir,
  .vditor-preview {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  // 隐藏 Vditor 默认导出按钮（全局）
  .vditor-toolbar__item[data-type="export"] {
    display: none !important;
  }
}

// 全局引用标签样式
.citation-tag {
  display: inline-block !important;
  padding: 2px 8px !important;
  background-color: #e6f7ff !important;
  border-radius: 4px !important;
  color: #1890ff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;

  // 隐藏原始的 textContent（markdown 格式）
  font-size: 0 !important;

  // 使用 ::before 伪元素显示友好的文本
  &::before {
    content: attr(data-display-text);
    font-size: 13px;
    color: #1890ff;
    font-weight: 500;
  }

  &:hover {
    background-color: rgba(24, 144, 255, 0.2) !important;
  }
}

// 拖拽预览样式
.reference-drag-preview {
  padding: 6px 12px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid #91d5ff;
  pointer-events: none;
}

// Vditor 编辑器内的引用标签样式
.vditor-wysiwyg .citation-tag,
.vditor-ir .citation-tag,
.vditor-preview .citation-tag,
.vditor-content .citation-tag,
.vditor .citation-tag,
.vditor-reset .citation-tag {
  display: inline-block !important;
  padding: 2px 8px !important;
  background-color: #e6f7ff !important;
  border-radius: 4px !important;
  color: #1890ff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;

  // 隐藏原始的 textContent（markdown 格式）
  font-size: 0 !important;

  // 使用 ::before 伪元素显示友好的文本
  &::before {
    content: attr(data-display-text);
    font-size: 13px;
    color: #1890ff;
    font-weight: 500;
  }

  &:hover {
    background-color: rgba(24, 144, 255, 0.2) !important;
  }
}

// 引用标签样式 - 应用到 Vditor 所有编辑和预览区域
.vditor-markdown-editor {
  // 在编辑器容器级别定义样式
  :deep(.vditor-wysiwyg .citation-tag),
  :deep(.vditor-ir .citation-tag),
  :deep(.vditor-preview .citation-tag),
  :deep(.vditor-content .citation-tag),
  :deep(.citation-tag) {
    display: inline-block;
    padding: 2px 8px;
    background-color: #e6f7ff !important;
    border-radius: 4px;
    color: #1890ff !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;

    // 隐藏原始的 textContent（markdown 格式）
    font-size: 0 !important;

    // 使用 ::before 伪元素显示友好的文本
    &::before {
      content: attr(data-display-text);
      font-size: 13px;
      color: #1890ff;
      font-weight: 500;
    }

    &:hover {
      background-color: rgba(24, 144, 255, 0.2) !important;
    }
  }
}

// 可拖拽分割条样式
.resize-handle {
  height: 4px;
  background: transparent;
  cursor: ns-resize;
  position: relative;
  z-index: 10;
  transition: background-color 0.15s ease;
  flex-shrink: 0;

  &::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: 0;
    right: 0;
    background: transparent;
  }
}

.resize-handle:hover {
  background: var(--resize-bar-color, #1890ff);
}

.resize-handle:active {
  background: var(--resize-bar-color, #1890ff);
}

// 参考文献管理区域样式
.reference-section {
  background-color: var(--color-card, #f5f5f5);
  border-top: 1px solid var(--color-border, #e0e0e0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 300px;

  .reference-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;

    .toolbar-left {
      display: flex;
      gap: 8px;

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

        &:hover {
          background-color: rgba(0, 0, 0, 0.05);
        }

        &:active {
          transform: scale(0.95);
        }

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

    .search-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 30%; // 固定宽度为30%
      background-color: var(--color-bg, #fff);
      border: 1px solid var(--color-border, #e0e0e0);
      border-radius: 6px;
      padding: 5px 12px;
      transition: border-color 0.2s;
      margin-left: 12px; // 与左侧按钮保持间距

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

      .search-icon {
        color: var(--color-text-secondary, #999);
        margin-right: 8px;
        font-size: 14px;
      }

      .search-input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        color: var(--color-text, #333);
        font-size: 14px;

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

  .reference-table-container {
    flex: 1;
    overflow: auto;
    border-top: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    background-color: var(--color-bg, #fff);

    // 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #e0e0e0) transparent;

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

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

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

      &:hover {
        background: var(--color-text-secondary, #999);
      }
    }

    // 加载状态样式
    .reference-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;

      .loading-icon {
        font-size: 24px;
        color: var(--color-primary, #1890ff);
        margin-bottom: 12px;
      }

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

    // 空状态样式
    .reference-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;

      .empty-icon {
        font-size: 48px;
        color: var(--color-border, #e0e0e0);
        margin-bottom: 16px;
      }

      .empty-text {
        font-size: 14px;
        color: var(--color-text-secondary, #999);
        margin-bottom: 8px;
      }

      .empty-hint {
        font-size: 12px;
        color: var(--color-text-tertiary, #bbb);
        font-style: italic;
      }
    }

    .reference-table {
      width: 100%;
      min-width: 800px; // 设置最小宽度，确保表格不会过于压缩
      border-collapse: collapse;
      font-size: 13px;
      table-layout: fixed; // 固定表格布局

      thead {
        background-color: var(--color-card, #f5f5f5);
        position: sticky;
        top: 0;
        z-index: 1;

        th {
          padding: 12px 8px;
          text-align: left;
          font-weight: 600;
          color: var(--color-text, #333);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            width: 60px; // 序列号
          }

          &:nth-child(2) {
            width: auto; // 名称 - 自动宽度，占据剩余空间
            min-width: 200px;
          }

          &:nth-child(3) {
            width: 140px; // 别名
          }

          &:nth-child(4) {
            width: 150px; // 作者
          }

          &:nth-child(5) {
            width: 80px; // 年限
          }

          &:last-child {
            width: 80px; // 详情
          }
        }
      }

      tbody {
        tr {
          transition: background-color 0.2s;
          height: 42px; // 固定行高
          cursor: move; // 显示可拖拽光标

          &:hover {
            background-color: var(--color-hover, rgba(0, 0, 0, 0.04));
          }

          &.highlighted {
            background-color: rgba(24, 144, 255, 0.1);
          }

          // 拖拽时的样式
          &:active {
            opacity: 0.7;
            cursor: grabbing;
          }

          td {
            padding: 10px 8px;
            color: var(--color-text, #333);
            vertical-align: middle; // 垂直居中对齐
            overflow: hidden;
            height: 42px; // 固定单元格高度
            box-sizing: border-box;

            &:first-child {
              text-align: left;
              font-weight: 500;
            }

            &:nth-child(2) {
              // 名称列 - 单行显示
              .title-text {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4;
              }
            }

            &:nth-child(3) {
              // 别名列
              padding: 0;

              .alias-display {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 8px;
                height: 42px; // 固定高度
                box-sizing: border-box;

                .alias-text {
                  flex: 1;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  line-height: 1.4;
                }

                .edit-alias-btn {
                  display: none;
                  padding: 4px 6px;
                  background: none;
                  border: none;
                  color: var(--color-text-secondary, #999);
                  cursor: pointer;
                  transition: all 0.2s;
                  border-radius: 4px;
                  flex-shrink: 0;
                  width: 24px;
                  height: 24px;
                  align-items: center;
                  justify-content: center;

                  &:hover {
                    background: var(--color-hover, rgba(0, 0, 0, 0.04));
                    color: var(--color-primary, #1890ff);
                  }

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

              &:hover .alias-display .edit-alias-btn {
                display: flex;
              }

              .alias-edit {
                width: 100%;
                padding: 6px 8px;
                height: 42px; // 固定高度
                box-sizing: border-box;
                display: flex;
                align-items: center;

                .alias-input {
                  width: 100%;
                  padding: 6px 8px;
                  border: 1px solid var(--color-primary, #1890ff);
                  border-radius: 4px;
                  background: var(--color-bg, #fff);
                  color: var(--color-text, #333);
                  font-size: 13px;
                  outline: none;
                  transition: all 0.2s;
                  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
                  height: 30px; // 固定输入框高度
                  box-sizing: border-box;

                  &:focus {
                    border-color: var(--color-primary, #1890ff);
                    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
                  }

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

            &:nth-child(4) {
              // 作者列
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 1.4;
            }

            &.details-cell {
              text-align: center;

              .detail-icons {
                display: flex;
                gap: 4px;
                justify-content: flex-start;
                align-items: center;
                height: 100%;

                i {
                  font-size: 14px;
                  color: var(--color-text-secondary, #999);
                  cursor: pointer;
                  transition: color 0.2s;

                  &:hover {
                    color: var(--color-primary, #1890ff);
                  }

                  &.icon-b {
                    color: #1890ff;
                  }

                  &.icon-a {
                    color: #52c41a;
                  }

                  &.icon-delete {
                    color: #ff4d4f;

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

// 参考文献详情 popover 样式
.reference-detail-popover {
  .reference-detail-content {
    max-height: 500px;
    overflow-y: auto;
    padding: 8px 0;
    font-size: 13px;

    // 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #e0e0e0) transparent;

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

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

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

      &:hover {
        background: var(--color-text-secondary, #999);
      }
    }

    // 加载状态
    .detail-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      gap: 12px;
      color: var(--color-primary, #1890ff);

      i {
        font-size: 24px;
      }

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

    .detail-item {
      display: flex;
      padding: 2px 12px;
      min-height: 32px;
      align-items: flex-start;

      &:last-child {
        border-bottom: none;
      }

      .detail-label {
        flex-shrink: 0;
        width: 120px;
        font-weight: 600;
        color: var(--color-text, #333);
        line-height: 1.6;
      }

      .detail-value {
        flex: 1;
        color: var(--color-text-secondary, #666);
        line-height: 1.6;
        word-break: break-word;

        &.more-authors {
          font-style: italic;
          color: var(--color-text-tertiary, #999);
        }

        .detail-link {
          color: var(--color-primary, #1890ff);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

// 导出对话框样式
.export-dialog-content {
  padding: 20px 0;

  .export-option-section {
    margin-bottom: 28px;

    &:last-child {
      margin-bottom: 0;
    }

    .option-label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text, #333);
      margin-bottom: 12px;
    }

    .option-group {
      display: flex;
      gap: 24px;
    }

    .option-hint {
      margin-top: 8px;
      font-size: 12px;
      color: var(--color-text-secondary, #999);
      font-style: italic;
    }
  }
}

// 导入参考文献对话框样式
.import-dialog-content {
  padding: 12px 0;

  .import-method-section {
    margin-bottom: 24px;

    .section-label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text, #333);
      margin-bottom: 12px;
    }

    .import-method-group {
      display: flex;
      gap: 24px;
    }
  }

  // 搜索区域左右布局
  .import-search-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;

    .section-label-inline {
      flex-shrink: 0;
      width: 80px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text, #333);
    }

    .search-input-wrapper-inline {
      width: 400px; // 固定宽度，不再使用 flex: 1
    }
  }

  // 搜索结果区域
  .search-results-section {
    margin-top: 24px;
    border-top: 1px solid var(--color-border, #e0e0e0);
    padding-top: 16px;

    .results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .results-count {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text, #333);
      }
    }

    .results-list {
      max-height: 400px;
      overflow-y: auto;
      padding-right: 8px;

      // 滚动条样式
      scrollbar-width: thin;
      scrollbar-color: var(--color-border, #e0e0e0) transparent;

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

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

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

        &:hover {
          background: var(--color-text-secondary, #999);
        }
      }

      .result-item {
        padding: 12px;
        background: var(--color-card, #f5f5f5);
        border-radius: 8px;
        margin-bottom: 12px;
        transition: all 0.2s;

        &:last-child {
          margin-bottom: 0;
        }

        &:hover {
          background: var(--color-hover, rgba(0, 0, 0, 0.04));
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .result-content {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .result-info {
          flex: 1;
          min-width: 0;

          .result-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-text, #333);
            margin-bottom: 8px;
            line-height: 1.5;
            word-break: break-word;
          }

          .result-meta {
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 13px;
            color: var(--color-text-secondary, #666);

            .meta-row {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              gap: 8px;
              line-height: 1.6;
            }

            .result-authors {
              color: var(--color-text-secondary, #666);
              font-weight: 500;
            }

            .result-year {
              color: var(--color-text-secondary, #666);
              margin-left: 4px;
            }

            .result-type {
              color: var(--color-primary, #1890ff);
              font-weight: 600;
              font-size: 11px;
              text-transform: uppercase;
            }

            .result-venue {
              color: var(--color-text, #333);
              font-weight: 500;
              font-style: italic;
            }

            .result-journal-abbr {
              color: var(--color-text-secondary, #999);
              font-size: 12px;
            }

            .result-volume,
            .result-issue,
            .result-pages {
              color: var(--color-text-secondary, #666);
              font-size: 12px;
            }

            .result-issn,
            .result-doi {
              color: var(--color-text-secondary, #999);
              font-size: 11px;
              font-family: monospace;
            }
          }
        }

        .result-actions {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 8px;
          padding-top: 8px;
          border-top: 1px solid var(--color-border, #e0e0e0);

          .action-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--color-primary, #1890ff);
            text-decoration: none;
            font-size: 12px;
            transition: all 0.2s;
            padding: 6px 10px;
            border-radius: 4px;
            background: rgba(24, 144, 255, 0.08);

            i {
              font-size: 11px;
            }

            &:hover {
              color: var(--color-primary-hover, #40a9ff);
              background: rgba(24, 144, 255, 0.15);
            }

            &.action-pdf {
              color: #f5222d;
              background: rgba(245, 34, 45, 0.08);

              &:hover {
                color: #ff4d4f;
                background: rgba(245, 34, 45, 0.15);
              }
            }
          }

          .el-button {
            flex-shrink: 0;
          }
        }
      }
    }
  }

  // 空状态样式
  .empty-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;

    .empty-icon {
      font-size: 48px;
      color: var(--color-border, #e0e0e0);
      margin-bottom: 16px;
    }

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

// 深色主题
:root[data-theme="dark"] {
  // 深色主题下的全局引用标签样式
  .citation-tag {
    background-color: rgba(24, 144, 255, 0.15) !important;
    color: #40a9ff !important;

    // 隐藏原始的 textContent（markdown 格式）
    font-size: 0 !important;

    // 使用 ::before 伪元素显示友好的文本
    &::before {
      content: attr(data-display-text);
      font-size: 13px;
      color: #40a9ff;
      font-weight: 500;
    }

    &:hover {
      background-color: rgba(24, 144, 255, 0.25) !important;
    }
  }

  // 深色主题下的拖拽预览样式
  .reference-drag-preview {
    background-color: rgba(24, 144, 255, 0.2);
    color: #40a9ff;
    border-color: rgba(64, 169, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  // 深色主题下 Vditor 编辑器内的引用标签样式
  .vditor-wysiwyg .citation-tag,
  .vditor-ir .citation-tag,
  .vditor-preview .citation-tag,
  .vditor-content .citation-tag,
  .vditor .citation-tag,
  .vditor-reset .citation-tag {
    background-color: rgba(24, 144, 255, 0.15) !important;
    color: #40a9ff !important;

    // 隐藏原始的 textContent（markdown 格式）
    font-size: 0 !important;

    // 使用 ::before 伪元素显示友好的文本
    &::before {
      content: attr(data-display-text);
      font-size: 13px;
      color: #40a9ff;
      font-weight: 500;
    }

    &:hover {
      background-color: rgba(24, 144, 255, 0.25) !important;
    }
  }

  .vditor-markdown-editor {
    .vditor {
      border: 0 !important;
      border-width: 0 !important;
    }

    .vditor-wysiwyg,
    .vditor-ir,
    .vditor-preview {
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }

  // 导出对话框深色主题样式
  .export-dialog-content {
    .export-option-section {
      .option-label {
        color: var(--color-text, #fff);
      }

      .option-hint {
        color: var(--color-text-secondary, #666);
      }
    }
  }

  // 导入对话框深色主题样式
  .import-dialog-content {
    .section-label,
    .section-label-inline {
      color: var(--color-text, #fff);
    }

    .search-results-section {
      border-top-color: var(--color-border, #404040);

      .results-header .results-count {
        color: var(--color-text, #fff);
      }

      .results-list {
        scrollbar-color: var(--color-border, #404040) transparent;

        &::-webkit-scrollbar-thumb {
          background: var(--color-border, #404040);

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

        .result-item {
          background: var(--color-card, #2c2c2c);

          &:hover {
            background: var(--color-hover, rgba(255, 255, 255, 0.05));
          }

          .result-info {
            .result-title {
              color: var(--color-text, #fff);
            }

            .result-meta {
              color: var(--color-text-secondary, #aaa);

              .result-authors {
                color: var(--color-text-secondary, #aaa);
              }

              .result-year {
                color: var(--color-text-secondary, #aaa);
              }

              .result-type {
                color: var(--color-primary, #1890ff);
              }

              .result-venue {
                color: var(--color-text, #fff);
              }

              .result-journal-abbr {
                color: var(--color-text-secondary, #666);
              }

              .result-volume,
              .result-issue,
              .result-pages {
                color: var(--color-text-secondary, #aaa);
              }

              .result-issn,
              .result-doi {
                color: var(--color-text-secondary, #666);
              }
            }
          }

          .result-actions {
            border-top-color: var(--color-border, #404040);

            .action-link {
              color: var(--color-primary, #1890ff);
              background: rgba(24, 144, 255, 0.12);

              &:hover {
                color: var(--color-primary-hover, #40a9ff);
                background: rgba(24, 144, 255, 0.2);
              }

              &.action-pdf {
                color: #ff4d4f;
                background: rgba(245, 34, 45, 0.12);

                &:hover {
                  color: #ff7875;
                  background: rgba(245, 34, 45, 0.2);
                }
              }
            }
          }
        }
      }
    }

    .empty-results {
      .empty-icon {
        color: var(--color-border, #404040);
      }

      .empty-text {
        color: var(--color-text-secondary, #666);
      }
    }
  }

  // 深色主题下的 popover 样式
  .reference-detail-popover {
    .reference-detail-content {
      scrollbar-color: var(--color-border, #404040) transparent;

      &::-webkit-scrollbar-thumb {
        background: var(--color-border, #404040);

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

      .detail-item {
        border-bottom-color: var(--color-border, #2c2c2c);

        .detail-label {
          color: var(--color-text, #fff);
        }

        .detail-value {
          color: var(--color-text-secondary, #aaa);

          &.more-authors {
            color: var(--color-text-tertiary, #777);
          }
        }
      }
    }
  }

  // 深色主题下的引用标签样式
  .vditor-markdown-editor {
    :deep(.vditor-wysiwyg .citation-tag),
    :deep(.vditor-ir .citation-tag),
    :deep(.vditor-preview .citation-tag),
    :deep(.vditor-content .citation-tag),
    :deep(.citation-tag) {
      background-color: rgba(24, 144, 255, 0.15) !important;
      color: #40a9ff !important;

      // 隐藏原始的 textContent（markdown 格式）
      font-size: 0 !important;

      // 使用 ::before 伪元素显示友好的文本
      &::before {
        content: attr(data-display-text);
        font-size: 13px;
        color: #40a9ff;
        font-weight: 500;
      }

      &:hover {
        background-color: rgba(24, 144, 255, 0.25) !important;
      }
    }
  }

  // 深色主题下的参考文献管理区域样式覆盖
  .reference-section {
    background-color: var(--color-card, #2c2c2c);
    border-top-color: var(--color-border, #404040);

    .reference-toolbar {
      .toolbar-left .toolbar-btn {
        background: none;
        border: none;
        color: var(--color-text, #fff);

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }

      .search-input-wrapper {
        background-color: var(--color-bg, #1a1a1a);
        border-color: var(--color-border, #404040);

        .search-icon {
          color: var(--color-text-secondary, #666);
        }

        .search-input {
          color: var(--color-text, #fff);

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

    .reference-table-container {
      border-color: var(--color-border, #404040);
      background-color: var(--color-bg, #1a1a1a);

      // 深色主题滚动条
      scrollbar-color: var(--color-border, #404040) transparent;

      &::-webkit-scrollbar-thumb {
        background: var(--color-border, #404040);

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

      // 深色主题加载状态
      .reference-loading {
        .loading-icon {
          color: var(--color-primary, #1890ff);
        }

        .loading-text {
          color: var(--color-text-secondary, #aaa);
        }
      }

      // 深色主题空状态
      .reference-empty {
        .empty-icon {
          color: var(--color-border, #404040);
        }

        .empty-text {
          color: var(--color-text-secondary, #666);
        }

        .empty-hint {
          color: var(--color-text-tertiary, #555);
        }
      }

      .reference-table {
        thead {
          background-color: var(--color-card, #2c2c2c);

          th {
            color: var(--color-text, #fff);
            border-bottom-color: var(--color-border, #404040);
          }
        }

        tbody tr {
          border-bottom-color: var(--color-border, #404040);
          height: 42px; // 固定行高
          cursor: move; // 显示可拖拽光标

          &:hover {
            background-color: var(--color-hover, rgba(255, 255, 255, 0.05));
          }

          // 拖拽时的样式
          &:active {
            opacity: 0.7;
            cursor: grabbing;
          }

          td {
            color: var(--color-text, #fff);
            height: 42px; // 固定单元格高度
            vertical-align: middle; // 垂直居中对齐

            &:nth-child(3) {
              .alias-display {
                height: 42px; // 固定高度

                .edit-alias-btn {
                  color: var(--color-text-secondary, #666);
                  width: 24px;
                  height: 24px;

                  &:hover {
                    background: var(--color-hover, rgba(255, 255, 255, 0.05));
                    color: var(--color-primary, #1890ff);
                  }
                }
              }

              .alias-edit {
                height: 42px; // 固定高度

                .alias-input {
                  background: var(--color-bg, #1a1a1a);
                  color: var(--color-text, #fff);
                  border-color: var(--color-primary, #1890ff);
                  height: 30px; // 固定输入框高度

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

            // 深色主题下的详情图标样式
            &.details-cell {
              .detail-icons {
                i {
                  &.icon-delete {
                    color: #ff4d4f;

                    &:hover {
                      color: #ff7875;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>