第5章：工程化与性能

<!-- components/ResponsiveImage.vue -->
<template>
  <picture>
    <source
      v-for="source in sources"
      :key="source.media"
      :media="source.media"
      :srcset="source.srcset"
      :type="source.type"
    />
    <img
      :src="fallbackSrc"
      :alt="alt"
      :loading="loading"
      :decoding="decoding"
      @load="onLoad"
      @error="onError"
    />
  </picture>
</template>

<script setup lang="ts">
interface Source {
  media: string
  srcset: string
  type?: string
}

interface Props {
  src: string
  alt: string
  loading?: 'lazy' | 'eager'
  decoding?: 'async' | 'sync' | 'auto'
  sizes?: string
}

const props = withDefaults(defineProps<Props>(), {
  loading: 'lazy',
  decoding: 'async'
})

// 生成响应式图片源
const sources = computed<Source[]>(() => {
  const baseSrc = props.src.replace(/\.(jpg|jpeg|png)$/, '')
  return [
    {
      media: '(min-width: 768px)',
      srcset: `${baseSrc}@2x.webp 2x, ${baseSrc}@1x.webp 1x`,
      type: 'image/webp'
    },
    {
      media: '(min-width: 768px)',
      srcset: `${baseSrc}@2x.jpg 2x, ${baseSrc}@1x.jpg 1x`
    }
  ]
})

const fallbackSrc = computed(() => {
  return props.src.replace(/\.(jpg|jpeg|png)$/, '@1x.$1')
})

const onLoad = () => {
  console.log('Image loaded successfully')
}

const onError = () => {
  console.error('Image failed to load')
}
</script>

<!-- pages/posts/index.vue -->
<template>
  <div>
    <h1>Posts</h1>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else>
      <article v-for="post in data" :key="post.id">
        <h2>{{ post.title }}</h2>
        <p>{{ post.excerpt }}</p>
      </article>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Post {
  id: number
  title: string
  excerpt: string
  content: string
}

// 基础数据获取
const { data, pending, error, refresh } = await useFetch<Post[]>('/api/posts')

// 带选项的数据获取
const { data: user } = await useFetch('/api/user', {
  key: 'user-profile',
  default: () => ({ name: '', email: '' }),
  transform: (data: any) => ({
    name: data.name,
    email: data.email
  })
})
</script>

<!-- pages/posts/[id].vue -->
<template>
  <div>
    <h1>{{ data?.title }}</h1>
    <div v-html="data?.content"></div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()

// 异步数据获取
const { data, pending, error } = await useAsyncData(
  `post-${route.params.id}`,
  () => $fetch(`/api/posts/${route.params.id}`),
  {
    server: true, // 服务端渲染
    default: () => null,
    transform: (data: any) => ({
      ...data,
      publishedAt: new Date(data.publishedAt)
    })
  }
)

// SEO 配置
useHead({
  title: computed(() => data.value?.title || 'Post'),
  meta: [
    { name: 'description', content: computed(() => data.value?.excerpt || '') }
  ]
})
</script>

<template>
  <!-- 使用语义化标签 -->
  <main>
    <header>
      <nav aria-label="主导航">
        <ul>
          <li><a href="/" aria-current="page">首页</a></li>
          <li><a href="/about">关于</a></li>
        </ul>
      </nav>
    </header>
    
    <section aria-labelledby="content-heading">
      <h1 id="content-heading">主要内容</h1>
      <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
      </article>
    </section>
    
    <aside aria-label="侧边栏">
      <h2>相关链接</h2>
      <ul>
        <li><a href="/related1">相关链接1</a></li>
      </ul>
    </aside>
  </main>
</template>

<template>
  <div>
    <button @click="openModal">打开模态框</button>
    
    <Teleport to="body">
      <div
        v-if="isOpen"
        class="modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        @keydown.esc="closeModal"
      >
        <div class="modal-content">
          <h2 id="modal-title">模态框标题</h2>
          <button
            ref="closeButton"
            @click="closeModal"
            aria-label="关闭模态框"
          >
            ×
          </button>
          <p>模态框内容...</p>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
const isOpen = ref(false)
const closeButton = ref<HTMLButtonElement>()

const openModal = () => {
  isOpen.value = true
  nextTick(() => {
    closeButton.value?.focus()
  })
}

const closeModal = () => {
  isOpen.value = false
}

// 焦点陷阱
const trapFocus = (e: KeyboardEvent) => {
  if (e.key === 'Tab') {
    const focusableElements = modal.value?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    // 焦点陷阱逻辑...
  }
}
</script>

