目录结构与配置详解

<!-- components/Base/Button.vue -->
<template>
  <button 
    :class="buttonClasses" 
    :disabled="disabled"
    @click="handleClick"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary' | 'danger'
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
  disabled: false
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const buttonClasses = computed(() => {
  return [
    'btn',
    `btn-${props.variant}`,
    `btn-${props.size}`,
    {
      'btn-disabled': props.disabled
    }
  ]
})

const handleClick = (event: MouseEvent) => {
  if (!props.disabled) {
    emit('click', event)
  }
}
</script>

<!-- components/Form/UserForm.vue -->
<template>
  <form @submit.prevent="handleSubmit" class="user-form">
    <BaseInput 
      v-model="form.name" 
      label="用户名" 
      :error="errors.name"
      required 
    />
    <BaseInput 
      v-model="form.email" 
      type="email" 
      label="邮箱" 
      :error="errors.email"
      required 
    />
    <BaseButton 
      type="submit" 
      :loading="isSubmitting"
      variant="primary"
    >
      提交
    </BaseButton>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod'

// 类型定义
interface UserForm {
  name: string
  email: string
}

// 表单验证schema
const userSchema = z.object({
  name: z.string().min(2, '用户名至少2个字符'),
  email: z.string().email('请输入有效的邮箱地址')
})

// 响应式数据
const form = reactive<UserForm>({
  name: '',
  email: ''
})

const errors = reactive<Partial<UserForm>>({})
const isSubmitting = ref(false)

// 事件定义
const emit = defineEmits<{
  submit: [data: UserForm]
}>()

// 表单提交处理
const handleSubmit = async () => {
  try {
    // 清除之前的错误
    Object.keys(errors).forEach(key => {
      errors[key as keyof UserForm] = undefined
    })
    
    // 验证表单数据
    const validatedData = userSchema.parse(form)
    
    isSubmitting.value = true
    emit('submit', validatedData)
  } catch (error) {
    if (error instanceof z.ZodError) {
      // 处理验证错误
      error.errors.forEach(err => {
        const field = err.path[0] as keyof UserForm
        errors[field] = err.message
      })
    }
  } finally {
    isSubmitting.value = false
  }
}
</script>

// composables/api/useAuth.ts
import type { User } from '~/types'

export interface LoginCredentials {
  email: string
  password: string
}

export interface AuthState {
  user: Ref<User | null>
  isAuthenticated: ComputedRef<boolean>
  isLoading: Ref<boolean>
  error: Ref<string | null>
}

export const useAuth = (): AuthState & {
  login: (credentials: LoginCredentials) => Promise<void>
  logout: () => Promise<void>
  refresh: () => Promise<void>
} => {
  // 状态管理
  const user = ref<User | null>(null)
  const isLoading = ref(false)
  const error = ref<string | null>(null)
  
  // 计算属性
  const isAuthenticated = computed(() => !!user.value)
  
  // 登录方法
  const login = async (credentials: LoginCredentials) => {
    try {
      isLoading.value = true
      error.value = null
      
      const { data } = await $fetch<{ user: User; token: string }>('/api/auth/login', {
        method: 'POST',
        body: credentials
      })
      
      // 存储用户信息
      user.value = data.user
      
      // 存储token到cookie
      const token = useCookie('auth-token', {
        httpOnly: true,
        secure: true,
        sameSite: 'strict',
        maxAge: 60 * 60 * 24 * 7 // 7天
      })
      token.value = data.token
      
      // 跳转到首页
      await navigateTo('/')
    } catch (err: any) {
      error.value = err.data?.message || '登录失败'
      throw err
    } finally {
      isLoading.value = false
    }
  }
  
  // 退出登录
  const logout = async () => {
    try {
      await $fetch('/api/auth/logout', { method: 'POST' })
    } catch (err) {
      console.warn('登出请求失败:', err)
    } finally {
      // 清除本地状态
      user.value = null
      await navigateTo('/auth/login')
    }
  }
  
  // 刷新用户信息
  const refresh = async () => {
    try {
      const { data } = await $fetch<{ user: User }>('/api/auth/me')
      user.value = data.user
    } catch (err) {
      console.warn('获取用户信息失败:', err)
      user.value = null
    }
  }
  
  return {
    user: readonly(user),
    isAuthenticated,
    isLoading: readonly(isLoading),
    error: readonly(error),
    login,
    logout,
    refresh
  }
}

// composables/ui/useModal.ts
export interface ModalState {
  isOpen: Ref<boolean>
  data: Ref<any>
}

