feat: add easy-jyy Slidev theme

packages/slidev-theme-easy-jyy/components/ContentScaleControls.vue

@@ -0,0 +1,699 @@
+<script setup lang="ts">
+import { sharedState, useNav } from '@slidev/client'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
+
+type ScalableKind = 'table' | 'code'
+
+interface ScaleMessage {
+  key: string
+  kind: ScalableKind
+  scale: number
+}
+
+interface TableBaseStyle {
+  tableFontSize: number
+  tableInlineFontSize: string
+  cells: Array<{
+    element: HTMLElement
+    inlinePaddingBottom: string
+    inlinePaddingLeft: string
+    inlinePaddingRight: string
+    inlinePaddingTop: string
+    paddingBottom: number
+    paddingLeft: number
+    paddingRight: number
+    paddingTop: number
+  }>
+}
+
+interface CodeBaseStyle {
+  codeFontSize: number
+  createdHost: boolean
+}
+
+interface ImageInteraction {
+  ariaLabel: string | null
+  role: string | null
+  tabIndex: string | null
+  click: (event: MouseEvent) => void
+  keydown: (event: KeyboardEvent) => void
+}
+
+interface ImagePreviewRequest {
+  alt: string
+  id: string
+  sentAt: number
+  src: string
+}
+
+interface ImagePreviewAcknowledgement {
+  requestId: string
+  sentAt: number
+  viewerId: string
+}
+
+interface EasySlidesSharedState {
+  easySlidesImagePreview?: {
+    acknowledgement?: ImagePreviewAcknowledgement
+    request?: ImagePreviewRequest
+  }
+}
+
+interface PendingImagePreview {
+  cleanupTimer?: ReturnType<typeof setTimeout>
+  fallbackOpened: boolean
+  fallbackTimer: ReturnType<typeof setTimeout>
+  image: HTMLImageElement
+  requestId: string
+}
+
+const nav = useNav()
+const easySharedState = sharedState as typeof sharedState & EasySlidesSharedState
+const clientId = createClientId()
+const mountedAt = Date.now()
+const scales = new Map<string, number>()
+const tableStyles = new WeakMap<HTMLTableElement, TableBaseStyle>()
+const codeStyles = new WeakMap<HTMLPreElement, CodeBaseStyle>()
+const imageInteractions = new Map<HTMLImageElement, ImageInteraction>()
+let observer: MutationObserver | undefined
+let resizeObserver: ResizeObserver | undefined
+let channel: BroadcastChannel | undefined
+let lightbox: HTMLElement | undefined
+let lightboxImage: HTMLImageElement | undefined
+let lightboxClose: HTMLButtonElement | undefined
+let activeImage: HTMLImageElement | undefined
+let pendingImagePreview: PendingImagePreview | undefined
+let stopAcknowledgementWatch: (() => void) | undefined
+let stopRequestWatch: (() => void) | undefined
+let fitFrame: number | undefined
+let lastHandledRequestId = easySharedState.easySlidesImagePreview?.request?.id ?? ''
+let bodyOverflow = ''
+
+function createClientId() {
+  if (typeof crypto.randomUUID === 'function')
+    return crypto.randomUUID()
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`
+}
+
+function isInteractiveRoute() {
+  if (/(?:^|\/)(?:overview|export|editor|notes|notes-edit|print)(?:\/|$)/.test(window.location.pathname))
+    return false
+  return nav.isPresenter.value || nav.hasPrimarySlide.value
+}
+
+function isAuditRoute() {
+  return new URLSearchParams(window.location.search).has('easy-slides-audit')
+}
+
+function isProjectionRoute() {
+  return !isAuditRoute() && isInteractiveRoute() && !nav.isPresenter.value && nav.hasPrimarySlide.value
+}
+
+function clampScale(scale: number) {
+  return Math.min(1.6, Math.max(0.6, Math.round(scale * 10) / 10))
+}
+
+function findSlideNumber(element: Element) {
+  const page = element.closest<HTMLElement>('[class*="slidev-page-"]')
+  const pageClass = page && Array.from(page.classList).find(className => /^slidev-page-\d+$/.test(className))
+  return pageClass?.replace('slidev-page-', '') ?? 'unknown'
+}
+
+function contentKey(element: Element, kind: ScalableKind) {
+  const layout = element.closest('.slidev-layout')
+  const selector = kind === 'table' ? 'table' : 'pre'
+  const elements = layout ? Array.from(layout.querySelectorAll(selector)) : [element]
+  const index = Math.max(0, elements.indexOf(element))
+  return `slide:${findSlideNumber(element)}:${kind}:${index}`
+}
+
+function createButton(label: string, text: string, onClick: () => void) {
+  const button = document.createElement('button')
+  button.type = 'button'
+  button.className = 'easy-content-scale-button'
+  button.setAttribute('aria-label', label)
+  button.title = label
+  button.textContent = text
+  button.addEventListener('pointerdown', event => event.stopPropagation())
+  button.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    onClick()
+  })
+  return button
+}
+
+function kindLabel(kind: ScalableKind) {
+  return kind === 'table' ? '表格' : '代码'
+}
+
+function createToolbar(key: string, kind: ScalableKind) {
+  const label = kindLabel(kind)
+  const toolbar = document.createElement('nav')
+  toolbar.className = 'easy-content-scale-toolbar'
+  toolbar.setAttribute('aria-label', `${label}缩放`)
+  toolbar.dataset.easyScaleKey = key
+  toolbar.dataset.easyScaleKind = kind
+
+  const decrease = createButton(`缩小${label}`, '−', () => updateScale(key, kind, currentScale(key) - 0.1))
+  const reset = createButton(`重置${label}缩放`, '100%', () => updateScale(key, kind, 1))
+  reset.classList.add('easy-content-scale-reset')
+  const increase = createButton(`放大${label}`, '+', () => updateScale(key, kind, currentScale(key) + 0.1))
+  toolbar.append(decrease, reset, increase)
+  return toolbar
+}
+
+function currentScale(key: string) {
+  return scales.get(key) ?? 1
+}
+
+function updateScale(key: string, kind: ScalableKind, requestedScale: number, shouldBroadcast = true) {
+  const scale = clampScale(requestedScale)
+  scales.set(key, scale)
+  applyScale(key, kind, scale)
+  if (shouldBroadcast)
+    channel?.postMessage({ key, kind, scale } satisfies ScaleMessage)
+}
+
+function updateResetButton(host: HTMLElement, scale: number) {
+  const reset = host.querySelector<HTMLButtonElement>('.easy-content-scale-reset')
+  if (!reset)
+    return
+  const percentage = `${Math.round(scale * 100)}%`
+  reset.textContent = percentage
+  reset.title = `${reset.getAttribute('aria-label')}（当前 ${percentage}）`
+}
+
+function applyScale(key: string, kind: ScalableKind, scale: number) {
+  const hostSelector = kind === 'table' ? '.easy-content-table-host' : '.easy-content-code-host'
+  document.querySelectorAll<HTMLElement>(hostSelector).forEach((host) => {
+    if (host.dataset.easyScaleKey !== key)
+      return
+    updateResetButton(host, scale)
+
+    if (kind === 'code') {
+      const code = host.querySelector<HTMLPreElement>('pre')
+      const base = code && codeStyles.get(code)
+      if (!code || !base)
+        return
+      if (scale === 1)
+        host.style.removeProperty('--easy-code-scaled-font-size')
+      else
+        host.style.setProperty('--easy-code-scaled-font-size', `${base.codeFontSize * scale}px`)
+      return
+    }
+
+    const table = host.querySelector<HTMLTableElement>('table')
+    const base = table && tableStyles.get(table)
+    if (!table || !base)
+      return
+    if (scale === 1) {
+      table.style.fontSize = base.tableInlineFontSize
+      base.cells.forEach((cell) => {
+        cell.element.style.paddingTop = cell.inlinePaddingTop
+        cell.element.style.paddingRight = cell.inlinePaddingRight
+        cell.element.style.paddingBottom = cell.inlinePaddingBottom
+        cell.element.style.paddingLeft = cell.inlinePaddingLeft
+      })
+      return
+    }
+    table.style.fontSize = `${base.tableFontSize * scale}px`
+    base.cells.forEach((cell) => {
+      cell.element.style.paddingTop = `${cell.paddingTop * scale}px`
+      cell.element.style.paddingRight = `${cell.paddingRight * scale}px`
+      cell.element.style.paddingBottom = `${cell.paddingBottom * scale}px`
+      cell.element.style.paddingLeft = `${cell.paddingLeft * scale}px`
+    })
+  })
+}
+
+function createLightbox() {
+  const overlay = document.createElement('div')
+  overlay.className = 'easy-image-lightbox'
+  overlay.hidden = true
+  overlay.setAttribute('role', 'dialog')
+  overlay.setAttribute('aria-modal', 'true')
+  overlay.setAttribute('aria-label', '图片全屏预览')
+
+  const preview = document.createElement('img')
+  preview.className = 'easy-image-lightbox-preview'
+  preview.alt = ''
+
+  const close = document.createElement('button')
+  close.type = 'button'
+  close.className = 'easy-image-lightbox-close'
+  close.setAttribute('aria-label', '关闭图片全屏预览')
+  close.title = '关闭（Esc）'
+  close.textContent = '×'
+  close.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    closeLightbox()
+  })
+
+  overlay.addEventListener('pointerdown', event => event.stopPropagation())
+  overlay.addEventListener('click', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (event.target === overlay)
+      closeLightbox()
+  })
+  overlay.append(preview, close)
+  document.body.append(overlay)
+  lightbox = overlay
+  lightboxImage = preview
+  lightboxClose = close
+}
+
+function showLightbox(src: string, alt: string, image?: HTMLImageElement) {
+  if (!lightbox || !lightboxImage || !lightboxClose)
+    return
+  const wasHidden = lightbox.hidden
+  activeImage = image
+  lightboxImage.src = src
+  lightboxImage.alt = alt
+  lightbox.hidden = false
+  if (wasHidden)
+    bodyOverflow = document.body.style.overflow
+  document.body.style.overflow = 'hidden'
+  document.addEventListener('keydown', handleLightboxKeydown, true)
+  lightboxClose.focus()
+}
+
+function openLightbox(image: HTMLImageElement) {
+  showLightbox(image.currentSrc || image.src, image.alt, image)
+}
+
+function closeLightbox(restoreFocus = true) {
+  if (!lightbox || lightbox.hidden)
+    return
+  document.removeEventListener('keydown', handleLightboxKeydown, true)
+  lightbox.hidden = true
+  if (lightboxImage)
+    lightboxImage.removeAttribute('src')
+  document.body.style.overflow = bodyOverflow
+  if (restoreFocus)
+    activeImage?.focus()
+  activeImage = undefined
+}
+
+function handleLightboxKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    event.stopPropagation()
+    closeLightbox()
+  }
+  else if (event.key === 'Tab') {
+    event.preventDefault()
+    lightboxClose?.focus()
+  }
+}
+
+function updateImagePreviewState(patch: NonNullable<EasySlidesSharedState['easySlidesImagePreview']>) {
+  easySharedState.easySlidesImagePreview = {
+    ...easySharedState.easySlidesImagePreview,
+    ...patch,
+  }
+}
+
+function clearPendingImagePreview() {
+  if (!pendingImagePreview)
+    return
+  clearTimeout(pendingImagePreview.fallbackTimer)
+  if (pendingImagePreview.cleanupTimer)
+    clearTimeout(pendingImagePreview.cleanupTimer)
+  pendingImagePreview = undefined
+}
+
+function requestProjectionLightbox(image: HTMLImageElement) {
+  clearPendingImagePreview()
+  const request: ImagePreviewRequest = {
+    alt: image.alt,
+    id: createClientId(),
+    sentAt: Date.now(),
+    src: image.currentSrc || image.src,
+  }
+  const pending: PendingImagePreview = {
+    fallbackOpened: false,
+    fallbackTimer: setTimeout(() => {
+      if (pendingImagePreview?.requestId !== request.id)
+        return
+      pendingImagePreview.fallbackOpened = true
+      openLightbox(image)
+      pendingImagePreview.cleanupTimer = setTimeout(() => {
+        if (pendingImagePreview?.requestId === request.id)
+          pendingImagePreview = undefined
+      }, 10_000)
+    }, 500),
+    image,
+    requestId: request.id,
+  }
+  pendingImagePreview = pending
+  updateImagePreviewState({ request })
+}
+
+function activateImage(image: HTMLImageElement) {
+  if (nav.isPresenter.value)
+    requestProjectionLightbox(image)
+  else
+    openLightbox(image)
+}
+
+function handleImagePreviewAcknowledgement(acknowledgement: ImagePreviewAcknowledgement | undefined) {
+  if (!acknowledgement || !pendingImagePreview || acknowledgement.requestId !== pendingImagePreview.requestId)
+    return
+  const pending = pendingImagePreview
+  clearPendingImagePreview()
+  if (pending.fallbackOpened && activeImage === pending.image)
+    closeLightbox(false)
+}
+
+function handleImagePreviewRequest(request: ImagePreviewRequest | undefined) {
+  if (!request || !isProjectionRoute() || request.id === lastHandledRequestId)
+    return
+  if (request.sentAt < mountedAt - 100 || Date.now() - request.sentAt > 10_000)
+    return
+  lastHandledRequestId = request.id
+  showLightbox(request.src, request.alt)
+  updateImagePreviewState({
+    acknowledgement: {
+      requestId: request.id,
+      sentAt: Date.now(),
+      viewerId: clientId,
+    },
+  })
+}
+
+function enhanceImage(image: HTMLImageElement) {
+  if (imageInteractions.has(image) || image.closest('a, button') || image.closest('.easy-image-lightbox'))
+    return
+
+  const click = (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    activateImage(image)
+  }
+  const keydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Enter' && event.key !== ' ')
+      return
+    event.preventDefault()
+    event.stopPropagation()
+    activateImage(image)
+  }
+  imageInteractions.set(image, {
+    ariaLabel: image.getAttribute('aria-label'),
+    role: image.getAttribute('role'),
+    tabIndex: image.getAttribute('tabindex'),
+    click,
+    keydown,
+  })
+  image.classList.add('easy-image-preview-trigger')
+  image.tabIndex = 0
+  image.setAttribute('role', 'button')
+  if (!image.hasAttribute('aria-label'))
+    image.setAttribute('aria-label', image.alt ? `全屏查看图片：${image.alt}` : '全屏查看图片')
+  image.addEventListener('click', click)
+  image.addEventListener('keydown', keydown)
+}
+
+function enhanceTable(table: HTMLTableElement) {
+  if (table.closest('.easy-content-table-host'))
+    return
+
+  const key = contentKey(table, 'table')
+  const cells = Array.from(table.querySelectorAll<HTMLElement>('th, td')).map((element) => {
+    const style = getComputedStyle(element)
+    return {
+      element,
+      inlinePaddingBottom: element.style.paddingBottom,
+      inlinePaddingLeft: element.style.paddingLeft,
+      inlinePaddingRight: element.style.paddingRight,
+      inlinePaddingTop: element.style.paddingTop,
+      paddingBottom: Number.parseFloat(style.paddingBottom),
+      paddingLeft: Number.parseFloat(style.paddingLeft),
+      paddingRight: Number.parseFloat(style.paddingRight),
+      paddingTop: Number.parseFloat(style.paddingTop),
+    }
+  })
+  tableStyles.set(table, {
+    tableFontSize: Number.parseFloat(getComputedStyle(table).fontSize),
+    tableInlineFontSize: table.style.fontSize,
+    cells,
+  })
+
+  const host = document.createElement('div')
+  host.className = 'easy-content-scale-host easy-content-table-host'
+  host.dataset.easyScaleKey = key
+  host.dataset.easyScaleKind = 'table'
+  table.replaceWith(host)
+  host.append(table, createToolbar(key, 'table'))
+  applyScale(key, 'table', currentScale(key))
+}
+
+function enhanceCode(code: HTMLPreElement) {
+  if (code.closest('.easy-content-code-host'))
+    return
+
+  const key = contentKey(code, 'code')
+  let host = code.closest<HTMLElement>('.slidev-code-wrapper')
+  const createdHost = !host
+  if (!host) {
+    host = document.createElement('div')
+    code.replaceWith(host)
+    host.append(code)
+  }
+  host.classList.add('easy-content-scale-host', 'easy-content-code-host')
+  host.dataset.easyScaleKey = key
+  host.dataset.easyScaleKind = 'code'
+  host.dataset.easyCodeHostCreated = createdHost ? 'true' : 'false'
+  codeStyles.set(code, {
+    codeFontSize: Number.parseFloat(getComputedStyle(code).fontSize),
+    createdHost,
+  })
+  host.append(createToolbar(key, 'code'))
+  applyScale(key, 'code', currentScale(key))
+  resizeObserver?.observe(code.closest('.slidev-layout') ?? host)
+  scheduleCodeHeightFit()
+}
+
+function enhanceContent(root: ParentNode = document) {
+  const images = Array.from(root.querySelectorAll<HTMLImageElement>('.slidev-layout img'))
+  const tables = Array.from(root.querySelectorAll<HTMLTableElement>('.slidev-layout table'))
+  const codes = Array.from(root.querySelectorAll<HTMLPreElement>('.slidev-layout pre'))
+  if (root instanceof HTMLImageElement && root.closest('.slidev-layout'))
+    images.unshift(root)
+  if (root instanceof HTMLTableElement && root.closest('.slidev-layout'))
+    tables.unshift(root)
+  if (root instanceof HTMLPreElement && root.closest('.slidev-layout'))
+    codes.unshift(root)
+  images.forEach(enhanceImage)
+  tables.forEach(enhanceTable)
+  codes.forEach(enhanceCode)
+}
+
+function codeHeightRegion(code: HTMLPreElement) {
+  return code.closest<HTMLElement>('.easy-two-cols-grid > div')
+    ?? code.closest<HTMLElement>('.slidev-layout')
+}
+
+function hasExplicitCodeHeight(code: HTMLPreElement) {
+  if (code.style.height || code.style.maxHeight)
+    return true
+  return Boolean(getComputedStyle(code).getPropertyValue('--easy-code-height').trim())
+}
+
+function availableCodeHeight(code: HTMLPreElement, region: HTMLElement) {
+  const layout = code.closest<HTMLElement>('.slidev-layout')
+  if (!layout || layout.clientHeight <= 0)
+    return 0
+  const layoutRect = layout.getBoundingClientRect()
+  const regionRect = region.getBoundingClientRect()
+  const codeRect = code.getBoundingClientRect()
+  if (layoutRect.height <= 0 || regionRect.height <= 0 || codeRect.width <= 0)
+    return 0
+  const scale = layoutRect.height / layout.clientHeight
+  if (!Number.isFinite(scale) || scale <= 0)
+    return 0
+  const regionPaddingBottom = Number.parseFloat(getComputedStyle(region).paddingBottom) || 0
+  const layoutPaddingBottom = Number.parseFloat(getComputedStyle(layout).paddingBottom) || 0
+  const regionBottom = regionRect.bottom - regionPaddingBottom * scale
+  const layoutBottom = layoutRect.bottom - layoutPaddingBottom * scale
+  return Math.max(0, Math.floor((Math.min(regionBottom, layoutBottom) - codeRect.top) / scale))
+}
+
+function setHostLength(host: HTMLElement, property: string, value?: number) {
+  const next = value && value > 0 ? `${value}px` : ''
+  if (host.style.getPropertyValue(property) === next)
+    return
+  if (next)
+    host.style.setProperty(property, next)
+  else
+    host.style.removeProperty(property)
+}
+
+function fitCodeHeights() {
+  const groups = new Map<HTMLElement, HTMLPreElement[]>()
+  document.querySelectorAll<HTMLPreElement>('.easy-content-code-host pre').forEach((code) => {
+    const host = code.closest<HTMLElement>('.easy-content-code-host')
+    if (!host)
+      return
+    if (hasExplicitCodeHeight(code)) {
+      setHostLength(host, '--easy-code-auto-height')
+      setHostLength(host, '--easy-code-auto-max-height')
+      return
+    }
+    const region = codeHeightRegion(code)
+    if (!region)
+      return
+    const group = groups.get(region) ?? []
+    group.push(code)
+    groups.set(region, group)
+  })
+
+  groups.forEach((codes, region) => {
+    const single = codes.length === 1
+    codes.forEach((code) => {
+      const host = code.closest<HTMLElement>('.easy-content-code-host')
+      if (!host)
+        return
+      const available = availableCodeHeight(code, region)
+      if (!available)
+        return
+      setHostLength(host, '--easy-code-auto-height', single ? available : undefined)
+      setHostLength(host, '--easy-code-auto-max-height', available)
+    })
+  })
+}
+
+function scheduleCodeHeightFit() {
+  if (fitFrame !== undefined)
+    return
+  fitFrame = requestAnimationFrame(() => {
+    fitFrame = undefined
+    fitCodeHeights()
+  })
+}
+
+function cleanupImage(image: HTMLImageElement, interaction: ImageInteraction) {
+  image.removeEventListener('click', interaction.click)
+  image.removeEventListener('keydown', interaction.keydown)
+  image.classList.remove('easy-image-preview-trigger')
+  restoreAttribute(image, 'aria-label', interaction.ariaLabel)
+  restoreAttribute(image, 'role', interaction.role)
+  restoreAttribute(image, 'tabindex', interaction.tabIndex)
+}
+
+function restoreAttribute(element: Element, name: string, value: string | null) {
+  if (value === null)
+    element.removeAttribute(name)
+  else
+    element.setAttribute(name, value)
+}
+
+function cleanupTableHosts() {
+  document.querySelectorAll<HTMLElement>('.easy-content-table-host').forEach((host) => {
+    const table = host.querySelector<HTMLTableElement>('table')
+    const base = table && tableStyles.get(table)
+    if (!table)
+      return
+    if (base) {
+      table.style.fontSize = base.tableInlineFontSize
+      base.cells.forEach((cell) => {
+        cell.element.style.paddingTop = cell.inlinePaddingTop
+        cell.element.style.paddingRight = cell.inlinePaddingRight
+        cell.element.style.paddingBottom = cell.inlinePaddingBottom
+        cell.element.style.paddingLeft = cell.inlinePaddingLeft
+      })
+    }
+    host.replaceWith(table)
+  })
+}
+
+function cleanupCodeHosts() {
+  document.querySelectorAll<HTMLElement>('.easy-content-code-host').forEach((host) => {
+    const code = host.querySelector<HTMLPreElement>('pre')
+    const base = code && codeStyles.get(code)
+    host.querySelector(':scope > .easy-content-scale-toolbar')?.remove()
+    host.style.removeProperty('--easy-code-scaled-font-size')
+    host.style.removeProperty('--easy-code-auto-height')
+    host.style.removeProperty('--easy-code-auto-max-height')
+    host.classList.remove('easy-content-scale-host', 'easy-content-code-host')
+    delete host.dataset.easyScaleKey
+    delete host.dataset.easyScaleKind
+    delete host.dataset.easyCodeHostCreated
+    if (code && base?.createdHost)
+      host.replaceWith(code)
+  })
+}
+
+function cleanupContent() {
+  clearPendingImagePreview()
+  closeLightbox()
+  imageInteractions.forEach((interaction, image) => cleanupImage(image, interaction))
+  imageInteractions.clear()
+  lightbox?.remove()
+  lightbox = undefined
+  lightboxImage = undefined
+  lightboxClose = undefined
+  cleanupTableHosts()
+  cleanupCodeHosts()
+}
+
+function isScaleMessage(value: unknown): value is ScaleMessage {
+  if (!value || typeof value !== 'object')
+    return false
+  const message = value as Partial<ScaleMessage>
+  return typeof message.key === 'string'
+    && (message.kind === 'table' || message.kind === 'code')
+    && typeof message.scale === 'number'
+    && Number.isFinite(message.scale)
+}
+
+onMounted(() => {
+  if (!isInteractiveRoute())
+    return
+  createLightbox()
+  if ('BroadcastChannel' in window) {
+    channel = new BroadcastChannel(`easy-slides:content-scale:${import.meta.env.BASE_URL}`)
+    channel.addEventListener('message', (event) => {
+      if (isScaleMessage(event.data))
+        updateScale(event.data.key, event.data.kind, event.data.scale, false)
+    })
+  }
+  stopAcknowledgementWatch = watch(
+    () => easySharedState.easySlidesImagePreview?.acknowledgement,
+    handleImagePreviewAcknowledgement,
+  )
+  stopRequestWatch = watch(
+    () => easySharedState.easySlidesImagePreview?.request,
+    handleImagePreviewRequest,
+  )
+  resizeObserver = new ResizeObserver(scheduleCodeHeightFit)
+  enhanceContent()
+  document.querySelectorAll<HTMLElement>('.slidev-layout').forEach(layout => resizeObserver?.observe(layout))
+  observer = new MutationObserver((records) => {
+    records.forEach(record => enhanceContent(record.target as ParentNode))
+    scheduleCodeHeightFit()
+  })
+  observer.observe(document.body, { childList: true, subtree: true })
+  window.addEventListener('resize', scheduleCodeHeightFit)
+  void document.fonts?.ready.then(scheduleCodeHeightFit)
+  scheduleCodeHeightFit()
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  resizeObserver?.disconnect()
+  channel?.close()
+  stopAcknowledgementWatch?.()
+  stopRequestWatch?.()
+  window.removeEventListener('resize', scheduleCodeHeightFit)
+  if (fitFrame !== undefined)
+    cancelAnimationFrame(fitFrame)
+  cleanupContent()
+})
+</script>
+
+<template>
+  <span hidden aria-hidden="true" />
+</template>

packages/slidev-theme-easy-jyy/components/PresenterAccess.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const configuredHash = import.meta.env.VITE_EASY_SLIDES_PRESENTER_HASH || ''
+const isPresenter = computed(() => /\/presenter(?:\/\d+)?\/?$/.test(window.location.pathname))
+const storageKey = `easy-slides:presenter:${import.meta.env.BASE_URL}`
+const unlocked = ref(false)
+const token = ref('')
+const error = ref('')
+const noteSize = ref(20)
+const contrast = ref(false)
+const gate = ref<HTMLDialogElement>()
+const tokenInput = ref<HTMLInputElement>()
+
+onMounted(async () => {
+  unlocked.value = sessionStorage.getItem(storageKey) === configuredHash
+    || (!configuredHash && import.meta.env.DEV)
+  syncBodyState()
+  await syncPresenterGate()
+})
+
+onBeforeUnmount(() => {
+  if (gate.value?.open)
+    gate.value.close()
+  document.body.classList.remove('easy-presenter-active', 'easy-presenter-locked', 'easy-notes-contrast')
+})
+
+watch(unlocked, () => void syncPresenterGate())
+
+async function unlock() {
+  error.value = ''
+  const candidate = await sha256(token.value)
+  if (candidate !== configuredHash) {
+    error.value = 'Token 不正确'
+    return
+  }
+  sessionStorage.setItem(storageKey, configuredHash)
+  unlocked.value = true
+  token.value = ''
+  await nextTick()
+  syncBodyState()
+}
+
+function lock() {
+  sessionStorage.removeItem(storageKey)
+  unlocked.value = false
+  syncBodyState()
+}
+
+function openPresenter() {
+  window.location.href = `${import.meta.env.BASE_URL}presenter/`
+}
+
+function resizeNotes(delta: number) {
+  noteSize.value = Math.min(38, Math.max(14, noteSize.value + delta))
+  document.documentElement.style.setProperty('--easy-presenter-note-size', `${noteSize.value}px`)
+}
+
+function toggleContrast() {
+  contrast.value = !contrast.value
+  syncBodyState()
+}
+
+function syncBodyState() {
+  document.body.classList.toggle('easy-presenter-active', isPresenter.value && unlocked.value)
+  document.body.classList.toggle('easy-notes-contrast', isPresenter.value && unlocked.value && contrast.value)
+}
+
+async function syncPresenterGate() {
+  await nextTick()
+  const shouldOpen = isPresenter.value && !unlocked.value
+  document.body.classList.toggle('easy-presenter-locked', shouldOpen)
+  if (!shouldOpen) {
+    if (gate.value?.open)
+      gate.value.close()
+    return
+  }
+  if (gate.value && !gate.value.open)
+    gate.value.showModal()
+  tokenInput.value?.focus()
+}
+
+function keepGateOpen(event: Event) {
+  event.preventDefault()
+  tokenInput.value?.focus()
+}
+
+async function sha256(value: string) {
+  const bytes = new TextEncoder().encode(value.trim())
+  const digest = await crypto.subtle.digest('SHA-256', bytes)
+  return Array.from(new Uint8Array(digest), byte => byte.toString(16).padStart(2, '0')).join('')
+}
+</script>
+
+<template>
+  <button
+    v-if="!isPresenter && configuredHash"
+    class="easy-presenter-launcher"
+    type="button"
+    title="打开演示者模式"
+    @click="openPresenter"
+  >
+    演示者
+  </button>
+
+  <Teleport to="body">
+    <dialog
+      v-if="isPresenter && !unlocked"
+      ref="gate"
+      class="easy-presenter-gate"
+      aria-labelledby="easy-presenter-title"
+      @cancel="keepGateOpen"
+      @click.stop
+      @keydown.stop
+      @keyup.stop
+      @pointerdown.stop
+    >
+      <section class="easy-presenter-dialog">
+        <h1 id="easy-presenter-title">演示者模式</h1>
+        <p v-if="configuredHash">输入 token 后查看下一页、演讲备注和计时器。</p>
+        <p v-else>该站点没有配置演示者 token。</p>
+        <form v-if="configuredHash" @submit.prevent="unlock">
+          <input ref="tokenInput" v-model="token" type="password" autocomplete="current-password" autofocus aria-label="演示者 token">
+          <button type="submit">解锁</button>
+        </form>
+        <p v-if="error" class="easy-presenter-error" role="alert">{{ error }}</p>
+      </section>
+    </dialog>
+  </Teleport>
+
+  <nav v-if="isPresenter && unlocked" class="easy-presenter-tools" aria-label="提词器设置">
+    <button type="button" title="减小讲稿字号" @click="resizeNotes(-2)">A−</button>
+    <button type="button" title="增大讲稿字号" @click="resizeNotes(2)">A+</button>
+    <button type="button" title="切换高对比讲稿" @click="toggleContrast">◐</button>
+    <button type="button" title="锁定演示者模式" @click="lock">锁定</button>
+  </nav>
+</template>

packages/slidev-theme-easy-jyy/components/SlideScrollFallback.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useNav } from '@slidev/client'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
+
+const nav = useNav()
+
+function isInteractiveRoute() {
+  if (/(?:^|\/)(?:overview|export|editor|notes|notes-edit|print)(?:\/|$)/.test(window.location.pathname))
+    return false
+  return nav.isPresenter.value || nav.hasPrimarySlide.value
+}
+
+function syncScrollFallback() {
+  document.body.classList.toggle('easy-slide-scroll-fallback', isInteractiveRoute())
+}
+
+onMounted(syncScrollFallback)
+
+watch(
+  [nav.isPresenter, nav.hasPrimarySlide],
+  syncScrollFallback,
+)
+
+onBeforeUnmount(() => {
+  document.body.classList.remove('easy-slide-scroll-fallback')
+})
+</script>
+
+<template>
+  <span hidden aria-hidden="true" />
+</template>

packages/slidev-theme-easy-jyy/components/SmartImages.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+
+let observer: MutationObserver | undefined
+
+function enhanceImages(root: ParentNode = document) {
+  root.querySelectorAll<HTMLImageElement>('.slidev-layout img').forEach((image) => {
+    image.classList.add('easy-smart-image')
+    const fit = image.getAttribute('fit')
+    const position = image.getAttribute('position')
+    const maxHeight = image.getAttribute('max-height')
+    if (fit)
+      image.style.objectFit = fit
+    if (position)
+      image.style.objectPosition = position
+    if (maxHeight)
+      image.style.maxHeight = maxHeight
+  })
+}
+
+onMounted(() => {
+  enhanceImages()
+  observer = new MutationObserver(records => records.forEach(record => enhanceImages(record.target as ParentNode)))
+  observer.observe(document.body, { childList: true, subtree: true })
+})
+
+onBeforeUnmount(() => observer?.disconnect())
+</script>
+
+<template>
+  <span hidden aria-hidden="true" />
+</template>

packages/slidev-theme-easy-jyy/global-bottom.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import ContentScaleControls from './components/ContentScaleControls.vue'
+import PresenterAccess from './components/PresenterAccess.vue'
+import SlideScrollFallback from './components/SlideScrollFallback.vue'
+import SmartImages from './components/SmartImages.vue'
+</script>
+
+<template>
+  <SmartImages />
+  <ContentScaleControls />
+  <SlideScrollFallback />
+  <PresenterAccess />
+</template>

packages/slidev-theme-easy-jyy/layouts/center.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-center">
+    <slot />
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/cover.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-cover">
+    <slot />
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-default">
+    <slot />
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/image-auto.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { resolveImageSource } from '../utils/resolve-image'
+
+type ImagePlacement = 'auto' | 'left' | 'right' | 'top' | 'bottom'
+
+const props = withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+  imagePlacement?: ImagePlacement
+}>(), {
+  imageFit: 'contain',
+  imagePosition: 'center',
+  imagePlacement: 'auto',
+})
+
+const imagePane = ref<HTMLElement>()
+const detectedPlacement = ref<Exclude<ImagePlacement, 'auto'>>('right')
+let observedImage: HTMLImageElement | undefined
+let observer: MutationObserver | undefined
+
+const placement = computed(() => props.imagePlacement === 'auto'
+  ? detectedPlacement.value
+  : props.imagePlacement)
+
+function detectPlacement() {
+  const image = imagePane.value?.querySelector<HTMLImageElement>('img')
+  if (!image)
+    return
+
+  if (observedImage !== image) {
+    observedImage?.removeEventListener('load', detectPlacement)
+    observedImage = image
+    observedImage.addEventListener('load', detectPlacement)
+  }
+
+  if (image.naturalWidth > 0 && image.naturalHeight > 0)
+    detectedPlacement.value = image.naturalWidth / image.naturalHeight >= 1.6 ? 'bottom' : 'right'
+}
+
+onMounted(async () => {
+  await nextTick()
+  detectPlacement()
+  if (imagePane.value) {
+    observer = new MutationObserver(detectPlacement)
+    observer.observe(imagePane.value, { childList: true, subtree: true })
+  }
+})
+
+onBeforeUnmount(() => {
+  observedImage?.removeEventListener('load', detectPlacement)
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <div
+    class="slidev-layout easy-layout-image-split easy-layout-image-auto"
+    :class="`easy-image-${placement}`"
+  >
+    <div class="easy-image-content"><slot /></div>
+    <div ref="imagePane" class="easy-image-pane">
+      <slot name="image">
+        <img
+          v-if="image"
+          :src="resolveImageSource(image)"
+          alt=""
+          :style="{ objectFit: imageFit, objectPosition: imagePosition }"
+        >
+      </slot>
+    </div>
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/image-full.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { resolveImageSource } from '../utils/resolve-image'
+
+withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+}>(), {
+  imageFit: 'cover',
+  imagePosition: 'center',
+})
+</script>
+
+<template>
+  <div class="slidev-layout easy-layout-image-full">
+    <slot name="image">
+      <img v-if="image" :src="resolveImageSource(image)" alt="" :style="{ objectFit: imageFit, objectPosition: imagePosition }">
+    </slot>
+    <div class="easy-image-overlay"><slot /></div>
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/image-left.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { resolveImageSource } from '../utils/resolve-image'
+
+withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+}>(), {
+  imageFit: 'contain',
+  imagePosition: 'center',
+})
+</script>
+
+<template>
+  <div class="slidev-layout easy-layout-image-split easy-image-left">
+    <div class="easy-image-content"><slot /></div>
+    <div class="easy-image-pane">
+      <slot name="image">
+        <img v-if="image" :src="resolveImageSource(image)" alt="" :style="{ objectFit: imageFit, objectPosition: imagePosition }">
+      </slot>
+    </div>
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/image-right.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { resolveImageSource } from '../utils/resolve-image'
+
+withDefaults(defineProps<{
+  image?: string
+  imageFit?: string
+  imagePosition?: string
+}>(), {
+  imageFit: 'contain',
+  imagePosition: 'center',
+})
+</script>
+
+<template>
+  <div class="slidev-layout easy-layout-image-split easy-image-right">
+    <div class="easy-image-content"><slot /></div>
+    <div class="easy-image-pane">
+      <slot name="image">
+        <img v-if="image" :src="resolveImageSource(image)" alt="" :style="{ objectFit: imageFit, objectPosition: imagePosition }">
+      </slot>
+    </div>
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/quote.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-quote">
+    <slot />
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/section.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="slidev-layout easy-layout-section">
+    <slot />
+  </div>
+</template>

packages/slidev-theme-easy-jyy/layouts/two-cols.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="slidev-layout easy-layout-two-cols">
+    <slot />
+    <div class="easy-two-cols-grid">
+      <div><slot name="left" /></div>
+      <div><slot name="right" /></div>
+    </div>
+  </div>
+</template>

packages/slidev-theme-easy-jyy/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "slidev-theme-easy-jyy",
+  "version": "0.2.0",
+  "description": "JYY-inspired presentation theme for easy-slides and Slidev",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "keywords": ["slidev-theme", "slidev"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.12.0",
+    "slidev": ">=52.0.0"
+  },
+  "slidev": {
+    "defaults": {
+      "aspectRatio": "4/3",
+      "canvasWidth": 1024,
+      "colorSchema": "light",
+      "fonts": {
+        "sans": "Lato,Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif",
+        "mono": "Inconsolata,JetBrains Mono,Fira Code,monospace",
+        "serif": "Noto Serif SC,STKaiti,KaiTi,serif"
+      }
+    }
+  },
+  "dependencies": {
+    "@slidev/client": "52.19.1",
+    "@slidev/types": "52.19.1",
+    "markdown-it-attrs": "4.3.1"
+  }
+}

packages/slidev-theme-easy-jyy/setup/markdown.ts

@@ -0,0 +1,8 @@
+import { defineMarkdownSetup } from '@slidev/types'
+import markdownItAttrs from 'markdown-it-attrs'
+
+export default defineMarkdownSetup(() => ({
+  markdownItSetup(md) {
+    md.use(markdownItAttrs)
+  },
+}))

packages/slidev-theme-easy-jyy/styles/base.css

@@ -0,0 +1,233 @@
+:root {
+  --easy-accent: #1d4ed8;
+  --easy-accent-dark: #1e40af;
+  --easy-accent-soft: #eff6ff;
+  --easy-ink: #222;
+  --easy-muted: #666;
+  --easy-border: #ddd;
+  --easy-code-bg: #eee;
+  --easy-code-font-size: 28px;
+  --easy-table-font-size: 30px;
+  --easy-table-padding-x: 14px;
+  --easy-table-padding-y: 10px;
+  --easy-slide-padding-x: 52px;
+  --easy-slide-padding-y: 42px;
+  --easy-presenter-note-size: 20px;
+}
+
+.easy-table-sm {
+  --easy-table-font-size: 24px;
+  --easy-table-padding-x: 10px;
+  --easy-table-padding-y: 7px;
+}
+
+.easy-table-md {
+  --easy-table-font-size: 30px;
+  --easy-table-padding-x: 14px;
+  --easy-table-padding-y: 10px;
+}
+
+.easy-table-lg {
+  --easy-table-font-size: 36px;
+  --easy-table-padding-x: 18px;
+  --easy-table-padding-y: 13px;
+}
+
+.easy-code-sm { --easy-code-font-size: 22px; }
+.easy-code-md { --easy-code-font-size: 28px; }
+.easy-code-lg { --easy-code-font-size: 34px; }
+
+.easy-code-height-sm { --easy-code-height: 180px; }
+.easy-code-height-md { --easy-code-height: 300px; }
+.easy-code-height-lg { --easy-code-height: 420px; }
+
+.slidev-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: var(--easy-slide-padding-y) var(--easy-slide-padding-x);
+  overflow: hidden;
+  border: 1.5px solid var(--easy-border);
+  border-radius: 7px;
+  background: #fff;
+  color: var(--easy-ink);
+  text-align: left;
+  font-family: Lato, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 32px;
+  font-weight: 300;
+  line-height: 1.42;
+}
+
+.slidev-layout h1,
+.slidev-layout h2,
+.slidev-layout h3,
+.slidev-layout h4 {
+  color: var(--easy-ink);
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.15;
+}
+
+.slidev-layout h1 {
+  margin: 0 0 26px;
+  font-size: 60px;
+}
+
+.slidev-layout h2 {
+  margin: 0 0 28px;
+  padding-bottom: 8px;
+  border-bottom: 3px solid var(--easy-accent);
+  font-size: 48px;
+}
+
+.slidev-layout h3 {
+  margin: 20px 0 14px;
+  font-size: 38px;
+}
+
+.slidev-layout p,
+.slidev-layout ul,
+.slidev-layout ol {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+
+.slidev-layout ul,
+.slidev-layout ol {
+  display: block;
+  padding-left: 1.2em;
+}
+
+.slidev-layout li + li {
+  margin-top: 10px;
+}
+
+.slidev-layout a {
+  color: var(--easy-accent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: .13em;
+}
+
+.slidev-layout strong {
+  font-weight: 700;
+}
+
+.slidev-layout blockquote {
+  margin: 24px 0;
+  padding: 4px 0 4px 24px;
+  border-left: 5px solid var(--easy-accent);
+  color: #1e3a5f;
+  font-family: "Noto Serif SC", STKaiti, KaiTi, serif;
+  font-style: normal;
+}
+
+.slidev-layout code {
+  font-family: Inconsolata, "JetBrains Mono", "Fira Code", monospace;
+}
+
+.slidev-layout :not(pre) > code {
+  border-radius: 5px;
+  background: var(--easy-accent-soft);
+  color: var(--easy-accent-dark);
+  padding: .08em .28em;
+  font-size: .86em;
+}
+
+.slidev-layout pre {
+  box-sizing: border-box;
+  height: var(--easy-code-height, var(--easy-code-auto-height, auto));
+  max-height: var(--easy-code-height, var(--easy-code-auto-max-height, var(--easy-code-auto-height, none)));
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: 10px;
+  background: var(--easy-code-bg);
+  padding: 18px 20px;
+  font-size: var(--easy-code-scaled-font-size, var(--easy-code-font-size)) !important;
+  line-height: 1.38 !important;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.slidev-layout pre code,
+.slidev-layout pre code .line {
+  min-width: 0 !important;
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+.slidev-layout table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--easy-table-font-size);
+}
+
+.slidev-layout th,
+.slidev-layout td {
+  padding: var(--easy-table-padding-y) var(--easy-table-padding-x);
+  border-bottom: 1px solid #d5d5d5;
+}
+
+.slidev-layout th {
+  background: #eee;
+  font-weight: 600;
+}
+
+.slidev-layout tr:nth-child(even) {
+  background: #f7faff;
+}
+
+.slidev-layout img {
+  display: block;
+  max-width: 100%;
+  max-height: 60vh;
+  margin: 16px auto;
+  object-fit: contain;
+}
+
+.slidev-layout p:has(> img:only-child) {
+  display: grid;
+  place-items: center;
+  min-height: 46vh;
+  margin: 8px 0;
+}
+
+.slidev-layout p:has(> img:only-child) > img {
+  width: 100%;
+  height: 46vh;
+  max-height: 60vh;
+  margin: 0;
+  object-fit: contain;
+}
+
+.slidev-layout img[fit="cover"] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.slidev-layout img[fit="fill"] { object-fit: fill; }
+.slidev-layout img[fit="scale-down"] { object-fit: scale-down; }
+.slidev-layout img[fit="none"] { object-fit: none; }
+
+.slidev-layout .katex-display,
+.slidev-layout .mermaid {
+  max-width: 100%;
+  max-height: 60vh;
+  overflow: auto;
+}
+
+.slidev-page-number {
+  border-radius: 5px;
+  background: rgba(0, 0, 0, .26);
+  padding: 3px 9px;
+  color: #fff;
+  font-size: 18px;
+}
+
+@media (max-width: 760px) {
+  :root {
+    --easy-slide-padding-x: 34px;
+    --easy-slide-padding-y: 30px;
+  }
+}

packages/slidev-theme-easy-jyy/styles/content.css

@@ -0,0 +1,69 @@
+/* Shared content utilities for course and technical decks. */
+.slidev-layout .lead {
+  color: var(--easy-accent);
+  font-size: 1.16em;
+  line-height: 1.35;
+}
+
+.slidev-layout .muted {
+  color: var(--easy-muted);
+  font-size: .72em;
+}
+
+.slidev-layout .compact,
+.slidev-layout.compact {
+  font-size: 27px;
+}
+
+.slidev-layout .compact li + li,
+.slidev-layout.compact li + li {
+  margin-top: 6px;
+}
+
+.slidev-layout .outline {
+  list-style: none;
+  margin: 22px 0 0;
+  padding: 0;
+}
+
+.slidev-layout .outline > li {
+  margin: 12px 0;
+  padding-left: 22px;
+  border-left: 5px solid #ddd;
+}
+
+.slidev-layout .outline .current {
+  border-left-color: var(--easy-accent);
+  color: var(--easy-accent);
+  font-weight: 600;
+}
+
+.slidev-layout .source-figure {
+  width: 100%;
+  max-height: 56vh;
+  object-fit: contain;
+}
+
+.slidev-layout .course-table {
+  font-size: 21px;
+  line-height: 1.2;
+}
+
+.slidev-layout .course-table th,
+.slidev-layout .course-table td {
+  padding: 6px 9px;
+}
+
+.slidev-layout .v-word {
+  color: var(--easy-accent);
+  font-size: 1.22em;
+  font-weight: 600;
+}
+
+.easy-layout-cover .cover-identity {
+  width: 68%;
+  height: 20vh;
+  margin: 22px 0 0;
+  object-fit: contain;
+  object-position: left center;
+}

packages/slidev-theme-easy-jyy/styles/index.ts

@@ -0,0 +1,4 @@
+import './base.css'
+import './content.css'
+import './layouts.css'
+import './presenter.css'

packages/slidev-theme-easy-jyy/styles/layouts.css

@@ -0,0 +1,283 @@
+.easy-layout-center,
+.easy-layout-section,
+.easy-layout-cover {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.easy-layout-center {
+  align-items: center;
+  text-align: center;
+}
+
+.easy-layout-center h1,
+.easy-layout-center h2 {
+  text-align: center;
+}
+
+.easy-layout-cover h1 {
+  margin-bottom: 28px;
+  font-size: 68px;
+}
+
+.easy-layout-cover blockquote {
+  border: 0;
+  padding: 0;
+  color: var(--easy-accent);
+}
+
+.easy-layout-section h1,
+.easy-layout-section h2 {
+  max-width: 980px;
+}
+
+.easy-layout-quote {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.easy-layout-quote blockquote {
+  border: 0;
+  padding: 0;
+  color: var(--easy-accent);
+  font-size: 46px;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.easy-layout-two-cols {
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.easy-layout-two-cols .easy-two-cols-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 46px;
+  min-height: 0;
+}
+
+.easy-layout-image-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 42px;
+}
+
+.easy-layout-image-split.easy-image-left .easy-image-pane { order: -1; }
+
+.easy-layout-image-auto.easy-image-top,
+.easy-layout-image-auto.easy-image-bottom {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 22px;
+}
+
+.easy-layout-image-auto.easy-image-top .easy-image-pane { order: -1; }
+
+.easy-image-pane {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  place-items: center;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.easy-image-pane img {
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0;
+}
+
+.easy-content-scale-host {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+
+.easy-content-table-host {
+  width: 100%;
+  overflow: auto;
+}
+
+.easy-content-code-host {
+  width: 100%;
+  margin-bottom: 0 !important;
+}
+
+.easy-image-preview-trigger {
+  cursor: zoom-in;
+}
+
+.easy-image-preview-trigger:focus-visible {
+  outline: 3px solid var(--easy-accent);
+  outline-offset: 4px;
+}
+
+.easy-image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  place-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  padding: clamp(16px, 4vmin, 42px);
+  overflow: hidden;
+  overscroll-behavior: contain;
+  background: rgba(0, 0, 0, .92);
+}
+
+.easy-image-lightbox-preview {
+  display: block;
+  place-self: center;
+  min-width: 0;
+  min-height: 0;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  margin: 0;
+  object-fit: contain;
+  object-position: center;
+}
+
+.easy-image-lightbox-close {
+  position: absolute;
+  top: 18px;
+  right: 22px;
+  display: grid;
+  width: 46px;
+  height: 46px;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, .5);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, .55);
+  color: #fff;
+  padding: 0 0 4px;
+  font: 300 38px/1 Arial, sans-serif;
+  cursor: pointer;
+}
+
+.easy-image-lightbox-close:hover,
+.easy-image-lightbox-close:focus-visible {
+  border-color: #fff;
+  background: var(--easy-accent);
+  outline: none;
+}
+
+.easy-content-scale-toolbar {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 30;
+  display: flex;
+  gap: 3px;
+  padding: 4px;
+  border: 1px solid rgba(180, 180, 180, .9);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, .94);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
+  opacity: 0;
+  transition: opacity .14s ease;
+}
+
+.easy-content-scale-host:hover > .easy-content-scale-toolbar,
+.easy-content-scale-host:focus-within > .easy-content-scale-toolbar {
+  opacity: 1;
+}
+
+.easy-content-scale-button {
+  min-width: 32px;
+  border: 0;
+  border-radius: 5px;
+  background: #eee;
+  color: #222;
+  padding: 6px 8px;
+  font: 600 14px/1 Lato, "Noto Sans SC", sans-serif;
+  cursor: pointer;
+}
+
+.easy-content-scale-button:hover,
+.easy-content-scale-button:focus-visible {
+  background: var(--easy-accent);
+  color: #fff;
+  outline: none;
+}
+
+.easy-content-scale-reset {
+  min-width: 52px;
+}
+
+.easy-content-code-host > .easy-content-scale-toolbar {
+  right: 48px;
+}
+
+body.easy-slide-scroll-fallback .slidev-layout {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--easy-accent) 65%, transparent) transparent;
+}
+
+.easy-image-content {
+  min-width: 0;
+  align-self: center;
+}
+
+.easy-layout-image-full {
+  padding: 0;
+}
+
+.easy-layout-image-full > img {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+}
+
+.easy-layout-image-full .easy-image-overlay {
+  position: absolute;
+  inset: auto 0 0;
+  padding: 46px 54px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
+  color: #fff;
+}
+
+.easy-layout-image-full .easy-image-overlay :is(h1, h2, h3, p) {
+  color: inherit;
+}
+
+@media (max-aspect-ratio: 4 / 3) {
+  .easy-layout-two-cols .easy-two-cols-grid,
+  .easy-layout-image-split {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 22px;
+  }
+}
+
+@media (hover: none) {
+  .easy-content-scale-toolbar { opacity: .78; }
+}
+
+@media print {
+  .easy-content-scale-toolbar,
+  .easy-image-lightbox { display: none !important; }
+
+  body.easy-slide-scroll-fallback .slidev-layout { overflow: hidden !important; }
+}

packages/slidev-theme-easy-jyy/styles/presenter.css

@@ -0,0 +1,143 @@
+.easy-presenter-gate {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  display: none;
+  width: 100vw;
+  height: 100dvh;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  place-items: center;
+  overflow: auto;
+  background: #f6f5f2;
+  color: #222;
+  font-family: Lato, "Noto Sans SC", "PingFang SC", sans-serif;
+}
+
+.easy-presenter-gate[open] {
+  display: grid;
+}
+
+.easy-presenter-gate::backdrop {
+  background: #f6f5f2;
+}
+
+body.easy-presenter-locked {
+  overflow: hidden;
+}
+
+.easy-presenter-dialog {
+  width: min(440px, calc(100vw - 40px));
+  border: 1px solid #d8d4d7;
+  border-top: 4px solid var(--easy-accent);
+  border-radius: 9px;
+  background: #fff;
+  padding: 34px;
+  box-shadow: 0 20px 70px rgba(45, 26, 42, .14);
+}
+
+.easy-presenter-dialog h1 {
+  margin: 0 0 10px;
+  font-size: 30px;
+}
+
+.easy-presenter-dialog p {
+  color: #666;
+  line-height: 1.55;
+}
+
+.easy-presenter-dialog form {
+  display: flex;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.easy-presenter-dialog input {
+  min-width: 0;
+  flex: 1;
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  padding: 11px 12px;
+  font: inherit;
+}
+
+.easy-presenter-dialog button,
+.easy-presenter-tools button,
+.easy-presenter-launcher {
+  border: 0;
+  border-radius: 6px;
+  background: var(--easy-accent);
+  color: #fff;
+  padding: 10px 14px;
+  font: 600 14px/1.1 Lato, "Noto Sans SC", sans-serif;
+  cursor: pointer;
+}
+
+.easy-presenter-error {
+  color: #a21d32 !important;
+  font-weight: 600;
+}
+
+.easy-presenter-launcher {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 60;
+  opacity: .22;
+  transition: opacity .16s ease;
+}
+
+.easy-presenter-launcher:hover,
+.easy-presenter-launcher:focus-visible {
+  opacity: 1;
+}
+
+.easy-presenter-tools {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  z-index: 1000;
+  display: flex;
+  gap: 6px;
+  padding: 6px;
+  border: 1px solid #d4d0d3;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .94);
+  box-shadow: 0 5px 22px rgba(0, 0, 0, .12);
+}
+
+.easy-presenter-tools button {
+  min-width: 34px;
+  background: #eee9ed;
+  color: #351231;
+  padding: 8px 10px;
+}
+
+.easy-presenter-tools button:last-child {
+  background: #5d1357;
+  color: #fff;
+}
+
+@media (max-width: 680px) {
+  .easy-presenter-tools {
+    right: auto;
+    left: 12px;
+  }
+}
+
+body.easy-presenter-active :is(.presenter-notes, [class*="presenter"] [class*="notes"], [class*="presenter"] [class*="note"] p) {
+  font-size: var(--easy-presenter-note-size) !important;
+  line-height: 1.65 !important;
+}
+
+body.easy-notes-contrast :is(.presenter-notes, [class*="presenter"] [class*="notes"], [class*="presenter"] [class*="note"]) {
+  background: #050505 !important;
+  color: #fff !important;
+}
+
+body.easy-notes-contrast :is(.presenter-notes, [class*="presenter"] [class*="notes"], [class*="presenter"] [class*="note"]) * {
+  color: inherit !important;
+}

packages/slidev-theme-easy-jyy/utils/resolve-image.ts

@@ -0,0 +1,15 @@
+const deckBase = (import.meta as ImportMeta & { env: { BASE_URL: string } }).env.BASE_URL
+
+export function resolveImageSource(source: string | undefined, base = deckBase) {
+  if (!source || isAbsoluteSource(source))
+    return source
+
+  const normalizedBase = base.endsWith('/') ? base : `${base}/`
+  return `${normalizedBase}${source.replace(/^\.\//, '')}`
+}
+
+function isAbsoluteSource(source: string) {
+  return source.startsWith('/')
+    || source.startsWith('#')
+    || /^[a-z][a-z\d+.-]*:/i.test(source)
+}