<template>
  <div>
    <!-- 隐藏的屏幕阅读器文本 -->
    <span class="sr-only">加载中，请稍候</span>
    
    <!-- 动态内容更新通知 -->
    <div
      aria-live="polite"
      aria-atomic="true"
      class="sr-only"
    >
      {{ screenReaderMessage }}
    </div>
    
    <!-- 表单验证 -->
    <form @submit="handleSubmit">
      <label for="email">邮箱地址</label>
      <input
        id="email"
        v-model="email"
        type="email"
        :aria-invalid="emailError ? 'true' : 'false'"
        :aria-describedby="emailError ? 'email-error' : undefined"
        required
      />
      <div
        v-if="emailError"
        id="email-error"
        role="alert"
        aria-live="polite"
      >
        {{ emailError }}
      </div>
      
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '提交中...' : '提交' }}
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
const email = ref('')
const emailError = ref('')
const isSubmitting = ref(false)
const screenReaderMessage = ref('')

const validateEmail = (value: string) => {
  if (!value) {
    emailError.value = '邮箱地址不能为空'
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    emailError.value = '请输入有效的邮箱地址'
  } else {
    emailError.value = ''
  }
}

const handleSubmit = async () => {
  validateEmail(email.value)
  if (emailError.value) return
  
  isSubmitting.value = true
  screenReaderMessage.value = '正在提交表单...'
  
  try {
    await submitForm({ email: email.value })
    screenReaderMessage.value = '表单提交成功'
  } catch (error) {
    screenReaderMessage.value = '表单提交失败，请重试'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

<template>
  <div>
    <!-- 安全：自动转义 -->
    <p>{{ userInput }}</p>
    
    <!-- 危险：需要手动处理 -->
    <div v-html="sanitizedHtml"></div>
    
    <!-- 更安全的方式 -->
    <div v-html="processedContent"></div>
  </div>
</template>

<script setup lang="ts">
import DOMPurify from 'dompurify'

const userInput = ref('')
const rawHtml = ref('')

// HTML 清理
const sanitizedHtml = computed(() => {
  return DOMPurify.sanitize(rawHtml.value, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p', 'br'],
    ALLOWED_ATTR: []
  })
})

// 内容安全策略
const processedContent = computed(() => {
  const content = userInput.value
  // 移除潜在危险内容
  return content
    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
    .replace(/javascript:/gi, '')
    .replace(/on\w+\s*=/gi, '')
})
</script>

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <nav>
      <a href="/">{{ $t('navigation.home') }}</a>
      <a href="/about">{{ $t('navigation.about') }}</a>
    </nav>
    
    <form>
      <label>{{ $t('form.email') }}</label>
      <input type="email" />
      
      <label>{{ $t('form.password') }}</label>
      <input type="password" />
      
      <button type="submit">{{ $t('form.submit') }}</button>
    </form>
  </div>
</template>

<script setup lang="ts">
const { locale, locales, setLocale } = useI18n()

// 切换语言
const switchLanguage = (newLocale: string) => {
  setLocale(newLocale)
}
</script>

<!-- components/ThemeToggle.vue -->
<template>
  <div class="theme-toggle">
    <button
      v-for="theme in themes"
      :key="theme.value"
      :class="['theme-button', { active: currentTheme === theme.value }]"
      @click="setTheme(theme.value)"
      :aria-label="`切换到${theme.label}主题`"
    >
      <component :is="theme.icon" />
      <span>{{ theme.label }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
interface Theme {
  value: string
  label: string
  icon: string
}

const themes: Theme[] = [
  { value: 'light', label: '浅色', icon: 'SunIcon' },
  { value: 'dark', label: '深色', icon: 'MoonIcon' },
  { value: 'blue', label: '蓝色', icon: 'ColorSwatchIcon' }
]

const currentTheme = ref('light')

const setTheme = (theme: string) => {
  currentTheme.value = theme
  document.documentElement.setAttribute('data-theme', theme)
  localStorage.setItem('theme', theme)
}

// 初始化主题
onMounted(() => {
  const savedTheme = localStorage.getItem('theme') || 'light'
  setTheme(savedTheme)
})

// 监听系统主题变化
onMounted(() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  
  const handleChange = (e: MediaQueryListEvent) => {
    if (!localStorage.getItem('theme')) {
      setTheme(e.matches ? 'dark' : 'light')
    }
  }
  
  mediaQuery.addEventListener('change', handleChange)
  
  onUnmounted(() => {
    mediaQuery.removeEventListener('change', handleChange)
  })
})
</script>

<style scoped>
.theme-toggle {
  display: flex;
  gap: var(--space-sm);
}

.theme-button {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-button:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

.theme-button.active {
  background: var(--color-primary);
  color: var(--color-bg);
}
</style>