export const useModal = <T = any>() => {
  const isOpen = ref(false)
  const data = ref<T | null>(null)
  
  const open = (payload?: T) => {
    data.value = payload || null
    isOpen.value = true
  }
  
  const close = () => {
    isOpen.value = false
    // 延迟清除数据，等待动画完成
    setTimeout(() => {
      data.value = null
    }, 300)
  }
  
  const toggle = (payload?: T) => {
    if (isOpen.value) {
      close()
    } else {
      open(payload)
    }
  }
  
  // 监听 ESC 键关闭
  useEventListener('keydown', (event: KeyboardEvent) => {
    if (event.key === 'Escape' && isOpen.value) {
      close()
    }
  })
  
  return {
    isOpen: readonly(isOpen),
    data: readonly(data),
    open,
    close,
    toggle
  }
}

// composables/business/useCart.ts
import type { Product, CartItem } from '~/types'

export const useCart = () => {
  // 使用 localStorage 持久化购物车数据
  const cartItems = useLocalStorage<CartItem[]>('cart-items', [])
  
  // 计算属性
  const totalItems = computed(() => 
    cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
  )
  
  const totalPrice = computed(() =>
    cartItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
  )
  
  const isEmpty = computed(() => cartItems.value.length === 0)
  
  // 添加商品到购物车
  const addItem = (product: Product, quantity: number = 1) => {
    const existingItem = cartItems.value.find(item => item.id === product.id)
    
    if (existingItem) {
      existingItem.quantity += quantity
    } else {
      cartItems.value.push({
        id: product.id,
        name: product.name,
        price: product.price,
        image: product.image,
        quantity
      })
    }
    
    // 显示成功提示
    const toast = useToast()
    toast.success(`${product.name} 已添加到购物车`)
  }
  
  // 更新商品数量
  const updateQuantity = (productId: string, quantity: number) => {
    const item = cartItems.value.find(item => item.id === productId)
    if (item) {
      if (quantity <= 0) {
        removeItem(productId)
      } else {
        item.quantity = quantity
      }
    }
  }
  
  // 移除商品
  const removeItem = (productId: string) => {
    const index = cartItems.value.findIndex(item => item.id === productId)
    if (index > -1) {
      cartItems.value.splice(index, 1)
    }
  }
  
  // 清空购物车
  const clearCart = () => {
    cartItems.value = []
  }
  
  return {
    items: readonly(cartItems),
    totalItems,
    totalPrice,
    isEmpty,
    addItem,
    updateQuantity,
    removeItem,
    clearCart
  }
}

<!-- layouts/default.vue -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <LayoutHeader />
    
    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 py-8">
      <slot />
    </main>
    
    <!-- 底部 -->
    <LayoutFooter />
    
    <!-- 全局组件 -->
    <CommonLoading v-if="$route.meta.loading" />
    <NotificationToast />
  </div>
</template>

<script setup lang="ts">
// 布局级别的逻辑
const { user } = useAuth()

// 监听路由变化，重置页面状态
watch(() => $route.path, () => {
  // 清除之前的错误状态
  clearError()
})
</script>

<!-- layouts/admin.vue -->
<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <aside class="admin-sidebar">
      <AdminSidebar />
    </aside>
    
    <!-- 主内容区 -->
    <div class="admin-main">
      <!-- 顶部工具栏 -->
      <header class="admin-header">
        <AdminHeader />
      </header>
      
      <!-- 面包屑导航 -->
      <nav class="admin-breadcrumb">
        <AdminBreadcrumb />
      </nav>
      
      <!-- 页面内容 -->
      <main class="admin-content">
        <slot />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
// 权限检查
const { user, isAuthenticated } = useAuth()

// 检查管理员权限
watchEffect(() => {
  if (!isAuthenticated.value || !user.value?.isAdmin) {
    throw createError({
      statusCode: 403,
      statusMessage: '权限不足'
    })
  }
})
</script>

<style scoped>
.admin-layout {
  @apply min-h-screen flex;
}

.admin-sidebar {
  @apply w-64 bg-gray-900 text-white;
}

.admin-main {
  @apply flex-1 flex flex-col;
}

.admin-header {
  @apply h-16 bg-white border-b border-gray-200;
}

.admin-content {
  @apply flex-1 p-6 bg-gray-50;
}
</style>

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { isAuthenticated } = useAuth()
  
  if (!isAuthenticated.value) {
    return navigateTo('/auth/login', { 
      redirectTo: to.fullPath 
    })
  }
})

// middleware/admin.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { user } = useAuth()
  
  if (!user.value?.isAdmin) {
    throw createError({
      statusCode: 403,
      statusMessage: '需要管理员权限'
    })
  }
})

