FranklinWH-wiki/docs/.vitepress/theme/Layout.vue

<template>
  <Layout v-if="showLayout">
    <template #doc-after> <!-- 正文插槽 -->
      <ClientOnly>
        <!-- 页面正文之后插入评论 -->
        <Waline v-if="showWaline" ref="walineRef" />
      </ClientOnly>
    </template>
    <template #nav-bar-content-after>
      <div style="margin-left: 15px">
        <n-dropdown :options="personOptions" @select="handlePersonSelect">
          <n-button text style="display: flex; justify-content: center" >
            <template #icon>
              <n-icon><PersonIcon /></n-icon>
            </template>
          </n-button>
        </n-dropdown>
      </div>
    </template>
  </Layout>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, Component, h } from 'vue'
import { useRouter, useRoute, withBase } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { createDiscreteApi, NButton, NIcon, NDropdown, DropdownOption } from 'naive-ui'
import { Exit as ExitIcon, Person as PersonIcon } from '@vicons/ionicons5'
import { useCasdoor } from 'casdoor-vue-sdk'
import type Waline from './components/Waline.vue'
import { setWalineUserInfoFromToken } from '../plugins/waline'

function renderIcon(icon: Component) {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon)
    })
  }
}

const walineRef = ref<InstanceType<typeof Waline> | undefined>(undefined)
const personOptions = ref([
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(ExitIcon)
  }
])

const { Layout } = DefaultTheme

const route = useRoute()
const router = useRouter()

let islogin = false

if (!islogin && import.meta.env.DEV) {
  console.log('开发环境');
  islogin = true;
}

console.log({env: import.meta.env});

const showLayout = ref(false)
const showWaline = ref(false)

const { dialog, massage } = createDiscreteApi(["dialog", "massage"])
const casdoorSdk = useCasdoor()

console.log("route: ", route)

function renderLayout(pathname: string) {
  if (!islogin && !pathname.startsWith(withBase('/casdoor/'))) {
    // 查询登录状态
    fetch<string>(withBase('/api/islogin'), {
      method: "GET",
      credentials: "include"
    }).then(async res => {
      // 已登录
      const token = await res.text()
      // 尝试提取用户信息
      setWalineUserInfoFromToken(token)
      
      islogin = true
      showLayout.value = true
    }).catch(err => {
      console.error("未登录")
      console.error(err)

      // 跳转到登录页面
      const signinUrl = casdoorSdk.getSigninUrl()
      window.location.href = signinUrl.replace(/^https?:\/\/[^/]+/, '')
    })
  } else if (islogin || pathname.startsWith(withBase('/casdoor/'))) {
    showLayout.value = true
  } else {
    showLayout.value = false
  }
}

function renderWaline(pathname: string) {
  // Casdoor，不加载waline
  if (pathname.startsWith(withBase('/casdoor/'))) {
    showWaline.value = false
  } else {
    if (showWaline.value) {
      // 更新waline
      walineRef.value?.update()
    } else {
      showWaline.value = true
    }
  }
}

onMounted(async () => {
  const url = new URL(window.location.href)
  const pathname = url.pathname
  console.log("url: ", url)
  console.log("pathname: ", pathname)
  renderLayout(pathname)
  renderWaline(pathname)

  watch(
    () => route.path,
    (newPath, oldPath) => {
      console.log('📦 路由变化:', oldPath, '➡️', newPath)
      renderWaline(pathname)
      renderLayout(pathname)
    }
  )
})

const handlePersonSelect = (key: string | number, option: DropdownOption) => {
  if (key === 'logout') {
    handleExitClick()
  }
}

const handleExitClick = async () => {
  dialog.warning({
    title: '提示',
    content: '确定要退出登录？',
    positiveText: '确定',
    negativeText: '取消',
    draggable: true,
    onPositiveClick: async () => {
      // 请求登出
      await fetch(withBase('/api/exit'), {
        method: "POST",
        credentials: "include"
      }).then(res => {
        const text = res.text()
        console.log(text)

        islogin = false

        const signinUrl = casdoorSdk.getSigninUrl()
        // 跳转到登录页面
        window.location.href = signinUrl.replace(/^https?:\/\/[^/]+/, '')
      }).catch(err => {
        massage.error("登出失败")
        console.error("登出失败")
        console.error(err)
      })
    },
    onNegativeClick: () => {
      return
    }
  })
}

</script>

<style lang="css">
.vp-doc h5 {
  margin: 24px 0 0;
  letter-spacing: -0.01em;
}

/* 禁止选中内容（禁止复制） */
.vp-doc {
  user-select: none;  /* 禁止选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
</style>