FranklinWH-wiki/docs/.vitepress/theme/index.ts

import { defineClientComponent, type Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme'
import Layout from './Layout.vue'
import './index.css';

import { 
  ServerUrl, 
  ClientId, 
  AppName, 
  OrganizationName,
  RedirectPath
} from '../plugins/casdoor/config'

// about Naive UI
import { App, defineComponent, h, inject, onMounted, watch, nextTick } from 'vue'
import { setup } from '@css-render/vue3-ssr'
import { NConfigProvider } from 'naive-ui'
import { useRoute } from 'vitepress'

const CssRenderStyle = defineComponent({
  setup() {
    const collect = inject<() => string>('css-render-collect')
    return {
      style: collect ? collect() : ''
    }
  },
  render() {
    return h('css-render-style', {
      innerHTML: this.style
    })
  }
})

const VitepressPath = defineComponent({
  setup() {
    const route = useRoute()
    return () => {
      return h('vitepress-path', null, [route.path])
    }
  }
})

const SseListener = defineClientComponent(() => {
  return import('./components/SseListener.vue')
})

const NaiveUIProvider = defineComponent({
  render() {
    return h(
      NConfigProvider,
      { abstract: true, inlineThemeDisabled: true },
      {
        default: () => [
          import.meta.env.DEV ? null : h(SseListener),  // <-- SSE 监听组件
          h(Layout, null, { default: this.$slots.default?.() }),
          import.meta.env.SSR ? [
            h(CssRenderStyle), 
            h(VitepressPath)
          ] : null
        ]
      }
    )
  }
})

import mediumZoom from 'medium-zoom'
// import type { Zoom } from 'medium-zoom'
// let zoomInstance : Zoom | undefined = undefined

function pictureZoom() {
  const route = useRoute();
  const initZoom = () => {
    // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); // 默认
    // mediumZoom('.main img', { background: 'var(--vp-c-bg)' }); // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
    // 除a标签以下的所有图像都进行缩放
    // mediumZoom(':not(a) > img:not(.VPImage)', { background: 'var(--vp-c-bg)' }); // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
    mediumZoom('.VPDoc img', { background: 'var(--vp-c-bg)' });
  };
  onMounted(() => {
    initZoom();
  });
  watch(
    () => route.path,
    () => nextTick(() => initZoom())
  );
}

/** @type {import('vitepress').Theme} */
export default {
  Layout: NaiveUIProvider,
  async enhanceApp({ app }: { app: App }) {
    if (import.meta.env.SSR) {
      const { collect } = setup(app)
      app.provide('css-render-collect', collect)
    } else {

      // SDK
      // import CasdoorPlugin, { SdkConfig } from './sdk/casdoor'
      const casdoor = await import('casdoor-vue-sdk')

      app.use(casdoor.default, {
        serverUrl: ServerUrl,
        clientId: ClientId,
        appName: AppName,
        organizationName: OrganizationName,
        redirectPath: RedirectPath
      })

      // Component
      const Waline = await import('./components/Waline.vue')
      const CasdoorCallback = await import('./components/CasdoorCallback.vue')
      const ParameterTable = await import('./components/ParameterTable.vue')
      const SimpleTable = await import('./components/SimpleTable.vue')
      const NormalTable = await import('./components/NormalTable.vue')
      const PdfViewer = await import('./components/PdfViewer.vue')
      const SecurePdfViewer = await import('./components/SecurePdfViewer.vue')
      const FilterComponent = await import('./components/FilterComponent.vue')
      const ExcalidrawView = await import('./components/ExcalidrawView.vue')

      // 注册自定义全局组件
      // app.component('...', ...)
      // app.component('SseListener', SseListener) // 全局监听SSE
      app.component('Waline', Waline.default) // 评率组件
      app.component('CasdoorCallback', CasdoorCallback.default)
      app.component('ParameterTable', ParameterTable.default)
      app.component('SimpleTable', SimpleTable.default)
      app.component('NormalTable', NormalTable.default)
      app.component('PdfViewer', PdfViewer.default)
      app.component('SecurePdfViewer', SecurePdfViewer.default)
      app.component('FilterComponent', FilterComponent.default)
      app.component('ExcalidrawView', ExcalidrawView.default)
    }
  },
  setup() {
    pictureZoom()
  },
  extends: DefaultTheme
} satisfies Theme