Add SEO metadata and security headers

src/lib/cloudTypes.ts

@@ -0,0 +1,17 @@
+export const CLOUD_TYPES = [
+  { id: 1, name: '积云', nameEn: 'Cumulus' },
+  { id: 2, name: '层云', nameEn: 'Stratus' },
+  { id: 3, name: '卷云', nameEn: 'Cirrus' },
+  { id: 4, name: '积雨云', nameEn: 'Cumulonimbus' },
+  { id: 5, name: '层积云', nameEn: 'Stratocumulus' },
+  { id: 6, name: '高积云', nameEn: 'Altocumulus' },
+  { id: 7, name: '高层云', nameEn: 'Altostratus' },
+  { id: 8, name: '雨层云', nameEn: 'Nimbostratus' },
+  { id: 9, name: '卷层云', nameEn: 'Cirrostratus' },
+  { id: 10, name: '卷积云', nameEn: 'Cirrocumulus' },
+] as const
+
+export function getCloudTypeName(id: string | string[]) {
+  const cloudTypeId = Number(Array.isArray(id) ? id[0] : id)
+  return CLOUD_TYPES.find(item => item.id === cloudTypeId)?.name ?? '云型详情'
+}

src/lib/seo.ts

@@ -0,0 +1,63 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+const defaultTitle = 'OpenCloud'
+const defaultDescription = 'OpenCloud - 活的天空地图，拍云、识别、收藏'
+
+function resolveSiteUrl() {
+  return (import.meta.env.VITE_SITE_URL || window.location.origin).replace(/\/$/, '')
+}
+
+function upsertMeta(name: string, content: string) {
+  let element = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`)
+  if (!element) {
+    element = document.createElement('meta')
+    element.name = name
+    document.head.appendChild(element)
+  }
+  element.content = content
+}
+
+function upsertPropertyMeta(property: string, content: string) {
+  let element = document.querySelector<HTMLMetaElement>(`meta[property="${property}"]`)
+  if (!element) {
+    element = document.createElement('meta')
+    element.setAttribute('property', property)
+    document.head.appendChild(element)
+  }
+  element.content = content
+}
+
+function upsertCanonical(href: string) {
+  let element = document.querySelector<HTMLLinkElement>('link[rel="canonical"]')
+  if (!element) {
+    element = document.createElement('link')
+    element.rel = 'canonical'
+    document.head.appendChild(element)
+  }
+  element.href = href
+}
+
+export function applyRouteSeo(route: RouteLocationNormalizedLoaded) {
+  const title = typeof route.meta.title === 'function' ? route.meta.title(route) : route.meta.title
+  const description = typeof route.meta.description === 'function' ? route.meta.description(route) : route.meta.description
+  const robots = route.meta.noindex ? 'noindex, nofollow' : 'index, follow'
+  const canonicalPath = route.meta.canonicalPath || route.path
+  const canonical = `${resolveSiteUrl()}${canonicalPath}`
+  const pageTitle = title ? `${title} | OpenCloud` : defaultTitle
+  const pageDescription = description || defaultDescription
+
+  document.title = pageTitle
+  upsertMeta('description', pageDescription)
+  upsertMeta('robots', robots)
+  upsertCanonical(canonical)
+
+  upsertPropertyMeta('og:site_name', 'OpenCloud')
+  upsertPropertyMeta('og:type', 'website')
+  upsertPropertyMeta('og:title', pageTitle)
+  upsertPropertyMeta('og:description', pageDescription)
+  upsertPropertyMeta('og:url', canonical)
+
+  upsertMeta('twitter:card', 'summary')
+  upsertMeta('twitter:title', pageTitle)
+  upsertMeta('twitter:description', pageDescription)
+}