CodemirrorEditor.vue

<script setup lang="ts">
import FormulaEditorDialog from '@/components/editor/dialogs/FormulaEditorDialog.vue'
import LocalImageUploadDialog from '@/components/editor/dialogs/LocalImageUploadDialog.vue'
import EditorPanel from '@/components/editor/EditorPanel.vue'
import FolderSourcePanel from '@/components/editor/folder-source-panel/index.vue'
import PreviewPanel from '@/components/editor/PreviewPanel.vue'
import WysiwygEditor from '@/components/editor/WysiwygEditor.vue'
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'
import { useCursorSync } from '@/composables/useCursorSync'
import { useScrollSync } from '@/composables/useScrollSync'
import { useUIStore } from '@/stores/ui'

const uiStore = useUIStore()

const {
  isMobile,
  isOpenPostSlider,
  isOpenFolderPanel,
  isOpenRightSlider,
  viewMode,
  editorType,
  enableScrollSync,
} = storeToRefs(uiStore)

// --- 子组件引用 ---
const editorPanelCompRef = ref<InstanceType<typeof EditorPanel> | null>(null)
const previewPanelCompRef = ref<InstanceType<typeof PreviewPanel> | null>(null)

// 从子组件获取 codeMirrorView 和 previewRef (使用 getter 避免 DeepReadonly 类型问题)
const getEditorView = () => editorPanelCompRef.value?.codeMirrorView ?? null
const getPreviewContainer = () => previewPanelCompRef.value?.previewRef ?? null

// --- 点击预览内容跳转到编辑器对应位置 ---
const { handlePreviewContentClick } = useCursorSync(getEditorView)

// --- 滚动同步 ---
useScrollSync(getEditorView, getPreviewContainer, enableScrollSync)

// --- 复制状态 ---
const backLight = ref(false)
const isCoping = ref(false)
let copyEndTimer: ReturnType<typeof setTimeout> | null = null

function startCopy() {
  backLight.value = true
  isCoping.value = true
}

function endCopy() {
  backLight.value = false
  if (copyEndTimer) {
    clearTimeout(copyEndTimer)
  }
  copyEndTimer = setTimeout(() => {
    isCoping.value = false
    copyEndTimer = null
  }, 800)
}

onUnmounted(() => {
  if (copyEndTimer) {
    clearTimeout(copyEndTimer)
    copyEndTimer = null
  }
})

// --- 上传图片透传 ---
function handleUploadImage(file: File, cb?: any, applyUrl?: boolean) {
  editorPanelCompRef.value?.uploadImage(file, cb, applyUrl)
}

// --- 面板尺寸配置 ---
const hasSidePanel = computed(() => !isMobile.value && (isOpenRightSlider.value || uiStore.isShowCssEditor))

const editorPanelConfig = computed(() => {
  const mode = viewMode.value
  if (mode === `preview`) {
    return { min: 0, max: 0 }
  }
  if (mode === `edit`) {
    return hasSidePanel.value ? { min: 30, max: 85 } : { min: 100, max: 100 }
  }
  if (isMobile.value)
    return { min: 30, max: 70 }
  return { min: 15, max: 85 }
})

const previewPanelConfig = computed(() => {
  const mode = viewMode.value
  if (mode === `edit`) {
    return { min: 0, max: 0 }
  }
  if (mode === `preview`) {
    return hasSidePanel.value ? { min: 20, max: 75 } : { min: 100, max: 100 }
  }
  if (isMobile.value)
    return { min: 30, max: 70 }
  return { min: 15, max: 85 }
})

const editorResizablePanelRef = ref<InstanceType<typeof ResizablePanel> | null>(null)
const previewResizablePanelRef = ref<InstanceType<typeof ResizablePanel> | null>(null)
const cssEditorPanelRef = ref<InstanceType<typeof ResizablePanel> | null>(null)
const rightSliderPanelRef = ref<InstanceType<typeof ResizablePanel> | null>(null)
const PANEL_RESIZE_MAX_ATTEMPTS = 4
let panelResizeFrame: number | null = null
let isPanelLayoutUnmounted = false

function redistributePanelSizes(): boolean {
  const editorPanel = editorResizablePanelRef.value
  const previewPanel = previewResizablePanelRef.value
  const cssPanel = cssEditorPanelRef.value
  const rightPanel = rightSliderPanelRef.value
  if (!editorPanel || !previewPanel || !cssPanel || !rightPanel)
    return false

  const cssTarget = !isMobile.value && uiStore.isShowCssEditor ? 25 : 0
  const rightTarget = !isMobile.value && isOpenRightSlider.value ? 30 : 0
  const contentSpace = 100 - cssTarget - rightTarget

  try {
    const mode = viewMode.value
    if (mode === `edit`) {
      editorPanel.resize(contentSpace)
      previewPanel.resize(0)
    }
    else if (mode === `preview`) {
      editorPanel.resize(0)
      previewPanel.resize(contentSpace)
    }
    else {
      const half = contentSpace / 2
      editorPanel.resize(half)
      previewPanel.resize(half)
    }

    cssPanel.resize(cssTarget)
    rightPanel.resize(rightTarget)
    return true
  }
  catch (error) {
    // Reka 在 HMR/快速重挂载期间会短暂出现“组件 ref 已存在、面板尚未
    // 注册进新 group”的窗口。此时 imperative resize 会断言失败；下一帧
    // 注册完成后重试即可，不能把该瞬态错误泄漏成未处理异常。
    if (error instanceof Error && /Assertion failed|Panel size not found/.test(error.message))
      return false
    throw error
  }
}

