feat: 功能
This commit is contained in:
@@ -1,63 +0,0 @@
|
||||
# 胶卷风格AI工具设计规范（二次创适用版）
|
||||
|
||||
|
||||
## **核心风格定位**
|
||||
「复古胶片暗调+现代代工具极简感」，以黑色基底为核心，叠加入胶片颗粒肌理，整体视觉克制而有质感，突出「剪辑工具的专业感」与「胶卷复古的氛围感」，避免与现有工具同质化。
|
||||
|
||||
|
||||
## **1. 颜色规范**
|
||||
- **主色**：
|
||||
- 背景：#0D0D0D（深黑，带1%青灰调，区别纯黑）
|
||||
- 主功能色：#00B030（低饱和苔藓绿，用于按钮/选中态，与已知品牌色差异明显）
|
||||
- **辅助色**：
|
||||
- 交互蓝：#1A66E0（用于预览/保存等次级操作）
|
||||
- 强调橙：#FF6A30（用于标记点/警告，低明度避免刺眼）
|
||||
- **中性色**：
|
||||
- 模块底：#1A1A1A（比背景亮5%，区分层级）
|
||||
- 文本：#F2F2F2（正文）、#CCCCCC（次要文本）
|
||||
- 边框：#333333（1px细线条，弱化割裂感）
|
||||
|
||||
|
||||
## **2. 质感与阴影**
|
||||
- **肌理**：全局叠加原创胶片颗粒（3%灰度噪点，随机生成，非真实胶卷扫描图）
|
||||
- **阴影**：
|
||||
- 卡片/模块：内阴影（0 2px 4px rgba(0,0,0,0.4)），无外阴影
|
||||
- 按钮hover：轻微发光（0 0 6px rgba(0,176,48,0.3)，主色低饱和光晕）
|
||||
|
||||
|
||||
## **3. 图标选型**
|
||||
- **风格**：线性几何风，线条粗细1.5px，圆角2px
|
||||
- **载体**：统一使用 SVG（图标文件与 SVG Sprite/Icon 组件），禁止使用位图作为图标
|
||||
- **禁用**：避免使用与知名剪辑工具高度相似的图标（如剪映、Pr的标志性符号）
|
||||
|
||||
|
||||
## **4. 卡片规范**
|
||||
- **形态**：圆角6px（非直角/大圆角），边框1px #333333
|
||||
- **内容区**：内边距16px，底部可加「胶片式参数条」（黑底白字小文本，如“1080p | 30fps”，纯装饰）
|
||||
- **状态**：
|
||||
- 活跃态：边框改为主色#00B030
|
||||
- hover态：背景色加深至#161616
|
||||
|
||||
|
||||
## **5. 布局规范**
|
||||
- **整体结构**：顶部导航（高52px）+ 左侧功能栏（宽60px图标/200px展开）+ 主内容区（占比70%）+ 右侧参数面板（占比30%）
|
||||
- **间距**：模块间margin 20px，元素内padding 12-16px，避免拥挤
|
||||
- **移动端**：左侧栏转为底部悬浮按钮组（4个核心功能+居中主按钮）
|
||||
|
||||
|
||||
## **6. 标题与文本**
|
||||
- **标题**：字体「Montserrat」（半粗体，20px），字间距0.5px，颜色#F2F2F2
|
||||
- **正文**：字体「Inter」（常规，14px），行高1.5，颜色#F2F2F2
|
||||
- **辅助文本**：字体「Inter」（常规，12px），颜色#CCCCCC
|
||||
|
||||
|
||||
## **7. 设计提示词（供生成式设计/插画参考）**
|
||||
- **总体风格**：复古胶片暗调、现代极简 UI、低饱和高级质感、专业剪辑工具氛围、控色节制
|
||||
- **质感**：微颗粒胶片噪点（3% 灰度随机）、内阴影层次、金属磨砂、磨光边缘
|
||||
- **配色**：深黑 #0D0D0D 背景、模块底 #1A1A1A、主色 #00B030、交互蓝 #1A66E0、强调橙 #FF6A30、细边界 #333333
|
||||
- **光影**：按钮 Hover 轻微发光（0 0 6px rgba(0,176,48,0.3)）、卡片内阴影（inset 0 2px 4px rgba(0,0,0,0.4)）
|
||||
- **形态**：圆角 6px、1px 细边、紧凑留白（内边距 12–16px，模块间距 20px）
|
||||
- **图标**：线性几何、1.5px 描边、统一 SVG、避免品牌相似符号
|
||||
- **插画/装饰**：暗色渐变+噪点、胶片孔洞/标尺式细节可点缀，勿喧宾夺主
|
||||
- **可用性**：高对比可读性、色弱可访问、交互状态清晰（禁用/加载/选中）
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
---
|
||||
description: 现代 Web 应用中的 Vue.js 最佳实践与模式
|
||||
globs: **/*.vue, **/*.ts, components/**/*
|
||||
---
|
||||
|
||||
# Vue.js 最佳实践
|
||||
|
||||
## 组件结构
|
||||
- 优先使用组合式 API 而非选项式 API
|
||||
- 保持组件小巧且功能专注
|
||||
- 采用恰当的 TypeScript 集成方案
|
||||
- 实现规范的 props 验证
|
||||
- 使用标准的 emit 声明
|
||||
- 保持模板逻辑简洁
|
||||
- 优先使用template 语法，而不是函数组件
|
||||
|
||||
## 组合式 API
|
||||
- 正确使用 ref 与 reactive
|
||||
- 合理实现生命周期钩子
|
||||
- 通过组合式函数封装可复用逻辑
|
||||
- 保持 setup 函数整洁
|
||||
- 规范使用计算属性
|
||||
- 合理实现侦听器
|
||||
|
||||
## 状态管理
|
||||
- 使用 Pinia 进行状态管理
|
||||
- 保持仓库模块化
|
||||
- 采用合理的状态组织方式
|
||||
- 规范实现操作逻辑
|
||||
- 正确使用获取器
|
||||
- 妥善处理异步状态
|
||||
|
||||
## 性能优化
|
||||
- 实现组件懒加载
|
||||
- 配置恰当的缓存策略
|
||||
- 高效使用计算属性
|
||||
- 避免不必要的侦听器
|
||||
- 区分使用 v-show 与 v-if
|
||||
- 实现科学的 key 管理
|
||||
|
||||
## 路由管理
|
||||
- 规范使用 Vue Router
|
||||
- 实现完整的导航守卫
|
||||
- 合理配置路由元字段
|
||||
- 正确处理路由参数
|
||||
- 实现路由懒加载
|
||||
- 使用标准的导航方法
|
||||
|
||||
## 表单处理
|
||||
- 正确使用 v-model
|
||||
- 实现完善的验证机制
|
||||
- 规范处理表单提交
|
||||
- 展示合理的加载状态
|
||||
- 配置完整的错误处理
|
||||
- 实现表单重置功能
|
||||
|
||||
## TypeScript 集成
|
||||
- 使用规范的组件类型定义
|
||||
- 实现完整的 props 类型声明
|
||||
- 规范 emit 类型声明
|
||||
- 处理类型推断
|
||||
- 使用标准的组合函数类型
|
||||
- 实现完整的仓库类型定义
|
||||
|
||||
## 测试策略
|
||||
- 编写规范的单元测试
|
||||
- 实现完整的组件测试
|
||||
- 正确使用 Vue Test Utils
|
||||
- 全面测试组合式函数
|
||||
- 实现科学的模拟机制
|
||||
- 测试异步操作流程
|
||||
|
||||
## 开发规范
|
||||
- 遵循 Vue 样式指南
|
||||
- 使用统一的命名约定
|
||||
- 保持组件结构清晰
|
||||
- 实现完整的错误处理
|
||||
- 规范事件处理机制
|
||||
- 为复杂逻辑添加文档注释
|
||||
|
||||
## 构建与工具链
|
||||
- 使用 Vite 进行开发
|
||||
- 配置完整的构建方案
|
||||
- 规范使用环境变量
|
||||
- 实现代码分割方案
|
||||
- 正确处理静态资源
|
||||
- 配置完整的优化策略
|
||||
113
frontend/api/services.js
Normal file
113
frontend/api/services.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* 公共 API 服务
|
||||
* 封装可在 monorepo 各个应用中复用的 API 调用
|
||||
*
|
||||
* 使用方式：
|
||||
* import { createApiService } from '@gold/config/api/services'
|
||||
*
|
||||
* const apiService = createApiService({
|
||||
* http: axiosInstance,
|
||||
* getAuthHeader: () => 'Bearer token',
|
||||
* baseUrl: API_BASE.TIKHUB_APP
|
||||
* })
|
||||
*
|
||||
* await apiService.videoToCharacters({ fileLinkList: [...] })
|
||||
*/
|
||||
|
||||
import { API_BASE } from '@gold/config/api'
|
||||
|
||||
/**
|
||||
* 创建 API 服务实例
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {Object} options.http - HTTP 客户端实例（如 axios）
|
||||
* @param {Function} options.getAuthHeader - 获取 Authorization header 的函数
|
||||
* @param {string} options.baseUrl - API 基础 URL（可选，默认使用 TIKHUB_APP）
|
||||
* @returns {Object} API 服务对象
|
||||
*/
|
||||
export function createApiService(options = {}) {
|
||||
const { http, getAuthHeader, baseUrl } = options
|
||||
|
||||
if (!http) {
|
||||
throw new Error('createApiService: http 实例是必需的')
|
||||
}
|
||||
|
||||
// 确定 API 基础路径
|
||||
// 如果没有提供 baseUrl，尝试使用 TIKHUB_APP 或 TIKHUB
|
||||
const apiBaseUrl = baseUrl || API_BASE.TIKHUB_APP || API_BASE.TIKHUB || ''
|
||||
|
||||
/**
|
||||
* 视频转字符（音频转文字）
|
||||
* @param {Object} data - 请求数据
|
||||
* @param {string[]} data.fileLinkList - 音频文件链接列表
|
||||
* @returns {Promise<Object>} 响应数据
|
||||
*/
|
||||
async function videoToCharacters(data) {
|
||||
const url = `${apiBaseUrl}/videoToCharacters2`
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
|
||||
// 添加 Authorization header（如果提供了 getAuthHeader 函数）
|
||||
if (getAuthHeader) {
|
||||
const authHeader = getAuthHeader()
|
||||
if (authHeader) {
|
||||
headers.Authorization = authHeader
|
||||
}
|
||||
}
|
||||
|
||||
// 获取 tenant-id（从环境变量或默认值）
|
||||
const tenantId =
|
||||
(typeof import.meta !== 'undefined' && import.meta.env?.VITE_TENANT_ID) ||
|
||||
(typeof process !== 'undefined' && process.env?.VITE_TENANT_ID) ||
|
||||
'1'
|
||||
|
||||
if (tenantId) {
|
||||
headers['tenant-id'] = tenantId
|
||||
}
|
||||
|
||||
return await http.post(url, data, { headers })
|
||||
}
|
||||
|
||||
/**
|
||||
* 调用工作流
|
||||
* @param {Object} data - 请求数据
|
||||
* @returns {Promise<Object>} 响应数据
|
||||
*/
|
||||
async function callWorkflow(data) {
|
||||
const url = `${apiBaseUrl}/callWorkflow`
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
|
||||
if (getAuthHeader) {
|
||||
const authHeader = getAuthHeader()
|
||||
if (authHeader) {
|
||||
headers.Authorization = authHeader
|
||||
}
|
||||
}
|
||||
|
||||
const tenantId =
|
||||
(typeof import.meta !== 'undefined' && import.meta.env?.VITE_TENANT_ID) ||
|
||||
(typeof process !== 'undefined' && process.env?.VITE_TENANT_ID) ||
|
||||
'1'
|
||||
|
||||
if (tenantId) {
|
||||
headers['tenant-id'] = tenantId
|
||||
}
|
||||
|
||||
return await http.post(url, data, { headers })
|
||||
}
|
||||
|
||||
return {
|
||||
videoToCharacters,
|
||||
callWorkflow,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认导出（便于直接使用）
|
||||
*/
|
||||
export default createApiService
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
"@microsoft/fetch-event-source": "^2.0.1",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.12.2",
|
||||
"dayjs": "^1.11.18",
|
||||
"markdown-it": "^14.1.0",
|
||||
"path-to-regexp": "^6.3.0",
|
||||
|
||||
@@ -5,6 +5,8 @@ import SidebarNav from './components/SidebarNav.vue'
|
||||
import TopNav from './components/TopNav.vue'
|
||||
import { theme } from 'ant-design-vue'
|
||||
import SvgSprite from '@/components/icons/SvgSprite.vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getToken } from '@gold/utils/token-manager'
|
||||
|
||||
function readCssVar(name) {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || undefined
|
||||
@@ -24,7 +26,7 @@ const themeToken = ref({
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
// 运行时从 :root 读取，若存在则覆盖默认值
|
||||
const next = { ...themeToken.value.token }
|
||||
next.colorPrimary = readCssVar('--color-primary') || next.colorPrimary
|
||||
@@ -35,6 +37,37 @@ onMounted(() => {
|
||||
next.colorTextSecondary = readCssVar('--color-text-secondary') || next.colorTextSecondary
|
||||
next.colorBorder = readCssVar('--color-border') || next.colorBorder
|
||||
themeToken.value = { algorithm: theme.darkAlgorithm, token: next }
|
||||
|
||||
// 检查登录状态：如果有token但store中未标记为登录，则恢复登录状态
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 等待store从本地存储恢复完成（最多等待500ms）
|
||||
let waitCount = 0
|
||||
while (!userStore.isHydrated && waitCount < 50) {
|
||||
await new Promise(resolve => setTimeout(resolve, 10))
|
||||
waitCount++
|
||||
}
|
||||
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
// 如果有token但未登录，可能是刷新页面，需要恢复登录状态
|
||||
if (!userStore.isLoggedIn) {
|
||||
userStore.isLoggedIn = true
|
||||
// 尝试获取用户信息
|
||||
try {
|
||||
await userStore.fetchUserInfo()
|
||||
} catch (error) {
|
||||
console.error('初始化用户信息失败:', error)
|
||||
}
|
||||
} else if (!userStore.nickname && !userStore.userId) {
|
||||
// 如果已登录但没有用户信息，尝试获取
|
||||
try {
|
||||
await userStore.fetchUserInfo()
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
|
||||
import api from '@/api/http'
|
||||
import { setToken, getRefreshToken } from '@/utils/auth'
|
||||
import { API_BASE } from '@/api/config'
|
||||
// 使用公共配置
|
||||
import { API_BASE } from '@gold/config/api'
|
||||
|
||||
const SERVER_BASE = API_BASE.APP_MEMBER
|
||||
|
||||
@@ -191,6 +192,17 @@ export async function resetPasswordBySms(mobile, newPassword, smsCode) {
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户信息（C端）
|
||||
* GET /member/user/get
|
||||
*
|
||||
* @returns {Promise<Object>} 用户信息对象
|
||||
*/
|
||||
export async function getUserInfo() {
|
||||
const { data } = await api.get(`${SERVER_BASE}/user/get`)
|
||||
return data || {}
|
||||
}
|
||||
|
||||
/**
|
||||
* “手机+验证码+密码注册”组合流程（基于短信登录即注册 + 设置密码）
|
||||
* 说明：
|
||||
@@ -235,4 +247,5 @@ export default {
|
||||
sendResetPasswordCode,
|
||||
resetPasswordBySms,
|
||||
registerWithMobileCodePassword,
|
||||
getUserInfo,
|
||||
};
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import request from '@/api/http'
|
||||
import { fetchEventSource } from '@microsoft/fetch-event-source'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { API_BASE } from '@/api/config'
|
||||
// 使用公共配置
|
||||
import { API_BASE } from '@gold/config/api'
|
||||
|
||||
const SERVER_BASE_AI = API_BASE.ADMIN_AI
|
||||
|
||||
|
||||
@@ -1,17 +1,32 @@
|
||||
import http from '@/api/http'
|
||||
import { fetchEventSource } from '@microsoft/fetch-event-source'
|
||||
import { getAuthHeader } from '@/utils/token-manager'
|
||||
import { API_BASE } from '@/api/config'
|
||||
import { getAuthHeader } from '@gold/utils/token-manager'
|
||||
// 使用公共配置和 API 服务创建器
|
||||
import { API_BASE } from '@gold/config/api'
|
||||
import { createApiService } from '@gold/api/services'
|
||||
// 初始化公共 hook 的 API 服务
|
||||
import { setApiService } from '@gold/hooks/web/useVoiceText'
|
||||
|
||||
// 使用本地代理前缀 /tikhub，开发环境通过 Vite 代理到 https://api.tikhub.io
|
||||
const SERVER_BASE = API_BASE.TIKHUB
|
||||
// 注意：API_BASE.TIKHUB 不存在，应该使用 TIKHUB_APP
|
||||
const SERVER_BASE = API_BASE.TIKHUB_APP || API_BASE.TIKHUB || ''
|
||||
|
||||
// 创建公共 API 服务实例
|
||||
const apiService = createApiService({
|
||||
http,
|
||||
getAuthHeader,
|
||||
baseUrl: SERVER_BASE,
|
||||
})
|
||||
|
||||
// 设置全局 API 服务（供 useVoiceText hook 使用）
|
||||
setApiService(apiService)
|
||||
|
||||
export const CommonService = {
|
||||
videoToCharacters(data) {
|
||||
return http.post(`${SERVER_BASE}/videoToCharacters2`, data)
|
||||
return apiService.videoToCharacters(data)
|
||||
},
|
||||
callWorkflow(data) {
|
||||
return http.post(`${SERVER_BASE}/callWorkflow`, data)
|
||||
return apiService.callWorkflow(data)
|
||||
},
|
||||
|
||||
// 流式调用 workflow
|
||||
|
||||
@@ -1,34 +1,14 @@
|
||||
/**
|
||||
* API 基础配置
|
||||
* 统一管理所有 API 的基础 URL
|
||||
*
|
||||
* 注意：此文件已迁移到公共模块 @gold/config/api
|
||||
* 为了保持向后兼容，这里重新导出公共配置
|
||||
* 新代码建议直接使用 @gold/config/api
|
||||
*/
|
||||
|
||||
const BASE_URL = import.meta.env.VITE_BASE_URL || ''
|
||||
// 从公共模块导入
|
||||
export { API_BASE, getApiUrl } from '@gold/config/api'
|
||||
|
||||
/**
|
||||
* API 基础路径配置
|
||||
*/
|
||||
export const API_BASE = {
|
||||
// 会员端 API
|
||||
APP: `${BASE_URL}`,
|
||||
// 具体模块路径
|
||||
ADMIN_AI: `${BASE_URL}/admin-api/ai`,
|
||||
APP_MEMBER: `${BASE_URL}/member`,
|
||||
|
||||
// 特殊路径
|
||||
TIKHUB_APP: `${BASE_URL}/api/tikHup`,
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取完整的 API 路径
|
||||
* @param {string} module - 模块名称 (如 'ADMIN_AI', 'APP_MEMBER')
|
||||
* @param {string} path - 接口路径 (如 '/chat/conversation/create-my')
|
||||
* @returns {string} 完整的 API URL
|
||||
*/
|
||||
export function getApiUrl(module, path) {
|
||||
const base = API_BASE[module] || API_BASE.ADMIN
|
||||
return `${base}${path.startsWith('/') ? path : '/' + path}`
|
||||
}
|
||||
|
||||
export default API_BASE
|
||||
|
||||
|
||||
@@ -41,7 +41,8 @@ async function example1() {
|
||||
// ========== 方式二：从具体文件导入（兼容旧代码） ==========
|
||||
import { ChatMessageApi } from '@/api/chat'
|
||||
import { CommonService } from '@/api/common'
|
||||
import { API_BASE } from '@/api/config'
|
||||
// 使用公共配置
|
||||
import { API_BASE } from '@gold/config/api'
|
||||
|
||||
async function example2() {
|
||||
// 原有方式仍然可用
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import axios from 'axios'
|
||||
import { getAuthHeader } from '@/utils/token-manager'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getAuthHeader, clearAllTokens } from '@gold/utils/token-manager'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
/**
|
||||
* 不需要 token 的接口白名单
|
||||
@@ -57,6 +59,10 @@ http.interceptors.response.use(
|
||||
if (data && typeof data.code === 'number' && (data.code === 0 || data.code === 200)) {
|
||||
return data
|
||||
} else {
|
||||
// code 不为 0 时，检查是否为401
|
||||
if (data && typeof data.code === 'number' && data.code === 401) {
|
||||
handle401Error()
|
||||
}
|
||||
// code 不为 0 时，抛出错误
|
||||
const error = new Error(data?.message || data?.msg || '请求失败')
|
||||
error.code = data?.code
|
||||
@@ -65,11 +71,56 @@ http.interceptors.response.use(
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
// 处理 HTTP 状态码 401
|
||||
if (error.response && error.response.status === 401) {
|
||||
handle401Error()
|
||||
}
|
||||
// 统一错误处理：输出关键信息，便于排查 403 等问题
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 处理 401 未授权错误
|
||||
* 清空 token 并退出登录
|
||||
*
|
||||
* 注意：使用防抖机制避免多个请求同时401时重复处理
|
||||
*/
|
||||
function handle401Error() {
|
||||
// 避免重复处理（防止多个请求同时401导致多次调用）
|
||||
if (handle401Error.processed) {
|
||||
return
|
||||
}
|
||||
|
||||
handle401Error.processed = true
|
||||
|
||||
// 1. 清空所有 token
|
||||
try {
|
||||
clearAllTokens() // 统一使用 token-manager 的清空函数
|
||||
} catch (e) {
|
||||
console.error('清空 token 失败:', e)
|
||||
}
|
||||
|
||||
// 2. 退出登录状态（清空用户信息）
|
||||
try {
|
||||
const userStore = useUserStore()
|
||||
// logout() 会清空用户信息和本地存储
|
||||
userStore.logout()
|
||||
} catch (e) {
|
||||
console.error('退出登录失败:', e)
|
||||
}
|
||||
|
||||
// 3. 提示用户（延迟显示，避免在清空过程中显示）
|
||||
setTimeout(() => {
|
||||
message.warning('登录已过期，请重新登录', 3)
|
||||
}, 100)
|
||||
|
||||
// 4. 延迟重置标志，避免短时间内重复处理
|
||||
setTimeout(() => {
|
||||
handle401Error.processed = false
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
export default http
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import http from '@/api/http'
|
||||
import { InterfaceType, MethodType, InterfaceUrlMap, ParamType } from './types'
|
||||
import qs from 'qs'
|
||||
import { API_BASE } from '@/api/config'
|
||||
// 使用公共配置
|
||||
import { API_BASE } from '@gold/config/api'
|
||||
|
||||
// 使用本地代理前缀 /tikhub，开发环境通过 Vite 代理到 https://api.tikhub.io
|
||||
const SERVER_TIKHUB = API_BASE.TIKHUB_APP
|
||||
|
||||
@@ -226,6 +226,10 @@ async function handleLoginSuccess(info) {
|
||||
credits: userInfo.credits ?? 0,
|
||||
}
|
||||
})
|
||||
|
||||
// 登录成功后获取完整的用户信息
|
||||
await userStore.fetchUserInfo()
|
||||
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { setDevToken, getDevToken } from '@/utils/token-manager'
|
||||
import { setDevToken, getDevToken } from '@gold/utils/token-manager'
|
||||
|
||||
const token = ref('')
|
||||
const isVisible = ref(true)
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import LoginModal from '@/components/LoginModal.vue'
|
||||
import TokenInput from '@/components/TokenInput.vue'
|
||||
import UserDropdown from '@/components/UserDropdown.vue'
|
||||
|
||||
const styles = {
|
||||
background: 'var(--color-surface)',
|
||||
@@ -12,6 +12,17 @@ const styles = {
|
||||
const userStore = useUserStore()
|
||||
const showLogin = ref(false)
|
||||
|
||||
// 计算是否应该显示用户组件
|
||||
// 判断用户是否有用户名，有用户名说明用户信息已加载完成
|
||||
// 使用 userStore.displayName 作为响应式依赖，确保用户信息变化时更新
|
||||
const shouldShowUser = computed(() => {
|
||||
// 检查用户是否有用户名（nickname 或 wechatNickname）
|
||||
// 有用户名说明用户信息已加载，可以显示用户组件
|
||||
const hasUserName = !!userStore.displayName && userStore.displayName !== '未命名用户'
|
||||
|
||||
return hasUserName
|
||||
})
|
||||
|
||||
// function go(path) {
|
||||
// router.push(path)
|
||||
// }
|
||||
@@ -28,11 +39,9 @@ const showLogin = ref(false)
|
||||
<!-- 左侧可放 logo 或其他内容 -->
|
||||
</div>
|
||||
<div class="flex items-center gap-4 pr-[35px]">
|
||||
<!-- Token 输入（仅开发/测试环境） -->
|
||||
<TokenInput />
|
||||
|
||||
<template v-if="userStore.isLoggedIn && userStore.displayAvatar">
|
||||
<img class="w-8 h-8 rounded-full" :src="userStore.displayAvatar" alt="avatar" />
|
||||
<template v-if="shouldShowUser">
|
||||
<UserDropdown />
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn-primary-nav" @click="showLogin = true">免费试用</button>
|
||||
|
||||
510
frontend/app/web-gold/src/components/UserDropdown.vue
Normal file
510
frontend/app/web-gold/src/components/UserDropdown.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const showDropdown = ref(false)
|
||||
|
||||
// 计算会员状态
|
||||
const isVip = computed(() => userStore.vipLevel > 0)
|
||||
const vipLevelText = computed(() => {
|
||||
if (userStore.vipLevel === 0) return '普通用户'
|
||||
if (userStore.vipLevel === 1) return 'VIP会员'
|
||||
if (userStore.vipLevel === 2) return '高级VIP'
|
||||
return `VIP${userStore.vipLevel}`
|
||||
})
|
||||
|
||||
// 计算存储空间（根据VIP等级设置不同总空间）
|
||||
const totalStorage = computed(() => {
|
||||
// VIP等级越高，总空间越大
|
||||
if (userStore.vipLevel >= 2) return 50 * 1024 // 50GB
|
||||
if (userStore.vipLevel === 1) return 20 * 1024 // 20GB
|
||||
return 10 * 1024 // 10GB (普通用户)
|
||||
})
|
||||
|
||||
const usedStorage = computed(() => {
|
||||
// 根据credits估算已用空间（这里可以根据实际业务逻辑调整）
|
||||
// 假设每1000积分对应100MB存储使用
|
||||
const estimatedFromCredits = (userStore.credits / 1000) * 100
|
||||
// 默认已用30%，但不超过总空间的80%
|
||||
const defaultUsed = totalStorage.value * 0.3
|
||||
return Math.min(Math.max(defaultUsed, estimatedFromCredits), totalStorage.value * 0.8)
|
||||
})
|
||||
|
||||
const availableStorage = computed(() => totalStorage.value - usedStorage.value)
|
||||
const storagePercent = computed(() => (usedStorage.value / totalStorage.value) * 100)
|
||||
|
||||
// 格式化存储空间显示
|
||||
function formatStorage(mb) {
|
||||
if (mb >= 1024) {
|
||||
return (mb / 1024).toFixed(1) + ' GB'
|
||||
}
|
||||
return Math.round(mb) + ' MB'
|
||||
}
|
||||
|
||||
// 格式化余额
|
||||
function formatBalance(balance) {
|
||||
return balance.toFixed(2)
|
||||
}
|
||||
|
||||
// 格式化积分
|
||||
function formatCredits(credits) {
|
||||
return credits.toLocaleString()
|
||||
}
|
||||
|
||||
// 处理鼠标进入
|
||||
function handleMouseEnter() {
|
||||
showDropdown.value = true
|
||||
}
|
||||
|
||||
// 处理鼠标离开
|
||||
function handleMouseLeave() {
|
||||
showDropdown.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="user-dropdown-wrapper"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<!-- 圆形头像 -->
|
||||
<div class="user-avatar-container">
|
||||
<img
|
||||
v-if="userStore.displayAvatar"
|
||||
class="user-avatar"
|
||||
:src="userStore.displayAvatar"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div v-else class="user-avatar-placeholder">
|
||||
{{ userStore.displayName?.charAt(0) || 'U' }}
|
||||
</div>
|
||||
<!-- VIP标识 -->
|
||||
<div v-if="isVip" class="vip-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M6 0L7.5 4.5L12 6L7.5 7.5L6 12L4.5 7.5L0 6L4.5 4.5L6 0Z" fill="#FFD700"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<transition name="dropdown-fade">
|
||||
<div v-if="showDropdown" class="user-dropdown">
|
||||
<!-- 箭头指示器 -->
|
||||
<div class="dropdown-arrow"></div>
|
||||
<div class="dropdown-header">
|
||||
<div class="header-avatar">
|
||||
<img
|
||||
v-if="userStore.displayAvatar"
|
||||
class="avatar-large"
|
||||
:src="userStore.displayAvatar"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div v-else class="avatar-large-placeholder">
|
||||
{{ userStore.displayName?.charAt(0) || 'U' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-info">
|
||||
<div class="user-name-row">
|
||||
<span class="user-name">{{ userStore.displayName }}</span>
|
||||
<span v-if="isVip" class="vip-tag">{{ vipLevelText }}</span>
|
||||
</div>
|
||||
<div class="user-id">ID: {{ userStore.userId || '未设置' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<div class="dropdown-content">
|
||||
<!-- 会员状态 -->
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
|
||||
<path d="M8 0L10 6L16 8L10 10L8 16L6 10L0 8L6 6L8 0Z" fill="currentColor" opacity="0.6"/>
|
||||
</svg>
|
||||
<span>会员状态</span>
|
||||
</div>
|
||||
<div class="info-value" :class="{ 'vip-text': isVip }">
|
||||
{{ vipLevelText }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 可用空间 -->
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
|
||||
<rect x="2" y="4" width="12" height="10" rx="1" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
|
||||
<path d="M5 4V2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2V4" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
|
||||
</svg>
|
||||
<span>可用空间</span>
|
||||
</div>
|
||||
<div class="info-value">
|
||||
{{ formatStorage(availableStorage) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 存储进度条 -->
|
||||
<div class="storage-progress">
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: storagePercent + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
<span>{{ formatStorage(usedStorage) }}</span>
|
||||
<span>/</span>
|
||||
<span>{{ formatStorage(totalStorage) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 剩余额度 -->
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
|
||||
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
|
||||
<path d="M8 4V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<span>剩余额度</span>
|
||||
</div>
|
||||
<div class="info-value credits-value">
|
||||
{{ formatCredits(userStore.credits) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账户余额 -->
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
|
||||
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
|
||||
<path d="M8 5V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<span>账户余额</span>
|
||||
</div>
|
||||
<div class="info-value balance-value">
|
||||
¥{{ formatBalance(userStore.balance) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<div class="dropdown-footer">
|
||||
<button class="action-btn" @click="userStore.logout">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M5 2H2C1.44772 2 1 2.44772 1 3V11C1 11.5523 1.44772 12 2 12H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M9 10L13 7L9 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 7H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-dropdown-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user-avatar-container {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.user-avatar-container:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--color-border);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
|
||||
.user-avatar-placeholder {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
border: 2px solid var(--color-border);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.user-avatar-placeholder:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--color-surface);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--color-border);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
right: 0;
|
||||
width: 320px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), var(--shadow-inset-card);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 20px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--color-surface);
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-top: 1px solid var(--color-border);
|
||||
transform: rotate(45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-large {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--color-primary);
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
|
||||
.avatar-large-placeholder {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
border: 2px solid var(--color-primary);
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vip-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.info-item:not(:last-child) {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.info-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: var(--color-text-secondary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.vip-text {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.credits-value {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.storage-progress {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: var(--color-bg);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
box-shadow: 0 0 8px var(--color-primary-glow);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.dropdown-footer {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--color-bg);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.action-btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* 下拉动画 */
|
||||
.dropdown-fade-enter-active,
|
||||
.dropdown-fade-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-fade-enter-from,
|
||||
.dropdown-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,6 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getToken } from '@gold/utils/token-manager'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@@ -48,4 +50,40 @@ const router = createRouter({
|
||||
routes,
|
||||
})
|
||||
|
||||
// 用户信息初始化标志（确保只初始化一次）
|
||||
let userInfoInitialized = false
|
||||
|
||||
/**
|
||||
* 路由导航守卫：初始化用户信息
|
||||
* 在首次路由跳转时，如果已登录（有 token），则获取用户信息
|
||||
*/
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
// 只在首次路由跳转时初始化用户信息
|
||||
if (!userInfoInitialized) {
|
||||
userInfoInitialized = true
|
||||
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
try {
|
||||
const userStore = useUserStore()
|
||||
// 如果 store 中已标记为登录，则获取用户信息
|
||||
if (userStore.isLoggedIn) {
|
||||
userStore.fetchUserInfo()
|
||||
} else {
|
||||
// 如果有 token 但 store 中未标记为登录，可能是刷新页面
|
||||
// 先标记为已登录，然后获取用户信息
|
||||
userStore.isLoggedIn = true
|
||||
userStore.fetchUserInfo()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化用户信息失败:', error)
|
||||
// 不阻止路由跳转，继续执行
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 继续路由跳转
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { getJSON, setJSON, remove } from '@/utils/storage'
|
||||
import { clearAllTokens } from '@gold/utils/token-manager'
|
||||
|
||||
// 本地持久化的 key
|
||||
const STORAGE_KEY = 'user_store_v1'
|
||||
@@ -105,7 +106,48 @@ export const useUserStore = defineStore('user', () => {
|
||||
await persist()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户信息（从后端）
|
||||
* 登录成功后调用，更新用户信息
|
||||
* 使用公共 hook @gold/hooks/web/useUserInfo
|
||||
*/
|
||||
async function fetchUserInfo() {
|
||||
try {
|
||||
// 使用公共 hook 获取用户信息
|
||||
const { getUserInfo } = await import('@gold/hooks/web/useUserInfo')
|
||||
const { getToken } = await import('@gold/utils/token-manager')
|
||||
|
||||
const userInfo = await getUserInfo({
|
||||
getToken,
|
||||
})
|
||||
|
||||
if (userInfo) {
|
||||
// 更新用户信息
|
||||
userId.value = String(userInfo.id || userInfo.userId || userId.value)
|
||||
nickname.value = userInfo.nickname || nickname.value
|
||||
avatar.value = userInfo.avatar || avatar.value
|
||||
// 如果有其他字段，也可以更新
|
||||
if (userInfo.point !== undefined) credits.value = Number(userInfo.point || 0)
|
||||
if (userInfo.experience !== undefined) {
|
||||
// experience 可以映射到其他字段，根据实际需求
|
||||
}
|
||||
await persist()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error)
|
||||
// 不抛出错误，避免影响登录流程
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
// 1. 清空所有 token
|
||||
try {
|
||||
clearAllTokens()
|
||||
} catch (e) {
|
||||
console.error('清空 token 失败:', e)
|
||||
}
|
||||
|
||||
// 2. 清空用户信息
|
||||
isLoggedIn.value = false
|
||||
userId.value = ''
|
||||
nickname.value = ''
|
||||
@@ -117,13 +159,22 @@ export const useUserStore = defineStore('user', () => {
|
||||
balance.value = 0
|
||||
vipLevel.value = 0
|
||||
credits.value = 0
|
||||
|
||||
// 3. 删除本地存储的用户数据
|
||||
await remove(STORAGE_KEY)
|
||||
}
|
||||
|
||||
// 初始化标志
|
||||
const isHydrated = ref(false)
|
||||
|
||||
// 初始化从本地恢复
|
||||
hydrateFromStorage()
|
||||
hydrateFromStorage().then(() => {
|
||||
isHydrated.value = true
|
||||
})
|
||||
|
||||
return {
|
||||
// 状态
|
||||
isHydrated,
|
||||
// state
|
||||
isLoggedIn,
|
||||
userId,
|
||||
@@ -143,6 +194,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
loginWithPhone,
|
||||
loginWithWeChat,
|
||||
updateBalance,
|
||||
fetchUserInfo,
|
||||
logout,
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,42 +1,54 @@
|
||||
import { useCache } from '@gold/hooks/web/useCache'
|
||||
import { getToken as getTokenFromManager } from './token-manager'
|
||||
/**
|
||||
* Token 管理兼容层
|
||||
*
|
||||
* @deprecated 此文件已废弃，请直接使用 @gold/utils/token-manager
|
||||
*
|
||||
* 为了保持向后兼容，此文件作为兼容层，所有函数都转发到 token-manager.js
|
||||
* 新代码请直接使用 @gold/utils/token-manager 中的函数
|
||||
*/
|
||||
|
||||
const { wsCache } = useCache()
|
||||
import {
|
||||
getToken as getTokenFromManager,
|
||||
setToken as setTokenFromManager,
|
||||
getRefreshToken as getRefreshTokenFromManager,
|
||||
getAccessToken as getAccessTokenFromManager,
|
||||
removeToken as removeTokenFromManager,
|
||||
clearAllTokens,
|
||||
getAuthHeader
|
||||
} from '@gold/utils/token-manager'
|
||||
|
||||
const AccessTokenKey = 'ACCESS_TOKEN'
|
||||
const RefreshTokenKey = 'REFRESH_TOKEN'
|
||||
/**
|
||||
* 获取访问令牌
|
||||
* @deprecated 使用 @gold/utils/token-manager 中的 getToken() 或 getAccessToken()
|
||||
*/
|
||||
export const getAccessToken = getAccessTokenFromManager
|
||||
|
||||
// 获取token - 使用统一的 token 管理器
|
||||
export const getAccessToken = () => {
|
||||
return getTokenFromManager()
|
||||
}
|
||||
/**
|
||||
* 获取刷新令牌
|
||||
* @deprecated 使用 @gold/utils/token-manager 中的 getRefreshToken()
|
||||
*/
|
||||
export const getRefreshToken = getRefreshTokenFromManager
|
||||
|
||||
// 刷新token
|
||||
export const getRefreshToken = () => {
|
||||
try {
|
||||
// 优先从 wsCache 读取
|
||||
const refreshToken = wsCache.get(RefreshTokenKey) || wsCache.get('refresh_token')
|
||||
if (refreshToken) {
|
||||
return refreshToken
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('获取 refresh token 失败:', e)
|
||||
}
|
||||
return null
|
||||
}
|
||||
// 设置token
|
||||
export const setToken = (token) => {
|
||||
wsCache.set(RefreshTokenKey, token.refreshToken)
|
||||
wsCache.set(AccessTokenKey, token.accessToken)
|
||||
}
|
||||
/**
|
||||
* 设置令牌
|
||||
* @deprecated 使用 @gold/utils/token-manager 中的 setToken()
|
||||
*/
|
||||
export const setToken = setTokenFromManager
|
||||
|
||||
// 删除token
|
||||
export const removeToken = () => {
|
||||
wsCache.delete(AccessTokenKey)
|
||||
wsCache.delete(RefreshTokenKey)
|
||||
}
|
||||
/**
|
||||
* 删除令牌
|
||||
* @deprecated 使用 @gold/utils/token-manager 中的 clearAllTokens() 或 removeToken()
|
||||
*/
|
||||
export const removeToken = removeTokenFromManager
|
||||
|
||||
/** 格式化token（jwt格式） */
|
||||
/**
|
||||
* 格式化token（jwt格式）
|
||||
* @param {string} token - token 字符串
|
||||
* @returns {string} Bearer token
|
||||
*/
|
||||
export const formatToken = (token) => {
|
||||
return 'Bearer ' + token
|
||||
}
|
||||
|
||||
// 导出 token-manager 的其他函数，方便迁移
|
||||
export { clearAllTokens, getAuthHeader }
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
import { useCache } from '@gold/hooks/web/useCache'
|
||||
|
||||
/**
|
||||
* Token 统一管理模块
|
||||
*
|
||||
* 优先级顺序：
|
||||
* 1. 手动输入的 dev token (sessionStorage)
|
||||
* 2. 正式登录的 token (wsCache)
|
||||
* 3. 环境变量 VITE_DEV_TOKEN
|
||||
*/
|
||||
|
||||
// sessionStorage 中的手动 token key
|
||||
const DEV_MANUAL_TOKEN_KEY = 'DEV_MANUAL_TOKEN'
|
||||
|
||||
// 获取缓存实例
|
||||
let wsCache = null
|
||||
function getCache() {
|
||||
if (!wsCache) {
|
||||
wsCache = useCache().wsCache
|
||||
}
|
||||
return wsCache
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取完整的 Authorization Header 值
|
||||
* @returns {string} Bearer token 或空字符串
|
||||
*/
|
||||
export function getAuthHeader() {
|
||||
const token = getToken()
|
||||
return token ? `Bearer ${token}` : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 token
|
||||
* @returns {string} token 字符串
|
||||
*/
|
||||
export function getToken() {
|
||||
// 1. 优先使用手动输入的 dev token
|
||||
const manualToken = sessionStorage.getItem(DEV_MANUAL_TOKEN_KEY)
|
||||
if (manualToken) {
|
||||
return manualToken
|
||||
}
|
||||
|
||||
// 2. 使用正式登录的 token（从 wsCache 读取）
|
||||
try {
|
||||
const cache = getCache()
|
||||
const accessToken = cache.get('ACCESS_TOKEN') || cache.get('access_token')
|
||||
|
||||
if (accessToken) {
|
||||
return accessToken
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('获取 wsCache 失败:', e)
|
||||
}
|
||||
|
||||
// 3. 兜底：环境变量中的 token
|
||||
const envToken = import.meta?.env?.VITE_DEV_TOKEN
|
||||
if (envToken) {
|
||||
return envToken
|
||||
}
|
||||
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置手动输入的 dev token
|
||||
* @param {string} token
|
||||
*/
|
||||
export function setDevToken(token) {
|
||||
if (token) {
|
||||
sessionStorage.setItem(DEV_MANUAL_TOKEN_KEY, token)
|
||||
} else {
|
||||
sessionStorage.removeItem(DEV_MANUAL_TOKEN_KEY)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取手动输入的 dev token（用于显示）
|
||||
* @returns {string}
|
||||
*/
|
||||
export function getDevToken() {
|
||||
return sessionStorage.getItem(DEV_MANUAL_TOKEN_KEY) || ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有 token
|
||||
*/
|
||||
export function clearAllTokens() {
|
||||
sessionStorage.removeItem(DEV_MANUAL_TOKEN_KEY)
|
||||
try {
|
||||
const cache = getCache()
|
||||
cache.delete('ACCESS_TOKEN')
|
||||
cache.delete('access_token')
|
||||
cache.delete('REFRESH_TOKEN')
|
||||
cache.delete('refresh_token')
|
||||
} catch (e) {
|
||||
console.warn('清除 wsCache 失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), '')
|
||||
const DEV_TOKEN = env.VITE_DEV_TOKEN || ''
|
||||
const TENANT_ID = env.VITE_TENANT_ID || '1'
|
||||
const API_TARGET = env.VITE_PROXY_TARGET || 'http://8.155.172.147:9900'
|
||||
const API_TARGET = env.VITE_PROXY_TARGET || 'http://localhost:9900'
|
||||
|
||||
return {
|
||||
plugins: [
|
||||
@@ -61,6 +61,7 @@ export default defineConfig(({ mode }) => {
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
// 代理 /webApi 开头的请求
|
||||
'/webApi': {
|
||||
target: API_TARGET,
|
||||
changeOrigin: true,
|
||||
|
||||
51
frontend/config/api.js
Normal file
51
frontend/config/api.js
Normal file
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* 公共 API 基础配置
|
||||
* 统一管理所有 API 的基础 URL
|
||||
* 可在各个应用中通过 @gold/config/api 引用
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取基础 URL（从环境变量读取）
|
||||
* @returns {string}
|
||||
*/
|
||||
function getBaseUrl() {
|
||||
// 支持在浏览器环境和 Node 环境
|
||||
if (typeof import.meta !== 'undefined' && import.meta.env) {
|
||||
return import.meta.env.VITE_BASE_URL || ''
|
||||
}
|
||||
// 如果是在 Node 环境或 SSR，可以从 process.env 读取
|
||||
if (typeof process !== 'undefined' && process.env) {
|
||||
return process.env.VITE_BASE_URL || ''
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const BASE_URL = getBaseUrl()
|
||||
|
||||
/**
|
||||
* API 基础路径配置
|
||||
*/
|
||||
export const API_BASE = {
|
||||
// 会员端 API
|
||||
APP: `${BASE_URL}`,
|
||||
// 具体模块路径
|
||||
ADMIN_AI: `${BASE_URL}/admin-api/ai`,
|
||||
APP_MEMBER: `${BASE_URL}/app-api/member`,
|
||||
|
||||
// 特殊路径
|
||||
TIKHUB_APP: `${BASE_URL}/api/tikHup`,
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取完整的 API 路径
|
||||
* @param {string} module - 模块名称 (如 'ADMIN_AI', 'APP_MEMBER')
|
||||
* @param {string} path - 接口路径 (如 '/chat/conversation/create-my')
|
||||
* @returns {string} 完整的 API URL
|
||||
*/
|
||||
export function getApiUrl(module, path) {
|
||||
const base = API_BASE[module] || API_BASE.APP
|
||||
return `${base}${path.startsWith('/') ? path : '/' + path}`
|
||||
}
|
||||
|
||||
export default API_BASE
|
||||
|
||||
52
frontend/config/types.ts
Normal file
52
frontend/config/types.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* 公共类型定义
|
||||
* 可在 monorepo 各个应用中复用
|
||||
*/
|
||||
|
||||
/**
|
||||
* 音频项接口
|
||||
*/
|
||||
export interface AudioItem {
|
||||
audio_url: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 转录结果接口
|
||||
*/
|
||||
export interface TranscriptionResult {
|
||||
key: string
|
||||
audio_url?: string
|
||||
value: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频转字符请求参数
|
||||
*/
|
||||
export interface VideoToCharactersRequest {
|
||||
fileLinkList: string[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频转字符响应接口
|
||||
*/
|
||||
export interface VideoToCharactersResponse {
|
||||
data: string // JSON 字符串，包含 results 数组
|
||||
}
|
||||
|
||||
/**
|
||||
* 转录响应结果
|
||||
*/
|
||||
export interface TranscriptionResponse {
|
||||
results: Array<{
|
||||
transcription_url: string
|
||||
}>
|
||||
}
|
||||
|
||||
/**
|
||||
* 转录数据接口
|
||||
*/
|
||||
export interface TranscriptionData {
|
||||
file_url?: string
|
||||
transcripts?: Array<{ text: string }>
|
||||
}
|
||||
|
||||
@@ -1,146 +0,0 @@
|
||||
## 金牌内容大师软件页面结构
|
||||
|
||||
### 整体布局
|
||||
- 顶部导航（深灰）：左侧 Logo（紫底白“逗”字 + 文案），右侧通知铃铛（红点数）、用户头像、主题切换
|
||||
- 一级模块导航（横向 Tab/菜单）：
|
||||
- 内容风格分析（含 对标分析｜文案创作）
|
||||
- 热点趋势分析（含 热度分析｜热点预测｜文案创作）
|
||||
- 数字人（含 声音训练｜生成配音｜生成数字人）
|
||||
- 实时热点推送
|
||||
- 素材混剪
|
||||
- 剪映导入
|
||||
- 购买会员（优惠标签）｜推广赚钱（HOT 标签）｜帮助｜下载
|
||||
- 主内容区（白色背景）：按选中模块展示对应子模块页面
|
||||
- 底部信息（可选）：版本号、API 状态、版权提示
|
||||
|
||||
|
||||
### 模块与子模块页面结构
|
||||
|
||||
#### 模块一：内容风格分析
|
||||
1) 子模块：对标分析
|
||||
- 顶部：标题“对标分析” + 简介 + 帮助入口
|
||||
- 操作面板（左侧卡片）：
|
||||
- 链接输入区：平台选择单选（抖音｜小红书）+ 主页/视频链接输入框
|
||||
- 筛选项：点赞/收藏/评论范围、多选标签、时间范围、数量上限
|
||||
- 执行按钮：开始分析（主色）、清空、示例一键填充
|
||||
- 结果区（右侧/下方）：
|
||||
- 概览卡片：账号画像、样本量、时间窗口
|
||||
- 结构分析卡片：标题结构要素、镜头/段落结构、开场/转场/收束模式
|
||||
- 关键词统计：词云 + 频次表格
|
||||
- 情绪倾向：柱状/雷达图（正/负/中性 + 情绪强度）
|
||||
- 文本质量检测：错别字、语法、可读性评分
|
||||
- 导出区：生成 Word 报告（含目录/图表/表格）、复制结论摘要
|
||||
- 扩展卡片：风格特征提示词（结构模式、表达方式、比喻/设问等）
|
||||
|
||||
2) 子模块：文案创作
|
||||
- 顶部：标题“文案创作” + 风格来源选择（对标分析结果/手动配置）
|
||||
- 左侧：创作参数卡片
|
||||
- 主题/选题输入、受众画像、平台体裁（短视频/图文）、字数与段落数
|
||||
- 风格特征（从对标分析继承或手动选择）：语气、句式密度、金句频率、节奏
|
||||
- 约束：禁用词、合规提醒、敏感词检测
|
||||
- 生成按钮：生成文案（可多样本）
|
||||
- 右侧：结果编辑器
|
||||
- 多样本标签页切换、评分与重写、段落级润色与扩写
|
||||
- 结构优化建议面板（共享逻辑）：标题建议、开头抓取点、转场优化、CTA 变体
|
||||
- 导出：复制、保存为草稿、导出 Markdown/Word
|
||||
|
||||
#### 模块二：热点趋势分析
|
||||
1) 子模块：热度分析
|
||||
- 顶部：标题“热度分析” + 数据源指示（官方 API｜第三方）
|
||||
- 左侧：关键词与订阅
|
||||
- 关键词输入（支持多个），平台选择，时间窗口，频率（实时/每日）
|
||||
- 订阅开关：关注话题变化通知
|
||||
- 查询按钮
|
||||
- 右侧：趋势看板
|
||||
- 热度折线/面积图（支持对比多个关键词）
|
||||
- 相关话题分布（词云/桑基/气泡图）
|
||||
- 榜单列表（热度值、涨跌幅、来源、时间）
|
||||
- 个性化推荐（可选）：基于历史偏好推荐相近话题
|
||||
- 竞品分析（可选）：同类内容的表现对比与优化方向
|
||||
- 导出：趋势报告 PDF/图片、订阅保存
|
||||
|
||||
2) 子模块：热点预测
|
||||
- 顶部：标题“热点预测” + 更新频率 + 最近同步时间
|
||||
- 左侧：数据设置
|
||||
- 平台榜单选择、历史维度、预测周期、预测方法（可选）
|
||||
- 执行按钮：计算预测
|
||||
- 右侧：预测结果
|
||||
- 趋势外推曲线与置信区间
|
||||
- 上升/下降话题榜卡片
|
||||
- 风险提示与置信度标注
|
||||
- 原创建议（核心扩展）：基于趋势给出选题与角度建议，一键跳转“文案创作”
|
||||
|
||||
3) 子模块：文案创作（与模块一共享逻辑）
|
||||
- 入口参数预填：来自热度分析/热点预测的关键词与角度
|
||||
- 结果编辑器同模块一，增加“热点引用标注”与“数据出处注记”
|
||||
|
||||
#### 模块三：数字人
|
||||
1) 子模块：声音训练
|
||||
- 左侧：样本上传
|
||||
- 上传语音样本（数量/时长提示）、采样率与格式要求、合法性合规弹窗
|
||||
- 训练参数：噪声抑制、音域范围、情感维度
|
||||
- 提交训练按钮
|
||||
- 右侧：训练进度与质量
|
||||
- 进度条、阶段日志、预计完成时间
|
||||
- 质量检测结果：信噪比、清晰度、稳定性评分
|
||||
- 优化建议卡片
|
||||
|
||||
2) 子模块：生成配音
|
||||
- 左侧：文本输入与语气控制
|
||||
- 文案输入（或从“文案创作”选择）、说话速度、停连、情感标签
|
||||
- 说话人（训练好的声线列表）、发音词典（可选）
|
||||
- 生成按钮 + 批量生成
|
||||
- 右侧：音频预览与管理
|
||||
- 播放、片段试听、对比 A/B、噪声/呼吸/口型对齐提示
|
||||
- 质量检测报告（可选）：节奏、情感一致性、清晰度
|
||||
- 下载（mp3/wav）与导出到“剪映导入”
|
||||
|
||||
3) 子模块：生成数字人
|
||||
- 左侧：配置
|
||||
- 数字人形象选择、背景与模板、脚本来源（文案 + 配音）
|
||||
- 表情与动作控制（关键帧/预设）、唇形同步开关
|
||||
- 分辨率、时长、字幕选项
|
||||
- 生成按钮
|
||||
- 右侧：视频预览与任务队列
|
||||
- 渲染进度、日志、错误重试
|
||||
- 导出（mp4｜mov）与推送至“剪映导入”
|
||||
|
||||
#### 模块四：实时热点推送
|
||||
- 榜单看板：平台切换、实时/小时/日视图
|
||||
- 订阅管理：新增/编辑/删除、通知频率、通知方式
|
||||
- 趋势联动：一键进入“热点预测”分析
|
||||
|
||||
#### 模块五：素材混剪
|
||||
- 左侧：文案拆解
|
||||
- 从“文案创作”选择文案，自动分段（镜头/语义）
|
||||
- 段落卡片：时长建议、情绪标签、镜头类型
|
||||
- 右侧：素材匹配与时间线
|
||||
- 素材库搜索（标签/颜色/场景/人物），AI 推荐位
|
||||
- 画布与时间线：轨道（视频/音频/字幕），吸附与对齐
|
||||
- 一键组合：按模版快速生成初版
|
||||
- 导出到“剪映导入”
|
||||
|
||||
#### 模块六：剪映导入
|
||||
- 导入项选择：文案、字幕文件、配音音频、数字人视频、混剪工程
|
||||
- 格式兼容提示：编码、帧率、分辨率、自适配策略
|
||||
- 一键导入：生成剪映工程文件/素材包，打开路径/直接启动剪映（可选）
|
||||
|
||||
### 设计要点（模块化增强）
|
||||
- 色彩：紫色主色、深灰导航、白色内容区；状态色区分任务与错误
|
||||
- 图标：模块与子模块使用语义明确图标，功能与结果分区清晰
|
||||
- 交互：双栏布局优先（左操作右结果/预览），异步任务显著进度提示
|
||||
- 信息层次：概览 > 关键图表/卡片 > 详细表格/日志
|
||||
- 模块联动：子模块间保留“送往/引入”操作（如趋势 → 文案、文案 → 配音/数字人、生成项 → 剪映）
|
||||
- 合规与提示：上传/生成环节均有合规提醒与风险提示，不展示原始受版权保护内容
|
||||
|
||||
### 技术实现提示词
|
||||
- 前端：Vue.js + Vite + Tailwind CSS，组件化（导航、表格、图表、上传、时间线）
|
||||
- 状态管理：用户信息、通知数量、主题、任务队列、订阅配置
|
||||
- 图表：折线/面积/柱状/雷达/词云（ECharts 或 Chart.js）
|
||||
- 文件：音视频上传与转码进度、任务轮询、失败重试
|
||||
- API 接口：模块化设计，参数入参与结构化响应，跨模块数据传递（如选题、风格特征、音视频产物）
|
||||
- 导出：Word/PDF 报告、媒体文件、剪映工程/素材包
|
||||
|
||||
### 工作流快捷入口（横向步骤条）
|
||||
- 对标分析 → 文案创作 → 生成配音/数字人 → 素材混剪 → 剪映导入
|
||||
- 每步显示完成状态与产物摘要，支持回溯与替换
|
||||
176
frontend/hooks/web/README.md
Normal file
176
frontend/hooks/web/README.md
Normal file
@@ -0,0 +1,176 @@
|
||||
# 公共 Hooks 模块
|
||||
|
||||
此目录包含可在 monorepo 各个应用中复用的 Vue Composition API Hooks。
|
||||
|
||||
## 📁 目录结构
|
||||
|
||||
```
|
||||
hooks/web/
|
||||
├── useCache.js # 缓存管理 Hook
|
||||
├── useUserInfo.js # 用户信息获取 Hook
|
||||
└── useVoiceText.ts # 语音文本处理 Hook（已抽离为公共模块）
|
||||
```
|
||||
|
||||
## 🚀 使用方式
|
||||
|
||||
### useUserInfo Hook
|
||||
|
||||
获取用户信息的公共 Hook，可在各个应用中复用。
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```javascript
|
||||
import { useUserInfo } from '@gold/hooks/web/useUserInfo'
|
||||
import { getToken } from '@/utils/token-manager'
|
||||
|
||||
// 在组件中使用
|
||||
const { fetchUserInfo, loading, error, userInfo } = useUserInfo({
|
||||
getToken, // 传入获取 token 的函数
|
||||
})
|
||||
|
||||
// 获取用户信息
|
||||
await fetchUserInfo()
|
||||
```
|
||||
|
||||
#### 便捷函数
|
||||
|
||||
如果只需要获取一次用户信息，可以使用便捷函数：
|
||||
|
||||
```javascript
|
||||
import { getUserInfo } from '@gold/hooks/web/useUserInfo'
|
||||
import { getToken } from '@/utils/token-manager'
|
||||
|
||||
// 直接获取用户信息
|
||||
const userInfo = await getUserInfo({
|
||||
getToken,
|
||||
})
|
||||
```
|
||||
|
||||
#### 自定义配置
|
||||
|
||||
```javascript
|
||||
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<boolean>): 加载状态
|
||||
- `error` (Ref<Error | null>): 错误信息
|
||||
- `userInfo` (Ref<Object | null>): 用户信息数据
|
||||
|
||||
### getUserInfo(options)
|
||||
|
||||
便捷函数，直接返回用户信息对象。
|
||||
|
||||
**参数：** 同 `useUserInfo`
|
||||
|
||||
**返回值：** `Promise<Object>` 用户信息对象
|
||||
|
||||
## 🔄 在 Store 中使用
|
||||
|
||||
```javascript
|
||||
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，将音频文件转换为文本转录。
|
||||
|
||||
#### 初始化（在应用启动时）
|
||||
|
||||
```javascript
|
||||
// 在应用的 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)
|
||||
```
|
||||
|
||||
#### 使用方式
|
||||
|
||||
```javascript
|
||||
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: '...' }]
|
||||
```
|
||||
|
||||
#### 类型定义
|
||||
|
||||
```typescript
|
||||
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` 别名：
|
||||
|
||||
```javascript
|
||||
resolve: {
|
||||
alias: {
|
||||
'@gold': fileURLToPath(new URL('../../', import.meta.url))
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -9,6 +9,9 @@ export const CACHE_KEY = {
|
||||
ROLE_ROUTERS: 'roleRouters',
|
||||
USER: 'user',
|
||||
VisitTenantId: 'visitTenantId',
|
||||
// Token 相关
|
||||
ACCESS_TOKEN: 'ACCESS_TOKEN',
|
||||
REFRESH_TOKEN: 'REFRESH_TOKEN',
|
||||
// 系统设置
|
||||
IS_DARK: 'isDark',
|
||||
LANG: 'lang',
|
||||
@@ -37,3 +40,29 @@ export const deleteUserCache = () => {
|
||||
wsCache.delete(CACHE_KEY.VisitTenantId)
|
||||
// 注意，不要清理 LoginForm 登录表单
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除所有 token 缓存
|
||||
* 清空 wsCache 中所有可能的 token 键名变体
|
||||
*/
|
||||
export const deleteTokenCache = () => {
|
||||
try {
|
||||
const { wsCache } = useCache()
|
||||
// 删除所有可能的 token 键名变体（大小写不同）
|
||||
const tokenKeys = [
|
||||
CACHE_KEY.ACCESS_TOKEN,
|
||||
'access_token',
|
||||
CACHE_KEY.REFRESH_TOKEN,
|
||||
'refresh_token'
|
||||
]
|
||||
tokenKeys.forEach(key => {
|
||||
try {
|
||||
wsCache.delete(key)
|
||||
} catch (e) {
|
||||
// 忽略单个键删除失败
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
console.warn('删除 token 缓存失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
150
frontend/hooks/web/useUserInfo.js
Normal file
150
frontend/hooks/web/useUserInfo.js
Normal file
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* 用户信息 Hook
|
||||
* 封装获取用户信息的逻辑，可在各个应用中复用
|
||||
*
|
||||
* 使用方式：
|
||||
* import { useUserInfo } from '@gold/hooks/web/useUserInfo'
|
||||
*
|
||||
* const { fetchUserInfo, loading, error } = useUserInfo()
|
||||
* await fetchUserInfo()
|
||||
*/
|
||||
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { API_BASE } from '@gold/config/api'
|
||||
|
||||
// 获取 token 的工具函数（需要从应用层传入或使用全局配置）
|
||||
let getTokenFn = null
|
||||
|
||||
/**
|
||||
* 设置获取 token 的函数
|
||||
* @param {Function} fn - 获取 token 的函数
|
||||
*/
|
||||
export function setTokenGetter(fn) {
|
||||
getTokenFn = fn
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 Authorization Header
|
||||
* @returns {string}
|
||||
*/
|
||||
function getAuthHeader() {
|
||||
if (getTokenFn) {
|
||||
const token = getTokenFn()
|
||||
return token ? `Bearer ${token}` : ''
|
||||
}
|
||||
// 如果没有设置 token getter，尝试从常见位置获取
|
||||
try {
|
||||
// 尝试从 sessionStorage 获取
|
||||
const manualToken = sessionStorage.getItem('DEV_MANUAL_TOKEN')
|
||||
if (manualToken) {
|
||||
return `Bearer ${manualToken}`
|
||||
}
|
||||
} catch (e) {
|
||||
// 忽略错误
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户信息 Hook
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {string} options.baseUrl - API 基础 URL（可选，默认使用 APP_MEMBER）
|
||||
* @param {Function} options.getToken - 获取 token 的函数（可选）
|
||||
* @returns {Object} { fetchUserInfo, loading, error, userInfo }
|
||||
*/
|
||||
export function useUserInfo(options = {}) {
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
const userInfo = ref(null)
|
||||
|
||||
// 如果传入了 getToken 函数，设置它
|
||||
if (options.getToken) {
|
||||
setTokenGetter(options.getToken)
|
||||
}
|
||||
|
||||
// 确定 API 基础路径
|
||||
const baseUrl = options.baseUrl || API_BASE.APP_MEMBER
|
||||
const apiUrl = `${baseUrl}/user/get`
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
* @returns {Promise<Object>} 用户信息对象
|
||||
*/
|
||||
async function fetchUserInfo() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const authHeader = getAuthHeader()
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
|
||||
if (authHeader) {
|
||||
headers.Authorization = authHeader
|
||||
}
|
||||
|
||||
// 获取 tenant-id（从环境变量或默认值）
|
||||
const tenantId =
|
||||
(typeof import.meta !== 'undefined' && import.meta.env?.VITE_TENANT_ID) ||
|
||||
(typeof process !== 'undefined' && process.env?.VITE_TENANT_ID) ||
|
||||
'1'
|
||||
|
||||
if (tenantId) {
|
||||
headers['tenant-id'] = tenantId
|
||||
}
|
||||
|
||||
const response = await axios.get(apiUrl, { headers })
|
||||
|
||||
// 处理响应数据（根据后端返回格式调整）
|
||||
// 后端通常返回 { code: 0, data: {...}, msg: '...' } 格式
|
||||
let data = null
|
||||
if (response.data) {
|
||||
// 如果响应有 code 字段，说明是标准格式
|
||||
if (typeof response.data.code === 'number') {
|
||||
// code 为 0 或 200 表示成功
|
||||
if (response.data.code === 0 || response.data.code === 200) {
|
||||
data = response.data.data || response.data
|
||||
} else {
|
||||
throw new Error(response.data.msg || response.data.message || '获取用户信息失败')
|
||||
}
|
||||
} else {
|
||||
// 没有 code 字段，直接使用 data
|
||||
data = response.data.data || response.data
|
||||
}
|
||||
}
|
||||
|
||||
if (data) {
|
||||
userInfo.value = data
|
||||
return data
|
||||
} else {
|
||||
throw new Error('获取用户信息失败：响应数据为空')
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err
|
||||
console.error('获取用户信息失败:', err)
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
fetchUserInfo,
|
||||
loading,
|
||||
error,
|
||||
userInfo,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 便捷函数：直接获取用户信息（不返回响应式状态）
|
||||
* @param {Object} options - 配置选项
|
||||
* @returns {Promise<Object>} 用户信息对象
|
||||
*/
|
||||
export async function getUserInfo(options = {}) {
|
||||
const { fetchUserInfo } = useUserInfo(options)
|
||||
return await fetchUserInfo()
|
||||
}
|
||||
|
||||
@@ -1,26 +1,33 @@
|
||||
import CommonService from '@/api/common'
|
||||
import type { AudioItem, TranscriptionResult } from '@/src/types/global'
|
||||
// 使用公共类型定义
|
||||
import type {
|
||||
AudioItem,
|
||||
TranscriptionResult,
|
||||
TranscriptionResponse,
|
||||
TranscriptionData
|
||||
} from '@gold/config/types'
|
||||
|
||||
/**
|
||||
* 转录数据接口
|
||||
* API 服务接口（需要从应用层注入）
|
||||
*/
|
||||
interface TranscriptionData {
|
||||
file_url?: string
|
||||
transcripts?: Array<{ text: string }>
|
||||
interface ApiService {
|
||||
videoToCharacters: (data: { fileLinkList: string[] }) => Promise<{ data: string }>
|
||||
}
|
||||
|
||||
// 全局 API 服务实例（由应用层设置）
|
||||
let apiServiceInstance: ApiService | null = null
|
||||
|
||||
/**
|
||||
* 响应结果接口
|
||||
* 设置 API 服务实例
|
||||
* @param service - API 服务对象
|
||||
*/
|
||||
interface TranscriptionResponse {
|
||||
results: Array<{
|
||||
transcription_url: string
|
||||
}>
|
||||
export function setApiService(service: ApiService) {
|
||||
apiServiceInstance = service
|
||||
}
|
||||
|
||||
/**
|
||||
* 将音频列表转换为文本转录
|
||||
* @param list - 音频项列表
|
||||
* @param apiService - API 服务实例（可选，如果已通过 setApiService 设置则不需要）
|
||||
* @returns 转录结果数组
|
||||
* @throws 当转录过程出错时抛出错误
|
||||
*
|
||||
@@ -29,9 +36,19 @@ interface TranscriptionResponse {
|
||||
* const transcriptions = await getVoiceText(audioList)
|
||||
* console.log(transcriptions) // [{ key: 'url', value: 'transcribed text' }]
|
||||
*/
|
||||
export async function getVoiceText(list: AudioItem[]): Promise<TranscriptionResult[]> {
|
||||
export async function getVoiceText(
|
||||
list: AudioItem[],
|
||||
apiService?: ApiService
|
||||
): Promise<TranscriptionResult[]> {
|
||||
// 使用传入的 apiService 或全局实例
|
||||
const service = apiService || apiServiceInstance
|
||||
|
||||
if (!service) {
|
||||
throw new Error('getVoiceText: 需要提供 API 服务实例。请使用 setApiService() 设置或传入 apiService 参数')
|
||||
}
|
||||
|
||||
// 调用API将视频转换为文本
|
||||
const ret = await CommonService.videoToCharacters({
|
||||
const ret = await service.videoToCharacters({
|
||||
fileLinkList: list.map(item => item.audio_url),
|
||||
})
|
||||
|
||||
@@ -68,19 +85,29 @@ export async function getVoiceText(list: AudioItem[]): Promise<TranscriptionResu
|
||||
* Hook 返回值接口
|
||||
*/
|
||||
interface UseVoiceTextReturn {
|
||||
getVoiceText: (list: AudioItem[]) => Promise<TranscriptionResult[]>
|
||||
getVoiceText: (list: AudioItem[], apiService?: ApiService) => Promise<TranscriptionResult[]>
|
||||
}
|
||||
|
||||
/**
|
||||
* 语音文本转换 Hook
|
||||
* @param apiService - API 服务实例（可选，如果已通过 setApiService 设置则不需要）
|
||||
* @returns 包含 getVoiceText 方法的对象
|
||||
*
|
||||
* @example
|
||||
* // 方式一：使用全局设置的 API 服务
|
||||
* setApiService(myApiService)
|
||||
* const { getVoiceText } = useVoiceText()
|
||||
* const result = await getVoiceText(audioList)
|
||||
*
|
||||
* @example
|
||||
* // 方式二：传入 API 服务实例
|
||||
* const { getVoiceText } = useVoiceText()
|
||||
* const result = await getVoiceText(audioList, myApiService)
|
||||
*/
|
||||
export default function useVoiceText(): UseVoiceTextReturn {
|
||||
return { getVoiceText }
|
||||
export default function useVoiceText(apiService?: ApiService): UseVoiceTextReturn {
|
||||
return {
|
||||
getVoiceText: (list: AudioItem[]) => getVoiceText(list, apiService)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"dependencies": {
|
||||
"localforage": "^1.10.0",
|
||||
"unocss": "^66.5.4",
|
||||
"axios": "^1.12.2",
|
||||
"web-storage-cache": "^1.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
108
frontend/utils/README.md
Normal file
108
frontend/utils/README.md
Normal file
@@ -0,0 +1,108 @@
|
||||
# 全局工具模块 (Monorepo Utils)
|
||||
|
||||
此目录包含可在 monorepo 各个应用中复用的全局工具函数。
|
||||
|
||||
## 📁 目录结构
|
||||
|
||||
```
|
||||
utils/
|
||||
├── token-manager.js # Token 统一管理工具
|
||||
└── README.md # 本文件
|
||||
```
|
||||
|
||||
## 🚀 使用方式
|
||||
|
||||
### Token 管理 (`token-manager.js`)
|
||||
|
||||
在应用中使用全局 token 管理工具：
|
||||
|
||||
```javascript
|
||||
// 导入 token 管理工具
|
||||
import {
|
||||
getToken,
|
||||
setToken,
|
||||
clearAllTokens,
|
||||
getAuthHeader
|
||||
} from '@gold/utils/token-manager'
|
||||
|
||||
// 获取 token
|
||||
const token = getToken()
|
||||
|
||||
// 设置 token
|
||||
setToken({
|
||||
accessToken: 'xxx',
|
||||
refreshToken: 'yyy'
|
||||
})
|
||||
|
||||
// 获取 Authorization Header
|
||||
const header = getAuthHeader() // Bearer xxx
|
||||
|
||||
// 清空所有 token
|
||||
clearAllTokens()
|
||||
```
|
||||
|
||||
## 📝 API 说明
|
||||
|
||||
### Token 管理函数
|
||||
|
||||
#### `getToken()`
|
||||
获取访问令牌（按优先级读取）
|
||||
|
||||
**返回值：** `string` - token 字符串或空字符串
|
||||
|
||||
#### `getAccessToken()`
|
||||
获取访问令牌（别名，兼容旧代码）
|
||||
|
||||
**返回值：** `string` - token 字符串或空字符串
|
||||
|
||||
#### `getRefreshToken()`
|
||||
获取刷新令牌
|
||||
|
||||
**返回值：** `string | null` - 刷新令牌或 null
|
||||
|
||||
#### `setToken(tokens)`
|
||||
设置访问令牌和刷新令牌
|
||||
|
||||
**参数：**
|
||||
- `tokens.accessToken` (string, 可选): 访问令牌
|
||||
- `tokens.refreshToken` (string, 可选): 刷新令牌
|
||||
|
||||
#### `clearAllTokens()`
|
||||
清除所有 token（包括 dev token、access token、refresh token）
|
||||
|
||||
#### `removeToken()`
|
||||
删除 token（别名，调用 `clearAllTokens()`）
|
||||
|
||||
#### `getAuthHeader()`
|
||||
获取完整的 Authorization Header 值
|
||||
|
||||
**返回值：** `string` - `Bearer token` 或空字符串
|
||||
|
||||
#### `setDevToken(token)`
|
||||
设置手动输入的 dev token（用于开发测试）
|
||||
|
||||
**参数：** `token` (string) - dev token
|
||||
|
||||
#### `getDevToken()`
|
||||
获取手动输入的 dev token
|
||||
|
||||
**返回值：** `string` - dev token 或空字符串
|
||||
|
||||
## 🔄 Token 存储优先级
|
||||
|
||||
1. **手动输入的 dev token** (sessionStorage) - 最高优先级
|
||||
2. **正式登录的 token** (wsCache/localStorage)
|
||||
3. **环境变量 VITE_DEV_TOKEN** - 兜底
|
||||
|
||||
## 📦 在 Vite 配置中使用
|
||||
|
||||
确保在 `vite.config.js` 中配置了 `@gold` 别名：
|
||||
|
||||
```javascript
|
||||
resolve: {
|
||||
alias: {
|
||||
'@gold': fileURLToPath(new URL('../../', import.meta.url))
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
160
frontend/utils/TOKEN_STORAGE.md
Normal file
160
frontend/utils/TOKEN_STORAGE.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# Token 存储位置说明
|
||||
|
||||
## 📍 Token 存储位置总览
|
||||
|
||||
Token 在项目中有 **3 个存储位置**，按读取优先级排序：
|
||||
|
||||
### 1. **Dev Token（开发手动输入的 token）**
|
||||
- **存储位置**：`sessionStorage`
|
||||
- **键名**：`DEV_MANUAL_TOKEN`
|
||||
- **设置方式**：`setDevToken(token)`
|
||||
- **特点**：
|
||||
- 优先级最高（读取时优先使用）
|
||||
- 关闭浏览器标签页后自动清除
|
||||
- 用于开发测试
|
||||
|
||||
**浏览器查看方式：**
|
||||
```javascript
|
||||
// 在浏览器控制台执行
|
||||
sessionStorage.getItem('DEV_MANUAL_TOKEN')
|
||||
```
|
||||
|
||||
### 2. **正式登录的 Token（主要存储）**
|
||||
- **存储位置**：`localStorage`（通过 WebStorageCache 封装）
|
||||
- **键名**：
|
||||
- `ACCESS_TOKEN` 或 `access_token`（访问令牌）
|
||||
- `REFRESH_TOKEN` 或 `refresh_token`（刷新令牌）
|
||||
- **设置方式**：`setToken({ accessToken, refreshToken })`
|
||||
- **特点**：
|
||||
- 持久化存储（关闭浏览器后仍然存在）
|
||||
- 使用 `WebStorageCache` 库管理
|
||||
- 支持大小写不同的键名变体（兼容性）
|
||||
|
||||
**浏览器查看方式：**
|
||||
```javascript
|
||||
// 在浏览器控制台执行
|
||||
localStorage.getItem('ACCESS_TOKEN')
|
||||
localStorage.getItem('REFRESH_TOKEN')
|
||||
// 或者
|
||||
localStorage.getItem('access_token')
|
||||
localStorage.getItem('refresh_token')
|
||||
```
|
||||
|
||||
**实际存储结构：**
|
||||
```
|
||||
localStorage:
|
||||
├── ACCESS_TOKEN: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
|
||||
└── REFRESH_TOKEN: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
|
||||
```
|
||||
|
||||
### 3. **环境变量 Token（兜底）**
|
||||
- **存储位置**：代码中（不存储在浏览器）
|
||||
- **变量名**：`VITE_DEV_TOKEN`
|
||||
- **设置方式**：`.env` 文件或环境变量
|
||||
- **特点**：
|
||||
- 只在代码中读取，不写入浏览器存储
|
||||
- 优先级最低（前两者都没有时才使用）
|
||||
- 用于开发环境默认配置
|
||||
|
||||
## 🔄 Token 读取优先级
|
||||
|
||||
当调用 `getToken()` 时，按以下顺序查找：
|
||||
|
||||
```
|
||||
1. sessionStorage['DEV_MANUAL_TOKEN'] ← 最高优先级
|
||||
↓ (如果没有)
|
||||
2. localStorage['ACCESS_TOKEN'] 或 localStorage['access_token']
|
||||
↓ (如果没有)
|
||||
3. import.meta.env.VITE_DEV_TOKEN ← 最低优先级
|
||||
```
|
||||
|
||||
## 📝 代码示例
|
||||
|
||||
### 设置 Token
|
||||
|
||||
```javascript
|
||||
import { setToken, setDevToken } from '@gold/utils/token-manager'
|
||||
|
||||
// 设置正式登录的 token（存储到 localStorage）
|
||||
setToken({
|
||||
accessToken: 'xxx',
|
||||
refreshToken: 'yyy'
|
||||
})
|
||||
|
||||
// 设置开发 token（存储到 sessionStorage）
|
||||
setDevToken('dev-token-123')
|
||||
```
|
||||
|
||||
### 读取 Token
|
||||
|
||||
```javascript
|
||||
import { getToken } from '@gold/utils/token-manager'
|
||||
|
||||
// 自动按优先级读取
|
||||
const token = getToken()
|
||||
```
|
||||
|
||||
### 清除 Token
|
||||
|
||||
```javascript
|
||||
import { clearAllTokens } from '@gold/utils/token-manager'
|
||||
|
||||
// 清除所有位置的 token
|
||||
clearAllTokens()
|
||||
// 会清除：
|
||||
// 1. sessionStorage['DEV_MANUAL_TOKEN']
|
||||
// 2. localStorage['ACCESS_TOKEN'] 和 'access_token'
|
||||
// 3. localStorage['REFRESH_TOKEN'] 和 'refresh_token'
|
||||
```
|
||||
|
||||
## 🔍 在浏览器中查看
|
||||
|
||||
### Chrome DevTools
|
||||
|
||||
1. **打开 DevTools** (F12)
|
||||
2. **Application 标签页**
|
||||
3. **Storage 部分**：
|
||||
- **Local Storage** → 查看 `ACCESS_TOKEN`、`REFRESH_TOKEN`
|
||||
- **Session Storage** → 查看 `DEV_MANUAL_TOKEN`
|
||||
|
||||
### 控制台命令
|
||||
|
||||
```javascript
|
||||
// 查看所有 token
|
||||
console.log('Dev Token:', sessionStorage.getItem('DEV_MANUAL_TOKEN'))
|
||||
console.log('Access Token:', localStorage.getItem('ACCESS_TOKEN'))
|
||||
console.log('Refresh Token:', localStorage.getItem('REFRESH_TOKEN'))
|
||||
|
||||
// 查看所有 localStorage
|
||||
console.table(localStorage)
|
||||
|
||||
// 查看所有 sessionStorage
|
||||
console.table(sessionStorage)
|
||||
```
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
1. **WebStorageCache 封装**：
|
||||
- `useCache()` 默认使用 `localStorage`
|
||||
- 通过 `WebStorageCache` 库管理，支持过期时间等功能
|
||||
- 实际存储位置仍然是 `localStorage`
|
||||
|
||||
2. **键名大小写**：
|
||||
- 代码中统一使用 `ACCESS_TOKEN` 和 `REFRESH_TOKEN`（大写）
|
||||
- 但为了兼容，也支持 `access_token` 和 `refresh_token`（小写）
|
||||
- 读取时会尝试所有变体
|
||||
|
||||
3. **清除逻辑**：
|
||||
- `clearAllTokens()` 会清除所有位置的 token
|
||||
- 包括 sessionStorage、localStorage 的所有变体键名
|
||||
- 确保完全清除，避免残留
|
||||
|
||||
## 📊 存储位置总结表
|
||||
|
||||
| Token 类型 | 存储位置 | 键名 | 持久化 | 优先级 |
|
||||
|-----------|---------|------|--------|--------|
|
||||
| Dev Token | sessionStorage | `DEV_MANUAL_TOKEN` | ❌ 关闭标签页清除 | 1 (最高) |
|
||||
| Access Token | localStorage | `ACCESS_TOKEN` / `access_token` | ✅ 持久化 | 2 |
|
||||
| Refresh Token | localStorage | `REFRESH_TOKEN` / `refresh_token` | ✅ 持久化 | 2 |
|
||||
| Env Token | 代码中 | `VITE_DEV_TOKEN` | N/A | 3 (最低) |
|
||||
|
||||
215
frontend/utils/token-manager.js
Normal file
215
frontend/utils/token-manager.js
Normal file
@@ -0,0 +1,215 @@
|
||||
import { useCache, CACHE_KEY, deleteTokenCache } from '../hooks/web/useCache'
|
||||
|
||||
/**
|
||||
* Token 统一管理模块（Monorepo 全局工具）
|
||||
*
|
||||
* 这是项目中唯一的 token 管理入口，所有 token 操作都应该通过此模块进行。
|
||||
*
|
||||
* Token 存储优先级（读取顺序）：
|
||||
* 1. 手动输入的 dev token (sessionStorage)
|
||||
* 2. 正式登录的 token (wsCache/localStorage)
|
||||
* 3. 环境变量 VITE_DEV_TOKEN
|
||||
*
|
||||
* Token 存储位置：
|
||||
* - ACCESS_TOKEN/access_token: 访问令牌（wsCache/localStorage）
|
||||
* - REFRESH_TOKEN/refresh_token: 刷新令牌（wsCache/localStorage）
|
||||
* - DEV_MANUAL_TOKEN: 开发手动输入的token（sessionStorage）
|
||||
*/
|
||||
|
||||
// ==================== 常量定义 ====================
|
||||
const DEV_MANUAL_TOKEN_KEY = 'DEV_MANUAL_TOKEN'
|
||||
|
||||
// Token 键名变体（支持大小写不同）
|
||||
const TOKEN_KEYS = {
|
||||
ACCESS: [CACHE_KEY.ACCESS_TOKEN, 'access_token'],
|
||||
REFRESH: [CACHE_KEY.REFRESH_TOKEN, 'refresh_token']
|
||||
}
|
||||
|
||||
// ==================== 缓存实例管理 ====================
|
||||
let wsCache = null
|
||||
|
||||
/**
|
||||
* 获取 wsCache 实例（延迟初始化，避免模块加载时出错）
|
||||
* @returns {Object} wsCache 实例
|
||||
*/
|
||||
function getCache() {
|
||||
if (!wsCache) {
|
||||
try {
|
||||
wsCache = useCache().wsCache
|
||||
} catch (e) {
|
||||
console.warn('初始化 wsCache 失败:', e)
|
||||
// 返回一个安全的空对象，避免后续调用出错
|
||||
wsCache = {
|
||||
get: () => null,
|
||||
set: () => {},
|
||||
delete: () => {}
|
||||
}
|
||||
}
|
||||
}
|
||||
return wsCache
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取完整的 Authorization Header 值
|
||||
* @returns {string} Bearer token 或空字符串
|
||||
*/
|
||||
export function getAuthHeader() {
|
||||
const token = getToken()
|
||||
return token ? `Bearer ${token}` : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 token
|
||||
* @returns {string} token 字符串
|
||||
*/
|
||||
export function getToken() {
|
||||
// 1. 优先使用手动输入的 dev token
|
||||
const manualToken = sessionStorage.getItem(DEV_MANUAL_TOKEN_KEY)
|
||||
if (manualToken) {
|
||||
return manualToken
|
||||
}
|
||||
|
||||
// 2. 使用正式登录的 token（从 wsCache 读取）
|
||||
try {
|
||||
const cache = getCache()
|
||||
// 尝试所有可能的键名变体
|
||||
for (const key of TOKEN_KEYS.ACCESS) {
|
||||
const accessToken = cache.get(key)
|
||||
if (accessToken) {
|
||||
return accessToken
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('获取 wsCache 失败:', e)
|
||||
}
|
||||
|
||||
// 3. 兜底：环境变量中的 token
|
||||
const envToken = import.meta?.env?.VITE_DEV_TOKEN
|
||||
if (envToken) {
|
||||
return envToken
|
||||
}
|
||||
|
||||
return ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置手动输入的 dev token
|
||||
* @param {string} token
|
||||
*/
|
||||
export function setDevToken(token) {
|
||||
if (token) {
|
||||
sessionStorage.setItem(DEV_MANUAL_TOKEN_KEY, token)
|
||||
} else {
|
||||
sessionStorage.removeItem(DEV_MANUAL_TOKEN_KEY)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取手动输入的 dev token（用于显示）
|
||||
* @returns {string}
|
||||
*/
|
||||
export function getDevToken() {
|
||||
return sessionStorage.getItem(DEV_MANUAL_TOKEN_KEY) || ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置访问令牌和刷新令牌
|
||||
* @param {Object} tokens - token 对象
|
||||
* @param {string} tokens.accessToken - 访问令牌
|
||||
* @param {string} tokens.refreshToken - 刷新令牌
|
||||
*/
|
||||
export function setToken(tokens) {
|
||||
if (!tokens || (!tokens.accessToken && !tokens.refreshToken)) {
|
||||
console.warn('setToken: token 参数无效', tokens)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const cache = getCache()
|
||||
if (tokens.accessToken) {
|
||||
cache.set(CACHE_KEY.ACCESS_TOKEN, tokens.accessToken)
|
||||
}
|
||||
if (tokens.refreshToken) {
|
||||
cache.set(CACHE_KEY.REFRESH_TOKEN, tokens.refreshToken)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('设置 token 失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取刷新令牌
|
||||
* @returns {string|null} 刷新令牌或 null
|
||||
*/
|
||||
export function getRefreshToken() {
|
||||
try {
|
||||
const cache = getCache()
|
||||
// 尝试所有可能的键名变体
|
||||
for (const key of TOKEN_KEYS.REFRESH) {
|
||||
const token = cache.get(key)
|
||||
if (token) {
|
||||
return token
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('获取 refresh token 失败:', e)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有 token
|
||||
* 清空所有可能的 token 存储位置，确保完全清除
|
||||
*/
|
||||
export function clearAllTokens() {
|
||||
try {
|
||||
// 1. 清空 sessionStorage 中的 dev token
|
||||
sessionStorage.removeItem(DEV_MANUAL_TOKEN_KEY)
|
||||
} catch (e) {
|
||||
console.warn('清除 sessionStorage token 失败:', e)
|
||||
}
|
||||
|
||||
try {
|
||||
// 2. 清空 wsCache (localStorage) 中的所有可能的 token 键名
|
||||
// 使用统一的 deleteTokenCache 函数，保持与 useCache 的一致性
|
||||
deleteTokenCache()
|
||||
} catch (e) {
|
||||
console.warn('清除 wsCache token 失败:', e)
|
||||
}
|
||||
|
||||
try {
|
||||
// 3. 清空 localStorage 中可能的 token（兜底处理）
|
||||
// 注意：wsCache 默认使用 localStorage，但为了确保清除，也直接操作 localStorage
|
||||
const localStorageKeys = [
|
||||
...TOKEN_KEYS.ACCESS,
|
||||
...TOKEN_KEYS.REFRESH,
|
||||
DEV_MANUAL_TOKEN_KEY
|
||||
]
|
||||
localStorageKeys.forEach(key => {
|
||||
try {
|
||||
localStorage.removeItem(key)
|
||||
} catch (e) {
|
||||
// 忽略单个键删除失败
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
console.warn('清除 localStorage token 失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除 token（别名，兼容旧代码）
|
||||
* @deprecated 使用 clearAllTokens() 代替
|
||||
*/
|
||||
export function removeToken() {
|
||||
clearAllTokens()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取访问令牌（别名，兼容旧代码）
|
||||
* @returns {string} token 字符串
|
||||
*/
|
||||
export function getAccessToken() {
|
||||
return getToken()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user