Vue3中函数的定义

// 存储所有可用的分类名称（字符串数组）
const categoryList = ref<string[]>([])
// 存储当前选中的分类（初始值为'all'表示"全部"）
const selectedCategory = ref<string>('all')
// 存储所有可用的标签名称（字符串数组）
const tagList = ref<string[]>([])
// 存储当前选中的标签集合（可多选）
const selectedTagList = ref<string[]>([])

// 定义异步函数：获取标签和分类选项
const getTagCategoryOptions = async () => {
  // 发起API请求获取图片标签分类数据
  const res = await listPictureTagCategoryUsingGet()
  // 检查响应状态：code为0且存在有效数据表示成功
  if (res.data.code === 0 && res.data.data) {
    // 将API返回的分类列表存入categoryList（空值保护）
    categoryList.value = res.data.data.categoryList ?? []
    // 将API返回的标签列表存入tagList（空值保护）
    tagList.value = res.data.data.tagList ?? []
  } else {
    // 请求失败时显示错误提示（拼接后端返回的错误信息）
    message.error('加载分类标签失败，' + res.data.message)
  }
}

// 定义异步函数：获取图片数据
const fetchData = async () => {
  // 1. 开启加载状态（显示加载指示器）
  loading.value = true
  // 2. 构建请求参数对象
  const params = {
    ...searchParams,       // 展开已有的搜索参数（如分页信息）
    tags: [],              // 初始化标签数组（稍后填充）
  }
  // 3. 处理分类筛选
  if (selectedCategory.value !== 'all') {
    params.category = selectedCategory.value  // 添加分类筛选参数
  }
  // 4. 处理标签筛选（多选）
  selectedTagList.value.forEach((useTag, index) => {
    if (useTag) {  // 如果该标签被选中
      // 根据索引获取完整标签列表中的标签名
      params.tags.push(tagList.value[index])
    }
  })
  // 5. 发起API请求获取分页数据
  const res = await listPictureVoByPageUsingPost(params)
  // 6. 处理响应
  if (res.data.data) {
    // 7. 成功：更新数据列表（空值保护）
    dataList.value = res.data.data.records ?? []
    // 8. 更新总记录数（空值保护）
    total.value = res.data.data.total ?? 0
  } else {
    // 9. 失败：显示错误提示
    message.error('获取数据失败，' + res.data.message)
  }
  // 10. 关闭加载状态
  loading.value = false
}