我的新宠技术栈 Nuxt 4 Nuxt UI MongoDB 和 Quarkus

my-app/
 ├─ app/
 │  ├─ assets/
 │  ├─ components/
 │  ├─ pages/
 │  └─ app.vue
 ├─ shared/
 ├─ server/
 └─ nuxt.config.ts

// 优化的数据获取示例
const { data: products } = await useAsyncData(
  'products',
  () => $fetch('/api/products'),
  {
    server: true,
    default: () => [],
    transform: (data) => data.map(p => ({...p, formattedPrice: formatCurrency(p.price)}))
  }
)

<template>
  <UContainer class="py-8">
    <UCard>
      <template #header>
        <h1 class="text-2xl font-bold">用户管理</h1>
      </template>
      
      <UTable :rows="users" :columns="columns">
        <template #actions-data="{ row }">
          <UButton
            icon="i-heroicons-pencil"
            size="sm"
            color="primary"
            variant="ghost"
            @click="edit(row)"
          />
        </template>
      </UTable>
      
      <template #footer>
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-500">
            {{ users.length }} users found
          </span>
          <UPagination
            v-model="page"
            :total="total"
            :page-count="10"
          />
        </div>
      </template>
    </UCard>
  </UContainer>
</template>

<script setup lang="ts">
const users = ref([])
const page = ref(1)
const total = ref(100)

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Role' },
  { key: 'actions', label: 'Actions' }
]

async function loadUsers() {
  const { data } = await useFetch('/api/users', {
    query: { page: page.value }
  })
  users.value = data.value
}
</script>

// Nuxt 中的 Mongoose 连接
import mongoose from 'mongoose'

export default defineNitroPlugin(async (nitroApp) => {
  if (!mongoose.connection.readyState) {
    await mongoose.connect(process.env.MONGODB_URI)
  }
})

// 示例架构
const userSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  role: { type: String, enum: ['admin', 'user', 'editor'] },
  preferences: {
    theme: String,
    notifications: Boolean
  },
  createdAt: { type: Date, default: Date.now }
})

// 优化索引
userSchema.index({ email: 1 })
userSchema.index({ createdAt: -1 })

// 使用 Panache 的实体
@Entity
public class Product extends PanacheMongoEntity {
    public String name;
    public String description;
    public BigDecimal price;
    public Integer stock;
    public String category;
    public LocalDateTime createdAt;
    
    // 静态查询
    public static List<Product> findByCategory(String category) {
        return list("category", category);
    }
    
    public static List<Product> findActive() {
        return list("stock > 0");
    }
    
    public static long countByCategory(String category) {
        return count("category", category);
    }
}

// 仓库
@ApplicationScoped
public class ProductRepository implements PanacheMongoRepository<Product> {
    
    public List<Product> searchWithStock(int page, int size) {
        return find("stock > 0")
               .page(page, size)
               .list();
    }
    
    public Optional<Product> searchByCode(String code) {
        return find("code", code).firstResultOptional();
    }
}