function schedulePanelRedistribution(attempt = 0) {
  if (isPanelLayoutUnmounted)
    return
  if (panelResizeFrame !== null)
    cancelAnimationFrame(panelResizeFrame)

  void nextTick(() => {
    panelResizeFrame = requestAnimationFrame(() => {
      panelResizeFrame = null
      if (!redistributePanelSizes() && attempt < PANEL_RESIZE_MAX_ATTEMPTS)
        schedulePanelRedistribution(attempt + 1)
    })
  })
}

watch([viewMode, () => uiStore.isShowCssEditor, isOpenRightSlider, isMobile], () => {
  schedulePanelRedistribution()
})

onMounted(schedulePanelRedistribution)

onUnmounted(() => {
  isPanelLayoutUnmounted = true
  if (panelResizeFrame !== null) {
    cancelAnimationFrame(panelResizeFrame)
    panelResizeFrame = null
  }
})

// --- 进度条 ---
const progressValue = computed(() => editorPanelCompRef.value?.progressValue ?? 0)
</script>

<template>
  <div class="container flex flex-col">
    <Progress v-model="progressValue" class="absolute left-0 right-0 rounded-none" style="height: 2px;" />
    <EditorHeader
      @start-copy="startCopy"
      @end-copy="endCopy"
    />

    <main class="container-main flex flex-1 flex-col">
      <div
        class="container-main-section border-radius-10 relative flex flex-1 overflow-hidden border-x border-b"
      >
        <ResizablePanelGroup direction="horizontal">
          <ResizablePanel
            class="post-slider-panel"
            :default-size="isMobile ? 0 : 15"
            :max-size="!isMobile && isOpenPostSlider ? 20 : 0"
            :min-size="!isMobile && isOpenPostSlider ? 10 : 0"
          >
            <PostSlider />
          </ResizablePanel>
          <ResizableHandle class="hidden md:block" />
          <ResizablePanel
            class="folder-panel"
            :default-size="!isMobile && isOpenFolderPanel ? 15 : 0"
            :max-size="!isMobile && isOpenFolderPanel ? 25 : 0"
            :min-size="!isMobile && isOpenFolderPanel ? 10 : 0"
          >
            <FolderSourcePanel />
          </ResizablePanel>
          <ResizableHandle v-if="!isMobile && isOpenFolderPanel" class="hidden md:block" />

          <!-- 主内容区域 (嵌套灵动布局) -->
          <ResizablePanel :min-size="30">
            <ResizablePanelGroup direction="horizontal">
              <!-- Markdown 编辑器 -->
              <ResizablePanel
                ref="editorResizablePanelRef"
                :order="1"
                :default-size="viewMode === 'preview' ? 0 : viewMode === 'edit' ? 100 : 50"
                :min-size="editorPanelConfig.min"
                :max-size="editorPanelConfig.max"
                collapsible
                :collapsed-size="0"
              >
                <EditorPanel v-if="editorType === 'source'" ref="editorPanelCompRef" />
                <WysiwygEditor v-else />
              </ResizablePanel>
              <ResizableHandle v-show="viewMode === 'split'" />

              <!-- 预览区 -->
              <ResizablePanel
                ref="previewResizablePanelRef"
                :order="2"
                :default-size="viewMode === 'edit' ? 0 : viewMode === 'preview' ? 100 : 50"
                :min-size="previewPanelConfig.min"
                :max-size="previewPanelConfig.max"
                collapsible
                :collapsed-size="0"
              >
                <PreviewPanel
                  ref="previewPanelCompRef"
                  :back-light="backLight"
                  :is-coping="isCoping"
                  :on-content-click="handlePreviewContentClick"
                />
              </ResizablePanel>

              <!-- CSS 编辑器面板 -->
              <ResizableHandle v-show="!isMobile && uiStore.isShowCssEditor" class="hidden md:block" />
              <ResizablePanel
                ref="cssEditorPanelRef"
                :order="3"
                :default-size="0"
                :min-size="!isMobile && uiStore.isShowCssEditor ? 10 : 0"
                :max-size="!isMobile && uiStore.isShowCssEditor ? 60 : 0"
                collapsible
                :collapsed-size="0"
              >
                <CssEditor v-if="!isMobile" />
              </ResizablePanel>

              <!-- 样式面板 -->
              <ResizableHandle v-show="!isMobile && isOpenRightSlider" class="hidden md:block right-slider-handle" />
              <ResizablePanel
                ref="rightSliderPanelRef"
                class="right-slider-panel"
                :order="4"
                :default-size="0"
                :min-size="!isMobile && isOpenRightSlider ? 25 : 0"
                :max-size="!isMobile && isOpenRightSlider ? 60 : 0"
                collapsible
                :collapsed-size="0"
              >
                <RightSlider v-if="!isMobile" />
              </ResizablePanel>
            </ResizablePanelGroup>

            <!-- 移动端：CssEditor 和 RightSlider 作为浮层 -->
            <template v-if="isMobile">
              <CssEditor />
              <RightSlider />
            </template>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      <UploadImgDialog @upload-image="handleUploadImage" />

      <InsertFormDialog />

      <ImportMarkdownDialog />

      <LocalImageUploadDialog />

      <FormulaEditorDialog />

      <TemplateDialog />

      <CustomComponentDialog />
    </main>

    <Footer />
  </div>
</template>

<style lang="less" scoped>
@import url('../../assets/less/app.less');
</style>

<style lang="less" scoped>
.container {
  height: 100%;
  min-height: 0;
  min-width: 100%;
  padding: 0;
}

.container-main {
  overflow: hidden;
}

.right-slider-panel {
  transition: flex-grow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.post-slider-panel {
  transition: flex-grow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-panel {
  transition: flex-grow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.right-slider-handle {
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
</style>