// middleware/analytics.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
  // 页面访问统计
  if (process.client) {
    const { trackPageView } = useAnalytics()
    trackPageView(to.path)
  }
})

// plugins/axios.ts
import axios from 'axios'

export default defineNuxtPlugin(() => {
  // 创建axios实例
  const api = axios.create({
    baseURL: useRuntimeConfig().public.apiBase,
    timeout: 10000,
    withCredentials: true
  })
  
  // 请求拦截器
  api.interceptors.request.use(
    (config) => {
      // 添加认证token
      const token = useCookie('auth-token')
      if (token.value) {
        config.headers.Authorization = `Bearer ${token.value}`
      }
      
      // 添加请求ID用于追踪
      config.headers['X-Request-ID'] = crypto.randomUUID()
      
      return config
    },
    (error) => Promise.reject(error)
  )
  
  // 响应拦截器
  api.interceptors.response.use(
    (response) => response,
    async (error) => {
      const { status } = error.response || {}
      
      // 处理认证失效
      if (status === 401) {
        const { logout } = useAuth()
        await logout()
        return Promise.reject(error)
      }
      
      // 处理服务器错误
      if (status >= 500) {
        const toast = useToast()
        toast.error('服务器错误，请稍后重试')
      }
      
      return Promise.reject(error)
    }
  )
  
  // 提供给应用使用
  return {
    provide: {
      api
    }
  }
})

// plugins/directives.ts
export default defineNuxtPlugin((nuxtApp) => {
  // 图片懒加载指令
  nuxtApp.vueApp.directive('lazy', {
    mounted(el: HTMLImageElement, binding) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target as HTMLImageElement
            img.src = binding.value
            img.onload = () => img.classList.add('loaded')
            observer.unobserve(img)
          }
        })
      })
      
      observer.observe(el)
    }
  })
  
  // 权限控制指令
  nuxtApp.vueApp.directive('permission', {
    mounted(el: HTMLElement, binding) {
      const { user } = useAuth()
      const requiredPermission = binding.value
      
      if (!user.value?.permissions?.includes(requiredPermission)) {
        el.style.display = 'none'
      }
    }
  })
})

// utils/format/date.ts
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(relativeTime)
dayjs.extend(timezone)

/**
 * 格式化日期
 */
export const formatDate = (
  date: string | Date | dayjs.Dayjs,
  format: string = 'YYYY-MM-DD HH:mm:ss'
): string => {
  return dayjs(date).format(format)
}

/**
 * 相对时间
 */
export const timeAgo = (date: string | Date | dayjs.Dayjs): string => {
  return dayjs(date).fromNow()
}

/**
 * 是否为今天
 */
export const isToday = (date: string | Date | dayjs.Dayjs): boolean => {
  return dayjs(date).isSame(dayjs(), 'day')
}

// utils/validation/rules.ts
/**
 * 邮箱验证
 */
export const isEmail = (email: string): boolean => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

/**
 * 手机号验证（中国大陆）
 */
export const isPhone = (phone: string): boolean => {
  const phoneRegex = /^1[3-9]\d{9}$/
  return phoneRegex.test(phone)
}

/**
 * 身份证验证（简化版）
 */
export const isIdCard = (idCard: string): boolean => {
  const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  return idCardRegex.test(idCard)
}

// server/api/users/[id].get.ts
import { User } from '~/types'

export default defineEventHandler(async (event) => {
  // 获取运行时配置
  const config = useRuntimeConfig()
  
  // 从路径参数获取用户ID
  const userId = getRouterParam(event, 'id')
  
  // 数据库查询
  const user = await $fetch(`${config.dbBaseUrl}/users/${userId}`, {
    headers: { Authorization: `Bearer ${config.dbToken}` }
  })

  // 类型校验
  if (!isValidUser(user)) {
    throw createError({
      statusCode: 404,
      statusMessage: '用户不存在'
    })
  }

  // 数据脱敏
  return {
    id: user.id,
    name: user.name,
    avatar: user.avatar
  } as User
})

// 用户类型校验
function isValidUser(data: any): boolean {
  return !!data?.id && !!data?.name
}

// server/api/users/[id].put.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const userId = getRouterParam(event, 'id')
  
  // 请求验证
  if (!body.name) {
    throw createError({
      statusCode: 400,
      statusMessage: '用户名不能为空'
    })
  }

  // 更新逻辑
  return updateUser(userId, body).catch((error) => {
    throw createError({
      statusCode: 500,
      statusMessage: '更新用户失败',
      data: error
    })
  })
})