sionrui/frontend/hooks/web/README.md

公共 Hooks 模块

此目录包含可在 monorepo 各个应用中复用的 Vue Composition API Hooks。

📁 目录结构

hooks/web/
├── useCache.js      # 缓存管理 Hook
├── useUserInfo.js   # 用户信息获取 Hook
└── useVoiceText.ts  # 语音文本处理 Hook（已抽离为公共模块）

🚀 使用方式

useUserInfo Hook

获取用户信息的公共 Hook，可在各个应用中复用。

基础用法

import { useUserInfo } from '@gold/hooks/web/useUserInfo'
import { getToken } from '@/utils/token-manager'

// 在组件中使用
const { fetchUserInfo, loading, error, userInfo } = useUserInfo({
  getToken, // 传入获取 token 的函数
})

// 获取用户信息
await fetchUserInfo()

便捷函数

如果只需要获取一次用户信息，可以使用便捷函数：

import { getUserInfo } from '@gold/hooks/web/useUserInfo'
import { getToken } from '@/utils/token-manager'

// 直接获取用户信息
const userInfo = await getUserInfo({
  getToken,
})

自定义配置

const { fetchUserInfo } = useUserInfo({
  baseUrl: '/custom-api/member', // 自定义 API 基础 URL
  getToken: () => {
    // 自定义获取 token 的逻辑
    return localStorage.getItem('token')
  },
})

📝 API 说明

useUserInfo(options)

参数：

• options.baseUrl (string, 可选): API 基础 URL，默认使用 API_BASE.APP_MEMBER
• options.getToken (Function, 可选): 获取 token 的函数

返回值：

• fetchUserInfo() (Function): 获取用户信息的异步函数
• loading (Ref): 加载状态
• error (Ref<Error | null>): 错误信息
• userInfo (Ref<Object | null>): 用户信息数据

getUserInfo(options)

便捷函数，直接返回用户信息对象。

参数： 同 useUserInfo

返回值： Promise<Object> 用户信息对象

🔄 在 Store 中使用

import { defineStore } from 'pinia'
import { getUserInfo } from '@gold/hooks/web/useUserInfo'
import { getToken } from '@/utils/token-manager'

export const useUserStore = defineStore('user', () => {
  const userInfo = ref(null)
  
  async function fetchUserInfo() {
    try {
      const data = await getUserInfo({ getToken })
      userInfo.value = data
    } catch (error) {
      console.error('获取用户信息失败:', error)
    }
  }
  
  return { userInfo, fetchUserInfo }
})

useVoiceText Hook

语音文本转换 Hook，将音频文件转换为文本转录。

初始化（在应用启动时）

// 在应用的 API 服务文件中（如 common.js）
import { createApiService } from '@gold/config/api/services'
import { setApiService } from '@gold/hooks/web/useVoiceText'
import http from '@/api/http'
import { getAuthHeader } from '@/utils/token-manager'
import { API_BASE } from '@gold/config/api'

// 创建 API 服务实例
const apiService = createApiService({
  http,
  getAuthHeader,
  baseUrl: API_BASE.TIKHUB_APP,
})

// 设置全局 API 服务（供 useVoiceText hook 使用）
setApiService(apiService)

使用方式

import useVoiceText from '@gold/hooks/web/useVoiceText'
import type { AudioItem } from '@gold/config/types'

// 在组件中使用
const { getVoiceText } = useVoiceText()

const audioList: AudioItem[] = [
  { audio_url: 'https://example.com/audio.mp3' }
]

const transcriptions = await getVoiceText(audioList)
// transcriptions: [{ key: 'url', value: 'transcribed text', audio_url: '...' }]

类型定义

import type { 
  AudioItem, 
  TranscriptionResult 
} from '@gold/config/types'

📦 依赖

• vue: Vue 3 Composition API
• axios: HTTP 请求库（用于 useUserInfo）
• @gold/config/api: 公共 API 配置
• @gold/config/api/services: 公共 API 服务创建器
• @gold/config/types: 公共类型定义

🔧 配置要求

确保在应用的 vite.config.js 中配置了 @gold 别名：

resolve: {
  alias: {
    '@gold': fileURLToPath(new URL('../../', import.meta.url))
  }
}