// RouterConfig 类型约束 Vue Router 的可配置对象
import type { RouterConfig } from '@nuxt/schema'

// 可查看 Vue Router 的官方文档了解有哪些可配置项
// 参考 https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig> {
  // 配置对象具有属性 routes，其值是一个函数
  // 该函数的入参 _route 是 Nuxt 自动扫描 `pages` 目录里的文件所生成的路由对象
  // 它作为默认路由
  // 根据返回值可以覆写或扩展默认路由（Nuxt 自动扫描 `pages` 目录里的文件所生成的路由）
  // * 如果其返回值是一个数组，其中每个元素都对应一个路由，则以这些路由覆盖默认路由
  // * 如果返回 null 或 undefined 则采用默认路由
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('~/pages/home.vue')
    }
  ],
}

export default defineNuxtConfig({
  hooks: {
    // 为 pages:extend 设置钩子函数
    // 入参是根据 `pages` 目录里的文件自动创建的路由对象（数组）
    'pages:extend' (pages) {
      // 向原有的路由数组中添加 push 一个新的路由
      pages.push({
        name: 'profile',
        path: '/profile',
        component: () => import('~/pages/profile.vue')
      })

      // 删除与规则匹配的路由/页面
      function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
        const pagesToRemove = [] // 记录需要移除的路由/页面
        for (const page of pages) {
          // 如果该路由对应的就是一个页面
          if (pattern.test(page.file)) {
            pagesToRemove.push(page)
          } else {
            // 因为路由可能是嵌套路由，具有 children 属性
            // 则递归调用该方法
            // 以移除嵌套路里符合条件的页面 ❓
            removePagesMatching(pattern, page.children)
          }
        }
        for (const page of pagesToRemove) {
          // 移除相应的路由
          pages.splice(pages.indexOf(page), 1)
        }
      }
      // 删除通过 .ts 文件所定义/创建的页面（文件名以 `.ts` 结尾）
      removePagesMatching(/\.ts$/, pages)
    }
  }
})

export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

<script setup>
definePageMeta({
  validate: async (route) => {
    // Check if the id is made up of digits
    return /^\d+$/.test(route.params.id)
  }
})
</script>

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'page', // CSS 前缀
      mode: 'out-in' // 切换模式，旧元素先退出，新元素再进入
    }
  },
})

<template>
  <NuxtPage />
</template>

<style>
/* 使用的前缀 page 是在 nuxt.config.ts 中所设置的 */
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

<script setup lang="ts">
definePageMeta({
  pageTransition: false
})
</script>

export default defineNuxtConfig({
  app: {
    layoutTransition: {
      name: 'layout', // CSS 前缀
      mode: 'out-in' // 切换模式，旧元素先退出，新元素再进入
    }
  },
})

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
/* 使用的前缀 layout 是在 nuxt.config.ts 中所设置的 */
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>

<script setup lang="ts">
definePageMeta({
  layout: 'orange',
  layoutTransition: {
    name: 'slide-in'
  }
})
</script>

<script setup lang="ts">
definePageMeta({
  layoutTransition: false
})
</script>

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    // 使用钩子函数在过渡的不同时期执行特定操作
    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {}
  }
})
</script>

<script setup lang="ts">
// 文件路径是 pages/[id].vue
definePageMeta({
  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },
  middleware (to, from) {
    // 根据目标路由对象 to 的参数 params.id，为目标页面动态设置过渡动效
    to.meta.pageTransition.name =
    +to.params.id > +from.params.id ? 'slide-left' : 'slide-right'
    // 如果从 id 数值较小的页面切换到较大的页面，则采用 slide-left 向左滑动的切换动效
    // 否则就采用 slide-right 向右滑动的切换动效
  }
})
</script>

<template>
  <h1>#{{ $route.params.id }}</h1>
</template>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}
/* 向左滑动 */
.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}
/* 向右滑动 */
.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}
</style>

// 为应用的所有网页设置头部信息的示例
export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
        // 生成标签 <meta name="viewport" content="width=device-width, initial-scale=1">
      ],
      script: [
        { src: 'https://awesome-lib.js' }
        // 生成标签 <script src="https://myawesome-lib.js"></script>
      ],
      link: [
        { rel: 'stylesheet', href: 'https://awesome-lib.css' }
        // 生成标签 <link rel="stylesheet" href="https://myawesome-lib.css">
      ],
      // please note that this is an area that is likely to change
      style: [
        { children: ':root { color: red }', type: 'text/css' }
        // 生成标签 <style type="text/css">:root { color: red }</style>
      ]
    }
  }
})

<script setup>
useHead({
  // 设置网页的标题模板，基于原有的网页标题进行更改
  // 其中 `%s` 是占位符，最终会用页面的原始标题 title 取代
  titleTemplate: 'My App - %s', // or, (title) => `My App - ${title}`
  // 设置 <meta name="viewport" ...> 标签
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  // 设置 <meta charset="UTF-8"> 标签
  charset: 'utf-8',
  // 添加 <meta> 标签
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  // 为 <body> 添加类名
  bodyAttrs: {
    class: 'test'
  }
})
</script>

<script setup lang="ts">
useServerSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

<script setup lang="ts">
// 先异步获取数据
const data = useFetch(() => $fetch('/api/example'))

// 再基于数据设置 SEO 信息
useServerSeoMeta({
  ogTitle: () => `${data.value?.title} - My Site`,
  description: () => data.value?.description,
  ogDescription: () => data.value?.description,
})
</script>

<script setup>
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
    </Head>
  </div>
</template>

<template>
  <button @click="handleError">Clear errors</button>
</template>

<script setup>
const props = defineProps({
  error: Object
})

// 在开发时，根据错误信息排除了 bug 后
// 可以调用方法 clearError() 清除错误信息，并重定向到指定的页面，离开错误信息提示页面
const handleError = () => clearError({
  redirect: '/'
})
</script>

// layer 的配置文件
import { createResolver } from '@nuxt/kit'

// 基于当前模块的路径 import.meta.url 创建一个路径解析器
const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  css: [
    // 通过路径解析器将相对路径转换为完整的路径
    resolve('./assets/main.css')
  ]
})

export default defineNuxtModule({
  setup(_options, nuxt) {
    for (const layer of nuxt.options._layers) {
      // You can check for a custom directory existence to extend for each layer
      console.log('Custom extension for', layer.cwd, layer.config)
    }
  }
})