chore: initial public snapshot for github upload
This commit is contained in:
Your Name
@@ -0,0 +1,309 @@
|
||||
import { DriveStep } from 'driver.js'
|
||||
|
||||
/**
|
||||
* 管理员完整引导流程
|
||||
* 交互式引导：指引用户实际操作
|
||||
* @param t 国际化函数
|
||||
* @param isSimpleMode 是否为简易模式（简易模式下会过滤分组相关步骤）
|
||||
*/
|
||||
export const getAdminSteps = (t: (key: string) => string, isSimpleMode = false): DriveStep[] => {
|
||||
const allSteps: DriveStep[] = [
|
||||
// ========== 欢迎介绍 ==========
|
||||
{
|
||||
popover: {
|
||||
title: t('onboarding.admin.welcome.title'),
|
||||
description: t('onboarding.admin.welcome.description'),
|
||||
align: 'center',
|
||||
nextBtnText: t('onboarding.admin.welcome.nextBtn'),
|
||||
prevBtnText: t('onboarding.admin.welcome.prevBtn')
|
||||
}
|
||||
},
|
||||
|
||||
// ========== 第一部分：创建分组 ==========
|
||||
{
|
||||
element: '#sidebar-group-manage',
|
||||
popover: {
|
||||
title: t('onboarding.admin.groupManage.title'),
|
||||
description: t('onboarding.admin.groupManage.description'),
|
||||
side: 'right',
|
||||
align: 'center',
|
||||
showButtons: ['close'],
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="groups-create-btn"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.createGroup.title'),
|
||||
description: t('onboarding.admin.createGroup.description'),
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="group-form-name"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.groupName.title'),
|
||||
description: t('onboarding.admin.groupName.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="group-form-platform"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.groupPlatform.title'),
|
||||
description: t('onboarding.admin.groupPlatform.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="group-form-multiplier"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.groupMultiplier.title'),
|
||||
description: t('onboarding.admin.groupMultiplier.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="group-form-exclusive"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.groupExclusive.title'),
|
||||
description: t('onboarding.admin.groupExclusive.description'),
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="group-form-submit"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.groupSubmit.title'),
|
||||
description: t('onboarding.admin.groupSubmit.description'),
|
||||
side: 'left',
|
||||
align: 'center',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
|
||||
// ========== 第二部分：创建账号授权 ==========
|
||||
{
|
||||
element: '#sidebar-channel-manage',
|
||||
popover: {
|
||||
title: t('onboarding.admin.accountManage.title'),
|
||||
description: t('onboarding.admin.accountManage.description'),
|
||||
side: 'right',
|
||||
align: 'center',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="accounts-create-btn"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.createAccount.title'),
|
||||
description: t('onboarding.admin.createAccount.description'),
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="account-form-name"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.accountName.title'),
|
||||
description: t('onboarding.admin.accountName.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="account-form-platform"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.accountPlatform.title'),
|
||||
description: t('onboarding.admin.accountPlatform.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="account-form-type"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.accountType.title'),
|
||||
description: t('onboarding.admin.accountType.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="account-form-priority"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.accountPriority.title'),
|
||||
description: t('onboarding.admin.accountPriority.description'),
|
||||
side: 'top',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="account-form-groups"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.accountGroups.title'),
|
||||
description: t('onboarding.admin.accountGroups.description'),
|
||||
side: 'top',
|
||||
align: 'center',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="account-form-submit"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.accountSubmit.title'),
|
||||
description: t('onboarding.admin.accountSubmit.description'),
|
||||
side: 'left',
|
||||
align: 'center',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
|
||||
// ========== 第三部分：创建API密钥 ==========
|
||||
{
|
||||
element: '[data-tour="sidebar-my-keys"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.keyManage.title'),
|
||||
description: t('onboarding.admin.keyManage.description'),
|
||||
side: 'right',
|
||||
align: 'center',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="keys-create-btn"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.createKey.title'),
|
||||
description: t('onboarding.admin.createKey.description'),
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="key-form-name"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.keyName.title'),
|
||||
description: t('onboarding.admin.keyName.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="key-form-group"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.keyGroup.title'),
|
||||
description: t('onboarding.admin.keyGroup.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="key-form-submit"]',
|
||||
popover: {
|
||||
title: t('onboarding.admin.keySubmit.title'),
|
||||
description: t('onboarding.admin.keySubmit.description'),
|
||||
side: 'left',
|
||||
align: 'center',
|
||||
showButtons: ['close']
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 简易模式下过滤分组相关步骤
|
||||
if (isSimpleMode) {
|
||||
return allSteps.filter(step => {
|
||||
const element = step.element as string | undefined
|
||||
// 过滤掉分组管理和账号分组选择相关步骤
|
||||
return !element || (
|
||||
!element.includes('sidebar-group-manage') &&
|
||||
!element.includes('groups-create-btn') &&
|
||||
!element.includes('group-form-') &&
|
||||
!element.includes('account-form-groups')
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return allSteps
|
||||
}
|
||||
|
||||
/**
|
||||
* 普通用户引导流程
|
||||
*/
|
||||
export const getUserSteps = (t: (key: string) => string): DriveStep[] => [
|
||||
{
|
||||
popover: {
|
||||
title: t('onboarding.user.welcome.title'),
|
||||
description: t('onboarding.user.welcome.description'),
|
||||
align: 'center',
|
||||
nextBtnText: t('onboarding.user.welcome.nextBtn'),
|
||||
prevBtnText: t('onboarding.user.welcome.prevBtn')
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="sidebar-my-keys"]',
|
||||
popover: {
|
||||
title: t('onboarding.user.keyManage.title'),
|
||||
description: t('onboarding.user.keyManage.description'),
|
||||
side: 'right',
|
||||
align: 'center',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="keys-create-btn"]',
|
||||
popover: {
|
||||
title: t('onboarding.user.createKey.title'),
|
||||
description: t('onboarding.user.createKey.description'),
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
showButtons: ['close']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="key-form-name"]',
|
||||
popover: {
|
||||
title: t('onboarding.user.keyName.title'),
|
||||
description: t('onboarding.user.keyName.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="key-form-group"]',
|
||||
popover: {
|
||||
title: t('onboarding.user.keyGroup.title'),
|
||||
description: t('onboarding.user.keyGroup.description'),
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: ['next', 'previous']
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '[data-tour="key-form-submit"]',
|
||||
popover: {
|
||||
title: t('onboarding.user.keySubmit.title'),
|
||||
description: t('onboarding.user.keySubmit.description'),
|
||||
side: 'left',
|
||||
align: 'center',
|
||||
showButtons: ['close']
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div v-if="siteKey" class="turnstile-wrapper">
|
||||
<div ref="containerRef" class="turnstile-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
|
||||
interface TurnstileRenderOptions {
|
||||
sitekey: string
|
||||
callback: (token: string) => void
|
||||
'expired-callback'?: () => void
|
||||
'error-callback'?: () => void
|
||||
theme?: 'light' | 'dark' | 'auto'
|
||||
size?: 'normal' | 'compact' | 'flexible'
|
||||
}
|
||||
|
||||
interface TurnstileAPI {
|
||||
render: (container: HTMLElement, options: TurnstileRenderOptions) => string
|
||||
reset: (widgetId?: string) => void
|
||||
remove: (widgetId?: string) => void
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
turnstile?: TurnstileAPI
|
||||
onTurnstileLoad?: () => void
|
||||
}
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
siteKey: string
|
||||
theme?: 'light' | 'dark' | 'auto'
|
||||
size?: 'normal' | 'compact' | 'flexible'
|
||||
}>(),
|
||||
{
|
||||
theme: 'auto',
|
||||
size: 'flexible'
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'verify', token: string): void
|
||||
(e: 'expire'): void
|
||||
(e: 'error'): void
|
||||
}>()
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const widgetId = ref<string | null>(null)
|
||||
const scriptLoaded = ref(false)
|
||||
|
||||
const loadScript = (): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (window.turnstile) {
|
||||
scriptLoaded.value = true
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
// Check if script is already loading
|
||||
const existingScript = document.querySelector('script[src*="turnstile"]')
|
||||
if (existingScript) {
|
||||
window.onTurnstileLoad = () => {
|
||||
scriptLoaded.value = true
|
||||
resolve()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onTurnstileLoad'
|
||||
script.async = true
|
||||
script.defer = true
|
||||
|
||||
window.onTurnstileLoad = () => {
|
||||
scriptLoaded.value = true
|
||||
resolve()
|
||||
}
|
||||
|
||||
script.onerror = () => {
|
||||
reject(new Error('Failed to load Turnstile script'))
|
||||
}
|
||||
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
}
|
||||
|
||||
const renderWidget = () => {
|
||||
if (!window.turnstile || !containerRef.value || !props.siteKey) {
|
||||
return
|
||||
}
|
||||
|
||||
// Remove existing widget if any
|
||||
if (widgetId.value) {
|
||||
try {
|
||||
window.turnstile.remove(widgetId.value)
|
||||
} catch {
|
||||
// Ignore errors when removing
|
||||
}
|
||||
widgetId.value = null
|
||||
}
|
||||
|
||||
// Clear container
|
||||
containerRef.value.innerHTML = ''
|
||||
|
||||
widgetId.value = window.turnstile.render(containerRef.value, {
|
||||
sitekey: props.siteKey,
|
||||
callback: (token: string) => {
|
||||
emit('verify', token)
|
||||
},
|
||||
'expired-callback': () => {
|
||||
emit('expire')
|
||||
},
|
||||
'error-callback': () => {
|
||||
emit('error')
|
||||
},
|
||||
theme: props.theme,
|
||||
size: props.size
|
||||
})
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
if (window.turnstile && widgetId.value) {
|
||||
window.turnstile.reset(widgetId.value)
|
||||
}
|
||||
}
|
||||
|
||||
// Expose reset method to parent
|
||||
defineExpose({ reset })
|
||||
|
||||
onMounted(async () => {
|
||||
if (!props.siteKey) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await loadScript()
|
||||
renderWidget()
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Turnstile:', error)
|
||||
emit('error')
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (window.turnstile && widgetId.value) {
|
||||
try {
|
||||
window.turnstile.remove(widgetId.value)
|
||||
} catch {
|
||||
// Ignore errors when removing
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Re-render when siteKey changes
|
||||
watch(
|
||||
() => props.siteKey,
|
||||
(newKey) => {
|
||||
if (newKey && scriptLoaded.value) {
|
||||
renderWidget()
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.turnstile-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.turnstile-container {
|
||||
width: 100%;
|
||||
min-height: 65px;
|
||||
}
|
||||
|
||||
/* Make the Turnstile iframe fill the container width */
|
||||
.turnstile-container :deep(iframe) {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* API Key 创建逻辑测试
|
||||
* 通过封装组件测试 API Key 创建的核心流程
|
||||
*/
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount, flushPromises } from '@vue/test-utils'
|
||||
import { setActivePinia, createPinia } from 'pinia'
|
||||
import { defineComponent, ref, reactive } from 'vue'
|
||||
|
||||
// Mock keysAPI
|
||||
const mockCreate = vi.fn()
|
||||
const mockList = vi.fn()
|
||||
|
||||
vi.mock('@/api', () => ({
|
||||
keysAPI: {
|
||||
create: (...args: any[]) => mockCreate(...args),
|
||||
list: (...args: any[]) => mockList(...args),
|
||||
},
|
||||
authAPI: {
|
||||
getCurrentUser: vi.fn().mockResolvedValue({ data: {} }),
|
||||
logout: vi.fn(),
|
||||
refreshToken: vi.fn(),
|
||||
},
|
||||
isTotp2FARequired: () => false,
|
||||
}))
|
||||
|
||||
vi.mock('@/api/admin/system', () => ({
|
||||
checkUpdates: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/api/auth', () => ({
|
||||
getPublicSettings: vi.fn().mockResolvedValue({}),
|
||||
}))
|
||||
|
||||
// Mock app store - 使用固定引用确保组件和测试共享同一对象
|
||||
const mockShowSuccess = vi.fn()
|
||||
const mockShowError = vi.fn()
|
||||
|
||||
vi.mock('@/stores/app', () => ({
|
||||
useAppStore: () => ({
|
||||
showSuccess: mockShowSuccess,
|
||||
showError: mockShowError,
|
||||
}),
|
||||
}))
|
||||
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
/**
|
||||
* 简化的 API Key 创建测试组件
|
||||
*/
|
||||
const ApiKeyCreateTestComponent = defineComponent({
|
||||
setup() {
|
||||
const appStore = useAppStore()
|
||||
const loading = ref(false)
|
||||
const createdKey = ref('')
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
group_id: null as number | null,
|
||||
})
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!formData.name) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await mockCreate({
|
||||
name: formData.name,
|
||||
group_id: formData.group_id,
|
||||
})
|
||||
createdKey.value = result.key
|
||||
appStore.showSuccess('API Key 创建成功')
|
||||
} catch (error: any) {
|
||||
appStore.showError(error.message || '创建失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return { formData, loading, createdKey, handleCreate }
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<form @submit.prevent="handleCreate">
|
||||
<input id="name" v-model="formData.name" placeholder="Key 名称" />
|
||||
<select id="group" v-model="formData.group_id">
|
||||
<option :value="null">默认</option>
|
||||
<option :value="1">Group 1</option>
|
||||
</select>
|
||||
<button type="submit" :disabled="loading">创建</button>
|
||||
</form>
|
||||
<div v-if="createdKey" class="created-key">{{ createdKey }}</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
|
||||
describe('ApiKey 创建流程', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('创建 API Key 调用 API 并显示结果', async () => {
|
||||
mockCreate.mockResolvedValue({
|
||||
id: 1,
|
||||
key: 'sk-test-key-12345',
|
||||
name: 'My Test Key',
|
||||
})
|
||||
|
||||
const wrapper = mount(ApiKeyCreateTestComponent)
|
||||
|
||||
await wrapper.find('#name').setValue('My Test Key')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(mockCreate).toHaveBeenCalledWith({
|
||||
name: 'My Test Key',
|
||||
group_id: null,
|
||||
})
|
||||
|
||||
expect(wrapper.find('.created-key').text()).toBe('sk-test-key-12345')
|
||||
})
|
||||
|
||||
it('选择分组后正确传参', async () => {
|
||||
mockCreate.mockResolvedValue({
|
||||
id: 2,
|
||||
key: 'sk-group-key',
|
||||
name: 'Group Key',
|
||||
})
|
||||
|
||||
const wrapper = mount(ApiKeyCreateTestComponent)
|
||||
|
||||
await wrapper.find('#name').setValue('Group Key')
|
||||
// 选择 group_id = 1
|
||||
await wrapper.find('#group').setValue('1')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(mockCreate).toHaveBeenCalledWith({
|
||||
name: 'Group Key',
|
||||
group_id: 1,
|
||||
})
|
||||
})
|
||||
|
||||
it('创建失败时显示错误', async () => {
|
||||
mockCreate.mockRejectedValue(new Error('配额不足'))
|
||||
|
||||
const wrapper = mount(ApiKeyCreateTestComponent)
|
||||
|
||||
await wrapper.find('#name').setValue('Fail Key')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(mockShowError).toHaveBeenCalledWith('配额不足')
|
||||
expect(wrapper.find('.created-key').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('名称为空时不提交', async () => {
|
||||
const wrapper = mount(ApiKeyCreateTestComponent)
|
||||
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(mockCreate).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('创建过程中按钮被禁用', async () => {
|
||||
let resolveCreate: (v: any) => void
|
||||
mockCreate.mockImplementation(
|
||||
() => new Promise((resolve) => { resolveCreate = resolve })
|
||||
)
|
||||
|
||||
const wrapper = mount(ApiKeyCreateTestComponent)
|
||||
|
||||
await wrapper.find('#name').setValue('Test Key')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
|
||||
expect(wrapper.find('button').attributes('disabled')).toBeDefined()
|
||||
|
||||
resolveCreate!({ id: 1, key: 'sk-test', name: 'Test Key' })
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,172 @@
|
||||
/**
|
||||
* Dashboard 数据加载逻辑测试
|
||||
* 通过封装组件测试仪表板核心数据加载流程
|
||||
*/
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount, flushPromises } from '@vue/test-utils'
|
||||
import { setActivePinia, createPinia } from 'pinia'
|
||||
import { defineComponent, ref, onMounted, nextTick } from 'vue'
|
||||
|
||||
// Mock API
|
||||
const mockGetDashboardStats = vi.fn()
|
||||
|
||||
vi.mock('@/api', () => ({
|
||||
authAPI: {
|
||||
getCurrentUser: vi.fn().mockResolvedValue({
|
||||
data: { id: 1, username: 'test', email: 'test@example.com', role: 'user', balance: 100, concurrency: 5, status: 'active', allowed_groups: null, created_at: '', updated_at: '' },
|
||||
}),
|
||||
logout: vi.fn(),
|
||||
refreshToken: vi.fn(),
|
||||
},
|
||||
isTotp2FARequired: () => false,
|
||||
}))
|
||||
|
||||
vi.mock('@/api/usage', () => ({
|
||||
usageAPI: {
|
||||
getDashboardStats: (...args: any[]) => mockGetDashboardStats(...args),
|
||||
},
|
||||
}))
|
||||
|
||||
vi.mock('@/api/admin/system', () => ({
|
||||
checkUpdates: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/api/auth', () => ({
|
||||
getPublicSettings: vi.fn().mockResolvedValue({}),
|
||||
}))
|
||||
|
||||
interface DashboardStats {
|
||||
balance: number
|
||||
api_key_count: number
|
||||
active_api_key_count: number
|
||||
today_requests: number
|
||||
today_cost: number
|
||||
today_tokens: number
|
||||
total_tokens: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 简化的 Dashboard 测试组件
|
||||
*/
|
||||
const DashboardTestComponent = defineComponent({
|
||||
setup() {
|
||||
const stats = ref<DashboardStats | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const loadStats = async () => {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
stats.value = await mockGetDashboardStats()
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '加载失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadStats)
|
||||
|
||||
return { stats, loading, error, loadStats }
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<div v-if="loading" class="loading">加载中...</div>
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<div v-if="stats" class="stats">
|
||||
<span class="balance">{{ stats.balance }}</span>
|
||||
<span class="api-keys">{{ stats.api_key_count }}</span>
|
||||
<span class="today-requests">{{ stats.today_requests }}</span>
|
||||
<span class="today-cost">{{ stats.today_cost }}</span>
|
||||
</div>
|
||||
<button class="refresh" @click="loadStats">刷新</button>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
|
||||
describe('Dashboard 数据加载', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
const fakeStats: DashboardStats = {
|
||||
balance: 100.5,
|
||||
api_key_count: 3,
|
||||
active_api_key_count: 2,
|
||||
today_requests: 150,
|
||||
today_cost: 2.5,
|
||||
today_tokens: 50000,
|
||||
total_tokens: 1000000,
|
||||
}
|
||||
|
||||
it('挂载后自动加载数据', async () => {
|
||||
mockGetDashboardStats.mockResolvedValue(fakeStats)
|
||||
|
||||
const wrapper = mount(DashboardTestComponent)
|
||||
await flushPromises()
|
||||
|
||||
expect(mockGetDashboardStats).toHaveBeenCalledTimes(1)
|
||||
expect(wrapper.find('.balance').text()).toBe('100.5')
|
||||
expect(wrapper.find('.api-keys').text()).toBe('3')
|
||||
expect(wrapper.find('.today-requests').text()).toBe('150')
|
||||
expect(wrapper.find('.today-cost').text()).toBe('2.5')
|
||||
})
|
||||
|
||||
it('加载中显示 loading 状态', async () => {
|
||||
let resolveStats: (v: any) => void
|
||||
mockGetDashboardStats.mockImplementation(
|
||||
() => new Promise((resolve) => { resolveStats = resolve })
|
||||
)
|
||||
|
||||
const wrapper = mount(DashboardTestComponent)
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('.loading').exists()).toBe(true)
|
||||
|
||||
resolveStats!(fakeStats)
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.loading').exists()).toBe(false)
|
||||
expect(wrapper.find('.stats').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('加载失败时显示错误信息', async () => {
|
||||
mockGetDashboardStats.mockRejectedValue(new Error('Network error'))
|
||||
|
||||
const wrapper = mount(DashboardTestComponent)
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.error').text()).toBe('Network error')
|
||||
expect(wrapper.find('.stats').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('点击刷新按钮重新加载数据', async () => {
|
||||
mockGetDashboardStats.mockResolvedValue(fakeStats)
|
||||
|
||||
const wrapper = mount(DashboardTestComponent)
|
||||
await flushPromises()
|
||||
|
||||
expect(mockGetDashboardStats).toHaveBeenCalledTimes(1)
|
||||
|
||||
// 更新数据
|
||||
const updatedStats = { ...fakeStats, today_requests: 200 }
|
||||
mockGetDashboardStats.mockResolvedValue(updatedStats)
|
||||
|
||||
await wrapper.find('.refresh').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(mockGetDashboardStats).toHaveBeenCalledTimes(2)
|
||||
expect(wrapper.find('.today-requests').text()).toBe('200')
|
||||
})
|
||||
|
||||
it('数据为空时不显示统计信息', async () => {
|
||||
mockGetDashboardStats.mockResolvedValue(null)
|
||||
|
||||
const wrapper = mount(DashboardTestComponent)
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.stats').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* LoginView 组件核心逻辑测试
|
||||
* 测试登录表单提交、验证、2FA 等场景
|
||||
*/
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount, flushPromises } from '@vue/test-utils'
|
||||
import { setActivePinia, createPinia } from 'pinia'
|
||||
import { defineComponent, reactive, ref } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
// Mock 所有外部依赖
|
||||
const mockLogin = vi.fn()
|
||||
const mockLogin2FA = vi.fn()
|
||||
const mockPush = vi.fn()
|
||||
|
||||
vi.mock('@/api', () => ({
|
||||
authAPI: {
|
||||
login: (...args: any[]) => mockLogin(...args),
|
||||
login2FA: (...args: any[]) => mockLogin2FA(...args),
|
||||
logout: vi.fn(),
|
||||
getCurrentUser: vi.fn().mockResolvedValue({ data: {} }),
|
||||
register: vi.fn(),
|
||||
refreshToken: vi.fn(),
|
||||
},
|
||||
isTotp2FARequired: (response: any) => response?.requires_2fa === true,
|
||||
}))
|
||||
|
||||
vi.mock('@/api/admin/system', () => ({
|
||||
checkUpdates: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock('@/api/auth', () => ({
|
||||
getPublicSettings: vi.fn().mockResolvedValue({}),
|
||||
}))
|
||||
|
||||
/**
|
||||
* 创建一个简化的测试组件来封装登录逻辑
|
||||
* 避免引入 LoginView.vue 的全部依赖（AuthLayout、i18n、Icon 等）
|
||||
*/
|
||||
const LoginFormTestComponent = defineComponent({
|
||||
setup() {
|
||||
const authStore = useAuthStore()
|
||||
const formData = reactive({ email: '', password: '' })
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!formData.email || !formData.password) {
|
||||
errorMessage.value = '请输入邮箱和密码'
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const response = await authStore.login({
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
})
|
||||
|
||||
// 2FA 流程由调用方处理
|
||||
if ((response as any)?.requires_2fa) {
|
||||
errorMessage.value = '需要 2FA 验证'
|
||||
return
|
||||
}
|
||||
|
||||
mockPush('/dashboard')
|
||||
} catch (error: any) {
|
||||
errorMessage.value = error.message || '登录失败'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return { formData, isLoading, errorMessage, handleLogin }
|
||||
},
|
||||
template: `
|
||||
<form @submit.prevent="handleLogin">
|
||||
<input id="email" v-model="formData.email" type="email" />
|
||||
<input id="password" v-model="formData.password" type="password" />
|
||||
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
|
||||
<button type="submit" :disabled="isLoading">登录</button>
|
||||
</form>
|
||||
`,
|
||||
})
|
||||
|
||||
describe('LoginForm 核心逻辑', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('成功登录后跳转到 dashboard', async () => {
|
||||
mockLogin.mockResolvedValue({
|
||||
access_token: 'token',
|
||||
token_type: 'Bearer',
|
||||
user: { id: 1, username: 'test', email: 'test@example.com', role: 'user', balance: 0, concurrency: 5, status: 'active', allowed_groups: null, created_at: '', updated_at: '' },
|
||||
})
|
||||
|
||||
const wrapper = mount(LoginFormTestComponent)
|
||||
|
||||
await wrapper.find('#email').setValue('test@example.com')
|
||||
await wrapper.find('#password').setValue('password123')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(mockLogin).toHaveBeenCalledWith({
|
||||
email: 'test@example.com',
|
||||
password: 'password123',
|
||||
})
|
||||
expect(mockPush).toHaveBeenCalledWith('/dashboard')
|
||||
})
|
||||
|
||||
it('登录失败时显示错误信息', async () => {
|
||||
mockLogin.mockRejectedValue(new Error('Invalid credentials'))
|
||||
|
||||
const wrapper = mount(LoginFormTestComponent)
|
||||
|
||||
await wrapper.find('#email').setValue('test@example.com')
|
||||
await wrapper.find('#password').setValue('wrong')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.error').text()).toBe('Invalid credentials')
|
||||
})
|
||||
|
||||
it('空表单提交显示验证错误', async () => {
|
||||
const wrapper = mount(LoginFormTestComponent)
|
||||
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.error').text()).toBe('请输入邮箱和密码')
|
||||
expect(mockLogin).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('需要 2FA 时不跳转', async () => {
|
||||
mockLogin.mockResolvedValue({
|
||||
requires_2fa: true,
|
||||
temp_token: 'temp-123',
|
||||
})
|
||||
|
||||
const wrapper = mount(LoginFormTestComponent)
|
||||
|
||||
await wrapper.find('#email').setValue('test@example.com')
|
||||
await wrapper.find('#password').setValue('password123')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(mockPush).not.toHaveBeenCalled()
|
||||
expect(wrapper.find('.error').text()).toBe('需要 2FA 验证')
|
||||
})
|
||||
|
||||
it('提交过程中按钮被禁用', async () => {
|
||||
let resolveLogin: (v: any) => void
|
||||
mockLogin.mockImplementation(
|
||||
() => new Promise((resolve) => { resolveLogin = resolve })
|
||||
)
|
||||
|
||||
const wrapper = mount(LoginFormTestComponent)
|
||||
|
||||
await wrapper.find('#email').setValue('test@example.com')
|
||||
await wrapper.find('#password').setValue('password123')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
|
||||
expect(wrapper.find('button').attributes('disabled')).toBeDefined()
|
||||
|
||||
resolveLogin!({
|
||||
access_token: 'token',
|
||||
token_type: 'Bearer',
|
||||
user: { id: 1, username: 'test', email: 'test@example.com', role: 'user', balance: 0, concurrency: 5, status: 'active', allowed_groups: null, created_at: '', updated_at: '' },
|
||||
})
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<!-- 并发槽位 -->
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium',
|
||||
concurrencyClass
|
||||
]"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
||||
</svg>
|
||||
<span class="font-mono">{{ currentConcurrency }}</span>
|
||||
<span class="text-gray-400 dark:text-gray-500">/</span>
|
||||
<span class="font-mono">{{ account.concurrency }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 5h窗口费用限制（仅 Anthropic OAuth/SetupToken 且启用时显示） -->
|
||||
<div v-if="showWindowCost" class="flex items-center gap-1">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium',
|
||||
windowCostClass
|
||||
]"
|
||||
:title="windowCostTooltip"
|
||||
>
|
||||
<svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-mono">${{ formatCost(currentWindowCost) }}</span>
|
||||
<span class="text-gray-400 dark:text-gray-500">/</span>
|
||||
<span class="font-mono">${{ formatCost(account.window_cost_limit) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 会话数量限制（仅 Anthropic OAuth/SetupToken 且启用时显示） -->
|
||||
<div v-if="showSessionLimit" class="flex items-center gap-1">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium',
|
||||
sessionLimitClass
|
||||
]"
|
||||
:title="sessionLimitTooltip"
|
||||
>
|
||||
<svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
</svg>
|
||||
<span class="font-mono">{{ activeSessions }}</span>
|
||||
<span class="text-gray-400 dark:text-gray-500">/</span>
|
||||
<span class="font-mono">{{ account.max_sessions }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- RPM 限制（仅 Anthropic OAuth/SetupToken 且启用时显示） -->
|
||||
<div v-if="showRpmLimit" class="flex items-center gap-1">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium',
|
||||
rpmClass
|
||||
]"
|
||||
:title="rpmTooltip"
|
||||
>
|
||||
<svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
<span class="font-mono">{{ currentRPM }}</span>
|
||||
<span class="text-gray-400 dark:text-gray-500">/</span>
|
||||
<span class="font-mono">{{ account.base_rpm }}</span>
|
||||
<span class="text-[9px] opacity-60">{{ rpmStrategyTag }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- API Key 账号配额限制 -->
|
||||
<QuotaBadge v-if="showDailyQuota" :used="account.quota_daily_used ?? 0" :limit="account.quota_daily_limit!" label="D" />
|
||||
<QuotaBadge v-if="showWeeklyQuota" :used="account.quota_weekly_used ?? 0" :limit="account.quota_weekly_limit!" label="W" />
|
||||
<QuotaBadge v-if="showTotalQuota" :used="account.quota_used ?? 0" :limit="account.quota_limit!" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Account } from '@/types'
|
||||
import QuotaBadge from './QuotaBadge.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
account: Account
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 当前并发数
|
||||
const currentConcurrency = computed(() => props.account.current_concurrency || 0)
|
||||
|
||||
// 是否为 Anthropic OAuth/SetupToken 账号
|
||||
const isAnthropicOAuthOrSetupToken = computed(() => {
|
||||
return (
|
||||
props.account.platform === 'anthropic' &&
|
||||
(props.account.type === 'oauth' || props.account.type === 'setup-token')
|
||||
)
|
||||
})
|
||||
|
||||
// 是否显示窗口费用限制
|
||||
const showWindowCost = computed(() => {
|
||||
return (
|
||||
isAnthropicOAuthOrSetupToken.value &&
|
||||
props.account.window_cost_limit !== undefined &&
|
||||
props.account.window_cost_limit !== null &&
|
||||
props.account.window_cost_limit > 0
|
||||
)
|
||||
})
|
||||
|
||||
// 当前窗口费用
|
||||
const currentWindowCost = computed(() => props.account.current_window_cost ?? 0)
|
||||
|
||||
// 是否显示会话限制
|
||||
const showSessionLimit = computed(() => {
|
||||
return (
|
||||
isAnthropicOAuthOrSetupToken.value &&
|
||||
props.account.max_sessions !== undefined &&
|
||||
props.account.max_sessions !== null &&
|
||||
props.account.max_sessions > 0
|
||||
)
|
||||
})
|
||||
|
||||
// 当前活跃会话数
|
||||
const activeSessions = computed(() => props.account.active_sessions ?? 0)
|
||||
|
||||
// 并发状态样式
|
||||
const concurrencyClass = computed(() => {
|
||||
const current = currentConcurrency.value
|
||||
const max = props.account.concurrency
|
||||
|
||||
if (current >= max) {
|
||||
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}
|
||||
if (current > 0) {
|
||||
return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
}
|
||||
return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
|
||||
})
|
||||
|
||||
// 窗口费用状态样式
|
||||
const windowCostClass = computed(() => {
|
||||
if (!showWindowCost.value) return ''
|
||||
|
||||
const current = currentWindowCost.value
|
||||
const limit = props.account.window_cost_limit || 0
|
||||
const reserve = props.account.window_cost_sticky_reserve || 10
|
||||
|
||||
if (current >= limit + reserve) {
|
||||
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}
|
||||
if (current >= limit) {
|
||||
return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
}
|
||||
if (current >= limit * 0.8) {
|
||||
return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
}
|
||||
return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
})
|
||||
|
||||
// 窗口费用提示文字
|
||||
const windowCostTooltip = computed(() => {
|
||||
if (!showWindowCost.value) return ''
|
||||
|
||||
const current = currentWindowCost.value
|
||||
const limit = props.account.window_cost_limit || 0
|
||||
const reserve = props.account.window_cost_sticky_reserve || 10
|
||||
|
||||
if (current >= limit + reserve) {
|
||||
return t('admin.accounts.capacity.windowCost.blocked')
|
||||
}
|
||||
if (current >= limit) {
|
||||
return t('admin.accounts.capacity.windowCost.stickyOnly')
|
||||
}
|
||||
return t('admin.accounts.capacity.windowCost.normal')
|
||||
})
|
||||
|
||||
// 会话限制状态样式
|
||||
const sessionLimitClass = computed(() => {
|
||||
if (!showSessionLimit.value) return ''
|
||||
|
||||
const current = activeSessions.value
|
||||
const max = props.account.max_sessions || 0
|
||||
|
||||
if (current >= max) {
|
||||
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}
|
||||
if (current >= max * 0.8) {
|
||||
return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
}
|
||||
return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
})
|
||||
|
||||
// 会话限制提示文字
|
||||
const sessionLimitTooltip = computed(() => {
|
||||
if (!showSessionLimit.value) return ''
|
||||
|
||||
const current = activeSessions.value
|
||||
const max = props.account.max_sessions || 0
|
||||
const idle = props.account.session_idle_timeout_minutes || 5
|
||||
|
||||
if (current >= max) {
|
||||
return t('admin.accounts.capacity.sessions.full', { idle })
|
||||
}
|
||||
return t('admin.accounts.capacity.sessions.normal', { idle })
|
||||
})
|
||||
|
||||
// 是否显示 RPM 限制
|
||||
const showRpmLimit = computed(() => {
|
||||
return (
|
||||
isAnthropicOAuthOrSetupToken.value &&
|
||||
props.account.base_rpm !== undefined &&
|
||||
props.account.base_rpm !== null &&
|
||||
props.account.base_rpm > 0
|
||||
)
|
||||
})
|
||||
|
||||
// 当前 RPM 计数
|
||||
const currentRPM = computed(() => props.account.current_rpm ?? 0)
|
||||
|
||||
// RPM 策略
|
||||
const rpmStrategy = computed(() => props.account.rpm_strategy || 'tiered')
|
||||
|
||||
// RPM 策略标签
|
||||
const rpmStrategyTag = computed(() => {
|
||||
return rpmStrategy.value === 'sticky_exempt' ? '[S]' : '[T]'
|
||||
})
|
||||
|
||||
// RPM buffer 计算（与后端一致：base <= 0 时 buffer 为 0）
|
||||
const rpmBuffer = computed(() => {
|
||||
const base = props.account.base_rpm || 0
|
||||
return props.account.rpm_sticky_buffer ?? (base > 0 ? Math.max(1, Math.floor(base / 5)) : 0)
|
||||
})
|
||||
|
||||
// RPM 状态样式
|
||||
const rpmClass = computed(() => {
|
||||
if (!showRpmLimit.value) return ''
|
||||
|
||||
const current = currentRPM.value
|
||||
const base = props.account.base_rpm ?? 0
|
||||
const buffer = rpmBuffer.value
|
||||
|
||||
if (rpmStrategy.value === 'tiered') {
|
||||
if (current >= base + buffer) {
|
||||
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}
|
||||
if (current >= base) {
|
||||
return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
}
|
||||
} else {
|
||||
if (current >= base) {
|
||||
return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
}
|
||||
}
|
||||
if (current >= base * 0.8) {
|
||||
return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
}
|
||||
return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
})
|
||||
|
||||
// RPM 提示文字（增强版：显示策略、区域、缓冲区）
|
||||
const rpmTooltip = computed(() => {
|
||||
if (!showRpmLimit.value) return ''
|
||||
|
||||
const current = currentRPM.value
|
||||
const base = props.account.base_rpm ?? 0
|
||||
const buffer = rpmBuffer.value
|
||||
|
||||
if (rpmStrategy.value === 'tiered') {
|
||||
if (current >= base + buffer) {
|
||||
return t('admin.accounts.capacity.rpm.tieredBlocked', { buffer })
|
||||
}
|
||||
if (current >= base) {
|
||||
return t('admin.accounts.capacity.rpm.tieredStickyOnly', { buffer })
|
||||
}
|
||||
if (current >= base * 0.8) {
|
||||
return t('admin.accounts.capacity.rpm.tieredWarning')
|
||||
}
|
||||
return t('admin.accounts.capacity.rpm.tieredNormal')
|
||||
} else {
|
||||
if (current >= base) {
|
||||
return t('admin.accounts.capacity.rpm.stickyExemptOver')
|
||||
}
|
||||
if (current >= base * 0.8) {
|
||||
return t('admin.accounts.capacity.rpm.stickyExemptWarning')
|
||||
}
|
||||
return t('admin.accounts.capacity.rpm.stickyExemptNormal')
|
||||
}
|
||||
})
|
||||
|
||||
// 是否显示各维度配额（apikey / bedrock 类型）
|
||||
const isQuotaEligible = computed(() => props.account.type === 'apikey' || props.account.type === 'bedrock')
|
||||
|
||||
const showDailyQuota = computed(() => {
|
||||
return isQuotaEligible.value && (props.account.quota_daily_limit ?? 0) > 0
|
||||
})
|
||||
|
||||
const showWeeklyQuota = computed(() => {
|
||||
return isQuotaEligible.value && (props.account.quota_weekly_limit ?? 0) > 0
|
||||
})
|
||||
|
||||
const showTotalQuota = computed(() => {
|
||||
return isQuotaEligible.value && (props.account.quota_limit ?? 0) > 0
|
||||
})
|
||||
|
||||
// 格式化费用显示
|
||||
const formatCost = (value: number | null | undefined) => {
|
||||
if (value === null || value === undefined) return '0'
|
||||
return value.toFixed(2)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div v-if="groups && groups.length > 0" class="relative max-w-56">
|
||||
<!-- 分组容器：固定最大宽度，最多显示2行 -->
|
||||
<div class="flex flex-wrap gap-1 max-h-14 overflow-hidden">
|
||||
<GroupBadge
|
||||
v-for="group in displayGroups"
|
||||
:key="group.id"
|
||||
:name="group.name"
|
||||
:platform="group.platform"
|
||||
:subscription-type="group.subscription_type"
|
||||
:rate-multiplier="group.rate_multiplier"
|
||||
:show-rate="false"
|
||||
class="max-w-24"
|
||||
/>
|
||||
<!-- 更多数量徽章 -->
|
||||
<button
|
||||
v-if="hiddenCount > 0"
|
||||
ref="moreButtonRef"
|
||||
@click.stop="showPopover = !showPopover"
|
||||
class="inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500 transition-colors cursor-pointer whitespace-nowrap"
|
||||
>
|
||||
<span>+{{ hiddenCount }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Popover 显示完整列表 -->
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition duration-150 ease-out"
|
||||
enter-from-class="opacity-0 scale-95"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
v-if="showPopover"
|
||||
ref="popoverRef"
|
||||
class="fixed z-50 min-w-48 max-w-96 rounded-lg border border-gray-200 bg-white p-3 shadow-lg dark:border-dark-600 dark:bg-dark-800"
|
||||
:style="popoverStyle"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.groupCountTotal', { count: groups.length }) }}
|
||||
</span>
|
||||
<button
|
||||
@click="showPopover = false"
|
||||
class="rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-gray-300"
|
||||
>
|
||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto">
|
||||
<GroupBadge
|
||||
v-for="group in groups"
|
||||
:key="group.id"
|
||||
:name="group.name"
|
||||
:platform="group.platform"
|
||||
:subscription-type="group.subscription_type"
|
||||
:rate-multiplier="group.rate_multiplier"
|
||||
:show-rate="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<!-- 点击外部关闭 popover -->
|
||||
<div
|
||||
v-if="showPopover"
|
||||
class="fixed inset-0 z-40"
|
||||
@click="showPopover = false"
|
||||
/>
|
||||
</div>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GroupBadge from '@/components/common/GroupBadge.vue'
|
||||
import type { Group } from '@/types'
|
||||
|
||||
interface Props {
|
||||
groups: Group[] | null | undefined
|
||||
maxDisplay?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
maxDisplay: 4
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const moreButtonRef = ref<HTMLElement | null>(null)
|
||||
const popoverRef = ref<HTMLElement | null>(null)
|
||||
const showPopover = ref(false)
|
||||
|
||||
// 显示的分组（最多显示 maxDisplay 个）
|
||||
const displayGroups = computed(() => {
|
||||
if (!props.groups) return []
|
||||
if (props.groups.length <= props.maxDisplay) {
|
||||
return props.groups
|
||||
}
|
||||
// 留一个位置给 +N 按钮
|
||||
return props.groups.slice(0, props.maxDisplay - 1)
|
||||
})
|
||||
|
||||
// 隐藏的数量
|
||||
const hiddenCount = computed(() => {
|
||||
if (!props.groups) return 0
|
||||
if (props.groups.length <= props.maxDisplay) return 0
|
||||
return props.groups.length - (props.maxDisplay - 1)
|
||||
})
|
||||
|
||||
// Popover 位置样式
|
||||
const popoverStyle = computed(() => {
|
||||
if (!moreButtonRef.value) return {}
|
||||
const rect = moreButtonRef.value.getBoundingClientRect()
|
||||
const viewportHeight = window.innerHeight
|
||||
const viewportWidth = window.innerWidth
|
||||
|
||||
let top = rect.bottom + 8
|
||||
let left = rect.left
|
||||
|
||||
// 如果下方空间不足，显示在上方
|
||||
if (top + 280 > viewportHeight) {
|
||||
top = Math.max(8, rect.top - 280)
|
||||
}
|
||||
|
||||
// 如果右侧空间不足，向左偏移
|
||||
if (left + 384 > viewportWidth) {
|
||||
left = Math.max(8, viewportWidth - 392)
|
||||
}
|
||||
|
||||
return {
|
||||
top: `${top}px`,
|
||||
left: `${left}px`
|
||||
}
|
||||
})
|
||||
|
||||
// 关闭 popover 的键盘事件
|
||||
const handleKeydown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
showPopover.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div v-if="shouldShowQuota">
|
||||
<!-- First line: Platform + Tier Badge -->
|
||||
<div class="mb-1 flex items-center gap-1">
|
||||
<span :class="['badge text-xs px-2 py-0.5 rounded font-medium', tierBadgeClass]">
|
||||
{{ tierLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Usage status: unlimited flow or rate limit -->
|
||||
<div class="text-xs text-gray-400 dark:text-gray-500">
|
||||
<span v-if="!isRateLimited">
|
||||
{{ t('admin.accounts.gemini.rateLimit.unlimited') }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
:class="[
|
||||
'font-medium',
|
||||
isUrgent
|
||||
? 'text-red-600 dark:text-red-400 animate-pulse'
|
||||
: 'text-amber-600 dark:text-amber-400'
|
||||
]"
|
||||
>
|
||||
{{ t('admin.accounts.gemini.rateLimit.limited', { time: resetCountdown }) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Account, GeminiCredentials } from '@/types'
|
||||
|
||||
const props = defineProps<{
|
||||
account: Account
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const now = ref(new Date())
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
// 是否为 Code Assist OAuth
|
||||
// 判断逻辑与后端保持一致：project_id 存在即为 Code Assist
|
||||
const isCodeAssist = computed(() => {
|
||||
const creds = props.account.credentials as GeminiCredentials | undefined
|
||||
// 显式为 code_assist，或 legacy 情况（oauth_type 为空但 project_id 存在）
|
||||
return creds?.oauth_type === 'code_assist' || (!creds?.oauth_type && !!creds?.project_id)
|
||||
})
|
||||
|
||||
// 是否为 Google One OAuth
|
||||
const isGoogleOne = computed(() => {
|
||||
const creds = props.account.credentials as GeminiCredentials | undefined
|
||||
return creds?.oauth_type === 'google_one'
|
||||
})
|
||||
|
||||
// 是否应该显示配额信息
|
||||
const shouldShowQuota = computed(() => {
|
||||
return props.account.platform === 'gemini'
|
||||
})
|
||||
|
||||
// Tier 标签文本
|
||||
const tierLabel = computed(() => {
|
||||
const creds = props.account.credentials as GeminiCredentials | undefined
|
||||
|
||||
if (isCodeAssist.value) {
|
||||
const tier = (creds?.tier_id || '').toString().trim().toLowerCase()
|
||||
if (tier === 'gcp_enterprise') return 'GCP Enterprise'
|
||||
if (tier === 'gcp_standard') return 'GCP Standard'
|
||||
// Backward compatibility
|
||||
const upper = (creds?.tier_id || '').toString().trim().toUpperCase()
|
||||
if (upper.includes('ULTRA') || upper.includes('ENTERPRISE')) return 'GCP Enterprise'
|
||||
if (upper) return `GCP ${upper}`
|
||||
return 'GCP'
|
||||
}
|
||||
|
||||
if (isGoogleOne.value) {
|
||||
const tier = (creds?.tier_id || '').toString().trim().toLowerCase()
|
||||
if (tier === 'google_ai_ultra') return 'Google AI Ultra'
|
||||
if (tier === 'google_ai_pro') return 'Google AI Pro'
|
||||
if (tier === 'google_one_free') return 'Google One Free'
|
||||
// Backward compatibility
|
||||
const upper = (creds?.tier_id || '').toString().trim().toUpperCase()
|
||||
if (upper === 'AI_PREMIUM') return 'Google AI Pro'
|
||||
if (upper === 'GOOGLE_ONE_UNLIMITED') return 'Google AI Ultra'
|
||||
if (upper) return `Google One ${upper}`
|
||||
return 'Google One'
|
||||
}
|
||||
|
||||
// API Key: 显示 AI Studio
|
||||
const tier = (creds?.tier_id || '').toString().trim().toLowerCase()
|
||||
if (tier === 'aistudio_paid') return 'AI Studio Pay-as-you-go'
|
||||
if (tier === 'aistudio_free') return 'AI Studio Free Tier'
|
||||
return 'AI Studio'
|
||||
})
|
||||
|
||||
// Tier Badge 样式（统一样式）
|
||||
const tierBadgeClass = computed(() => {
|
||||
const creds = props.account.credentials as GeminiCredentials | undefined
|
||||
|
||||
if (isCodeAssist.value) {
|
||||
const tier = (creds?.tier_id || '').toString().trim().toLowerCase()
|
||||
if (tier === 'gcp_enterprise') return 'bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300'
|
||||
if (tier === 'gcp_standard') return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
// Backward compatibility
|
||||
const upper = (creds?.tier_id || '').toString().trim().toUpperCase()
|
||||
if (upper.includes('ULTRA') || upper.includes('ENTERPRISE')) return 'bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300'
|
||||
return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
}
|
||||
|
||||
if (isGoogleOne.value) {
|
||||
const tier = (creds?.tier_id || '').toString().trim().toLowerCase()
|
||||
if (tier === 'google_ai_ultra') return 'bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300'
|
||||
if (tier === 'google_ai_pro') return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
if (tier === 'google_one_free') return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
|
||||
// Backward compatibility
|
||||
const upper = (creds?.tier_id || '').toString().trim().toUpperCase()
|
||||
if (upper === 'GOOGLE_ONE_UNLIMITED') return 'bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300'
|
||||
if (upper === 'AI_PREMIUM') return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
|
||||
}
|
||||
|
||||
// AI Studio 默认样式：蓝色
|
||||
const tier = (creds?.tier_id || '').toString().trim().toLowerCase()
|
||||
if (tier === 'aistudio_paid') return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
if (tier === 'aistudio_free') return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
|
||||
return 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
})
|
||||
|
||||
// 是否限流
|
||||
const isRateLimited = computed(() => {
|
||||
if (!props.account.rate_limit_reset_at) return false
|
||||
const resetTime = Date.parse(props.account.rate_limit_reset_at)
|
||||
// 防护：如果日期解析失败（NaN），则认为未限流
|
||||
if (Number.isNaN(resetTime)) return false
|
||||
return resetTime > now.value.getTime()
|
||||
})
|
||||
|
||||
// 倒计时文本
|
||||
const resetCountdown = computed(() => {
|
||||
if (!props.account.rate_limit_reset_at) return ''
|
||||
const resetTime = Date.parse(props.account.rate_limit_reset_at)
|
||||
// 防护：如果日期解析失败，显示 "-"
|
||||
if (Number.isNaN(resetTime)) return '-'
|
||||
|
||||
const diffMs = resetTime - now.value.getTime()
|
||||
if (diffMs <= 0) return t('admin.accounts.gemini.rateLimit.now')
|
||||
|
||||
const diffSeconds = Math.floor(diffMs / 1000)
|
||||
const diffMinutes = Math.floor(diffSeconds / 60)
|
||||
const diffHours = Math.floor(diffMinutes / 60)
|
||||
|
||||
if (diffMinutes < 1) return `${diffSeconds}s`
|
||||
if (diffHours < 1) {
|
||||
const secs = diffSeconds % 60
|
||||
return `${diffMinutes}m ${secs}s`
|
||||
}
|
||||
const mins = diffMinutes % 60
|
||||
return `${diffHours}h ${mins}m`
|
||||
})
|
||||
|
||||
// 是否紧急（< 1分钟）
|
||||
const isUrgent = computed(() => {
|
||||
if (!props.account.rate_limit_reset_at) return false
|
||||
const resetTime = Date.parse(props.account.rate_limit_reset_at)
|
||||
// 防护：如果日期解析失败，返回 false
|
||||
if (Number.isNaN(resetTime)) return false
|
||||
|
||||
const diffMs = resetTime - now.value.getTime()
|
||||
return diffMs > 0 && diffMs < 60000
|
||||
})
|
||||
|
||||
// 监听限流状态，动态启动/停止定时器
|
||||
watch(
|
||||
() => isRateLimited.value,
|
||||
(limited) => {
|
||||
if (limited && !timer) {
|
||||
// 进入限流状态，启动定时器
|
||||
timer = setInterval(() => {
|
||||
now.value = new Date()
|
||||
}, 1000)
|
||||
} else if (!limited && timer) {
|
||||
// 解除限流，停止定时器
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
},
|
||||
{ immediate: true } // 立即执行，确保挂载时已限流的情况也能启动定时器
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer !== null) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,749 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.usageStatistics')"
|
||||
width="extra-wide"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<!-- Account Info Header -->
|
||||
<div
|
||||
v-if="account"
|
||||
class="flex items-center justify-between rounded-xl border border-primary-200 bg-gradient-to-r from-primary-50 to-primary-100 p-3 dark:border-primary-700/50 dark:from-primary-900/20 dark:to-primary-800/20"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-primary-600"
|
||||
>
|
||||
<Icon name="chartBar" size="md" class="text-white" :stroke-width="2" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ account.name }}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.last30DaysUsage') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full px-2.5 py-1 text-xs font-semibold',
|
||||
account.status === 'active'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
|
||||
]"
|
||||
>
|
||||
{{ account.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
|
||||
<template v-else-if="stats">
|
||||
<!-- Row 1: Main Stats Cards -->
|
||||
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<!-- 30-Day Total Cost -->
|
||||
<div
|
||||
class="card border-emerald-200 bg-gradient-to-br from-emerald-50 to-white p-4 dark:border-emerald-800/30 dark:from-emerald-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.totalCost')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-emerald-100 p-1.5 dark:bg-emerald-900/30">
|
||||
<svg
|
||||
class="h-4 w-4 text-emerald-600 dark:text-emerald-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${{ formatCost(stats.summary.total_cost) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.stats.accumulatedCost') }}
|
||||
<span class="text-gray-400 dark:text-gray-500">
|
||||
({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.total_user_cost) }} ·
|
||||
{{ t('admin.accounts.stats.standardCost') }}: ${{
|
||||
formatCost(stats.summary.total_standard_cost)
|
||||
}})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 30-Day Total Requests -->
|
||||
<div
|
||||
class="card border-blue-200 bg-gradient-to-br from-blue-50 to-white p-4 dark:border-blue-800/30 dark:from-blue-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.totalRequests')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-blue-100 p-1.5 dark:bg-blue-900/30">
|
||||
<Icon name="bolt" size="sm" class="text-blue-600 dark:text-blue-400" :stroke-width="2" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{{ formatNumber(stats.summary.total_requests) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.stats.totalCalls') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Daily Average Cost -->
|
||||
<div
|
||||
class="card border-amber-200 bg-gradient-to-br from-amber-50 to-white p-4 dark:border-amber-800/30 dark:from-amber-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.avgDailyCost')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-amber-100 p-1.5 dark:bg-amber-900/30">
|
||||
<Icon
|
||||
name="calculator"
|
||||
size="sm"
|
||||
class="text-amber-600 dark:text-amber-400"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${{ formatCost(stats.summary.avg_daily_cost) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{
|
||||
t('admin.accounts.stats.basedOnActualDays', {
|
||||
days: stats.summary.actual_days_used
|
||||
})
|
||||
}}
|
||||
<span class="text-gray-400 dark:text-gray-500">
|
||||
({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.avg_daily_user_cost) }})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Daily Average Requests -->
|
||||
<div
|
||||
class="card border-purple-200 bg-gradient-to-br from-purple-50 to-white p-4 dark:border-purple-800/30 dark:from-purple-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.avgDailyRequests')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-purple-100 p-1.5 dark:bg-purple-900/30">
|
||||
<svg
|
||||
class="h-4 w-4 text-purple-600 dark:text-purple-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{{ formatNumber(Math.round(stats.summary.avg_daily_requests)) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.stats.avgDailyUsage') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Today, Highest Cost, Highest Requests -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<!-- Today Overview -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-cyan-100 p-1.5 dark:bg-cyan-900/30">
|
||||
<svg
|
||||
class="h-4 w-4 text-cyan-600 dark:text-cyan-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.todayOverview')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.today?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.today?.user_cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.requests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatNumber(stats.summary.today?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.tokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(stats.summary.today?.tokens || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highest Cost Day -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-orange-100 p-1.5 dark:bg-orange-900/30">
|
||||
<Icon
|
||||
name="fire"
|
||||
size="sm"
|
||||
class="text-orange-600 dark:text-orange-400"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.highestCostDay')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.date')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
stats.summary.highest_cost_day?.label || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-orange-600 dark:text-orange-400"
|
||||
>${{ formatCost(stats.summary.highest_cost_day?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.highest_cost_day?.user_cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.requests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatNumber(stats.summary.highest_cost_day?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highest Request Day -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-indigo-100 p-1.5 dark:bg-indigo-900/30">
|
||||
<Icon
|
||||
name="trendingUp"
|
||||
size="sm"
|
||||
class="text-indigo-600 dark:text-indigo-400"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.highestRequestDay')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.date')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
stats.summary.highest_request_day?.label || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.requests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">{{
|
||||
formatNumber(stats.summary.highest_request_day?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.highest_request_day?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.highest_request_day?.user_cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Token Stats -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<!-- Accumulated Tokens -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-teal-100 p-1.5 dark:bg-teal-900/30">
|
||||
<Icon name="cube" size="sm" class="text-teal-600 dark:text-teal-400" :stroke-width="2" />
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.accumulatedTokens')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.totalTokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(stats.summary.total_tokens)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.dailyAvgTokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(Math.round(stats.summary.avg_daily_tokens))
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-rose-100 p-1.5 dark:bg-rose-900/30">
|
||||
<Icon name="bolt" size="sm" class="text-rose-600 dark:text-rose-400" :stroke-width="2" />
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.performance')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.avgResponseTime')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatDuration(stats.summary.avg_duration_ms)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.daysActive')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>{{ stats.summary.actual_days_used }} / {{ stats.summary.days }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-lime-100 p-1.5 dark:bg-lime-900/30">
|
||||
<Icon
|
||||
name="clipboard"
|
||||
size="sm"
|
||||
class="text-lime-600 dark:text-lime-400"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.recentActivity')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.todayRequests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatNumber(stats.summary.today?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.todayTokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(stats.summary.today?.tokens || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.today?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.today?.user_cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Trend Chart -->
|
||||
<div class="card p-4">
|
||||
<h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('admin.accounts.stats.usageTrend') }}
|
||||
</h3>
|
||||
<div class="h-64">
|
||||
<Line v-if="trendChartData" :data="trendChartData" :options="lineChartOptions" />
|
||||
<div
|
||||
v-else
|
||||
class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.dashboard.noDataAvailable') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Distribution -->
|
||||
<ModelDistributionChart :model-stats="stats.models" :loading="false" />
|
||||
|
||||
<EndpointDistributionChart
|
||||
:endpoint-stats="stats.endpoints || []"
|
||||
:loading="false"
|
||||
:title="t('usage.inboundEndpoint')"
|
||||
/>
|
||||
|
||||
<EndpointDistributionChart
|
||||
:endpoint-stats="stats.upstream_endpoints || []"
|
||||
:loading="false"
|
||||
:title="t('usage.upstreamEndpoint')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- No Data State -->
|
||||
<div
|
||||
v-else-if="!loading"
|
||||
class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<Icon name="chartBar" size="xl" class="mb-4 h-12 w-12" :stroke-width="1.5" />
|
||||
<p class="text-sm">{{ t('admin.accounts.stats.noData') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
@click="handleClose"
|
||||
class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
} from 'chart.js'
|
||||
import { Line } from 'vue-chartjs'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
|
||||
import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
|
||||
import EndpointDistributionChart from '@/components/charts/EndpointDistributionChart.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { Account, AccountUsageStatsResponse } from '@/types'
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
account: Account | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const loading = ref(false)
|
||||
const stats = ref<AccountUsageStatsResponse | null>(null)
|
||||
|
||||
// Dark mode detection
|
||||
const isDarkMode = computed(() => {
|
||||
return document.documentElement.classList.contains('dark')
|
||||
})
|
||||
|
||||
// Chart colors
|
||||
const chartColors = computed(() => ({
|
||||
text: isDarkMode.value ? '#e5e7eb' : '#374151',
|
||||
grid: isDarkMode.value ? '#374151' : '#e5e7eb'
|
||||
}))
|
||||
|
||||
// Line chart data
|
||||
const trendChartData = computed(() => {
|
||||
if (!stats.value?.history?.length) return null
|
||||
|
||||
return {
|
||||
labels: stats.value.history.map((h) => h.label),
|
||||
datasets: [
|
||||
{
|
||||
label: t('usage.accountBilled') + ' (USD)',
|
||||
data: stats.value.history.map((h) => h.actual_cost),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: t('usage.userBilled') + ' (USD)',
|
||||
data: stats.value.history.map((h) => h.user_cost),
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.08)',
|
||||
fill: false,
|
||||
tension: 0.3,
|
||||
borderDash: [5, 5],
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: t('admin.accounts.stats.requests'),
|
||||
data: stats.value.history.map((h) => h.requests),
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: 'rgba(249, 115, 22, 0.1)',
|
||||
fill: false,
|
||||
tension: 0.3,
|
||||
yAxisID: 'y1'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// Line chart options with dual Y-axis
|
||||
const lineChartOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index' as const
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top' as const,
|
||||
labels: {
|
||||
color: chartColors.value.text,
|
||||
usePointStyle: true,
|
||||
pointStyle: 'circle',
|
||||
padding: 15,
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: any) => {
|
||||
const label = context.dataset.label || ''
|
||||
const value = context.raw
|
||||
if (label.includes('USD')) {
|
||||
return `${label}: $${formatCost(value)}`
|
||||
}
|
||||
return `${label}: ${formatNumber(value)}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: chartColors.value.grid
|
||||
},
|
||||
ticks: {
|
||||
color: chartColors.value.text,
|
||||
font: {
|
||||
size: 10
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 0
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear' as const,
|
||||
display: true,
|
||||
position: 'left' as const,
|
||||
grid: {
|
||||
color: chartColors.value.grid
|
||||
},
|
||||
ticks: {
|
||||
color: '#3b82f6',
|
||||
font: {
|
||||
size: 10
|
||||
},
|
||||
callback: (value: string | number) => '$' + formatCost(Number(value))
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: t('usage.accountBilled') + ' (USD)',
|
||||
color: '#3b82f6',
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear' as const,
|
||||
display: true,
|
||||
position: 'right' as const,
|
||||
grid: {
|
||||
drawOnChartArea: false
|
||||
},
|
||||
ticks: {
|
||||
color: '#f97316',
|
||||
font: {
|
||||
size: 10
|
||||
},
|
||||
callback: (value: string | number) => formatNumber(Number(value))
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: t('admin.accounts.stats.requests'),
|
||||
color: '#f97316',
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
// Load stats when modal opens
|
||||
watch(
|
||||
() => props.show,
|
||||
async (newVal) => {
|
||||
if (newVal && props.account) {
|
||||
await loadStats()
|
||||
} else {
|
||||
stats.value = null
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const loadStats = async () => {
|
||||
if (!props.account) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
stats.value = await adminAPI.accounts.getStats(props.account.id, 30)
|
||||
} catch (error) {
|
||||
console.error('Failed to load account stats:', error)
|
||||
stats.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// Format helpers
|
||||
const formatCost = (value: number): string => {
|
||||
if (value >= 1000) {
|
||||
return (value / 1000).toFixed(2) + 'K'
|
||||
} else if (value >= 1) {
|
||||
return value.toFixed(2)
|
||||
} else if (value >= 0.01) {
|
||||
return value.toFixed(3)
|
||||
}
|
||||
return value.toFixed(4)
|
||||
}
|
||||
|
||||
const formatNumber = (value: number): string => {
|
||||
if (value >= 1_000_000) {
|
||||
return (value / 1_000_000).toFixed(2) + 'M'
|
||||
} else if (value >= 1_000) {
|
||||
return (value / 1_000).toFixed(2) + 'K'
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatTokens = (value: number): string => {
|
||||
if (value >= 1_000_000_000) {
|
||||
return `${(value / 1_000_000_000).toFixed(2)}B`
|
||||
} else if (value >= 1_000_000) {
|
||||
return `${(value / 1_000_000).toFixed(2)}M`
|
||||
} else if (value >= 1_000) {
|
||||
return `${(value / 1_000).toFixed(2)}K`
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatDuration = (ms: number): string => {
|
||||
if (ms >= 1000) {
|
||||
return `${(ms / 1000).toFixed(2)}s`
|
||||
}
|
||||
return `${Math.round(ms)}ms`
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Rate Limit Display (429) - Two-line layout -->
|
||||
<div v-if="isRateLimited" class="flex flex-col items-center gap-1">
|
||||
<span class="badge text-xs badge-warning">{{ t('admin.accounts.status.rateLimited') }}</span>
|
||||
<span class="text-[11px] text-gray-400 dark:text-gray-500">{{ rateLimitResumeText }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Overload Display (529) - Two-line layout -->
|
||||
<div v-else-if="isOverloaded" class="flex flex-col items-center gap-1">
|
||||
<span class="badge text-xs badge-danger">{{ t('admin.accounts.status.overloaded') }}</span>
|
||||
<span class="text-[11px] text-gray-400 dark:text-gray-500">{{ overloadCountdown }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Status Badge (shown when not rate limited/overloaded) -->
|
||||
<template v-else>
|
||||
<button
|
||||
v-if="isTempUnschedulable"
|
||||
type="button"
|
||||
:class="['badge text-xs', statusClass, 'cursor-pointer']"
|
||||
:title="t('admin.accounts.status.viewTempUnschedDetails')"
|
||||
@click="handleTempUnschedClick"
|
||||
>
|
||||
{{ statusText }}
|
||||
</button>
|
||||
<span v-else :class="['badge text-xs', statusClass]">
|
||||
{{ statusText }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Error Info Indicator -->
|
||||
<div v-if="hasError && account.error_message" class="group/error relative">
|
||||
<svg
|
||||
class="h-4 w-4 cursor-help text-red-500 transition-colors hover:text-red-600 dark:text-red-400 dark:hover:text-red-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Tooltip - 向下显示 -->
|
||||
<div
|
||||
class="invisible absolute left-0 top-full z-[100] mt-1.5 min-w-[200px] max-w-[300px] rounded-lg bg-gray-800 px-3 py-2 text-xs text-white opacity-0 shadow-xl transition-all duration-200 group-hover/error:visible group-hover/error:opacity-100 dark:bg-gray-900"
|
||||
>
|
||||
<div class="whitespace-pre-wrap break-words leading-relaxed text-gray-300">
|
||||
{{ account.error_message }}
|
||||
</div>
|
||||
<!-- 上方小三角 -->
|
||||
<div
|
||||
class="absolute bottom-full left-3 border-[6px] border-transparent border-b-gray-800 dark:border-b-gray-900"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rate Limit Indicator (429) -->
|
||||
<div v-if="isRateLimited" class="group relative">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
|
||||
>
|
||||
<Icon name="exclamationTriangle" size="xs" :stroke-width="2" />
|
||||
429
|
||||
</span>
|
||||
<!-- Tooltip -->
|
||||
<div
|
||||
class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-56 -translate-x-1/2 whitespace-normal rounded bg-gray-900 px-3 py-2 text-center text-xs leading-relaxed text-white opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-700"
|
||||
>
|
||||
{{ t('admin.accounts.status.rateLimitedUntil', { time: formatDateTime(account.rate_limit_reset_at) }) }}
|
||||
<div
|
||||
class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Status Indicators (普通限流 / 超量请求中) -->
|
||||
<div
|
||||
v-if="activeModelStatuses.length > 0"
|
||||
:class="[
|
||||
activeModelStatuses.length <= 4
|
||||
? 'flex flex-col gap-1'
|
||||
: activeModelStatuses.length <= 8
|
||||
? 'columns-2 gap-x-2'
|
||||
: 'columns-3 gap-x-2'
|
||||
]"
|
||||
>
|
||||
<div v-for="item in activeModelStatuses" :key="`${item.kind}-${item.model}`" class="group relative mb-1 break-inside-avoid">
|
||||
<!-- 积分已用尽 -->
|
||||
<span
|
||||
v-if="item.kind === 'credits_exhausted'"
|
||||
class="inline-flex items-center gap-1 rounded bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400"
|
||||
>
|
||||
<Icon name="exclamationTriangle" size="xs" :stroke-width="2" />
|
||||
{{ t('admin.accounts.status.creditsExhausted') }}
|
||||
<span class="text-[10px] opacity-70">{{ formatModelResetTime(item.reset_at) }}</span>
|
||||
</span>
|
||||
<!-- 正在走积分（模型限流但积分可用）-->
|
||||
<span
|
||||
v-else-if="item.kind === 'credits_active'"
|
||||
class="inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
|
||||
>
|
||||
<span>⚡</span>
|
||||
{{ formatScopeName(item.model) }}
|
||||
<span class="text-[10px] opacity-70">{{ formatModelResetTime(item.reset_at) }}</span>
|
||||
</span>
|
||||
<!-- 普通模型限流 -->
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex items-center gap-1 rounded bg-purple-100 px-1.5 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
|
||||
>
|
||||
<Icon name="exclamationTriangle" size="xs" :stroke-width="2" />
|
||||
{{ formatScopeName(item.model) }}
|
||||
<span class="text-[10px] opacity-70">{{ formatModelResetTime(item.reset_at) }}</span>
|
||||
</span>
|
||||
<!-- Tooltip -->
|
||||
<div
|
||||
class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-56 -translate-x-1/2 whitespace-normal rounded bg-gray-900 px-3 py-2 text-center text-xs leading-relaxed text-white opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-700"
|
||||
>
|
||||
{{
|
||||
item.kind === 'credits_exhausted'
|
||||
? t('admin.accounts.status.creditsExhaustedUntil', { time: formatTime(item.reset_at) })
|
||||
: item.kind === 'credits_active'
|
||||
? t('admin.accounts.status.modelCreditOveragesUntil', { model: formatScopeName(item.model), time: formatTime(item.reset_at) })
|
||||
: t('admin.accounts.status.modelRateLimitedUntil', { model: formatScopeName(item.model), time: formatTime(item.reset_at) })
|
||||
}}
|
||||
<div
|
||||
class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overload Indicator (529) -->
|
||||
<div v-if="isOverloaded" class="group relative">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400"
|
||||
>
|
||||
<Icon name="exclamationTriangle" size="xs" :stroke-width="2" />
|
||||
529
|
||||
</span>
|
||||
<!-- Tooltip -->
|
||||
<div
|
||||
class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-56 -translate-x-1/2 whitespace-normal rounded bg-gray-900 px-3 py-2 text-center text-xs leading-relaxed text-white opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-700"
|
||||
>
|
||||
{{ t('admin.accounts.status.overloadedUntil', { time: formatTime(account.overload_until) }) }}
|
||||
<div
|
||||
class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import type { Account } from '@/types'
|
||||
import { formatCountdown, formatDateTime, formatCountdownWithSuffix, formatTime } from '@/utils/format'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
account: Account
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'show-temp-unsched', account: Account): void
|
||||
}>()
|
||||
|
||||
// Computed: is rate limited (429)
|
||||
const isRateLimited = computed(() => {
|
||||
if (!props.account.rate_limit_reset_at) return false
|
||||
return new Date(props.account.rate_limit_reset_at) > new Date()
|
||||
})
|
||||
|
||||
type AccountModelStatusItem = {
|
||||
kind: 'rate_limit' | 'credits_exhausted' | 'credits_active'
|
||||
model: string
|
||||
reset_at: string
|
||||
}
|
||||
|
||||
// Computed: active model statuses (普通模型限流 + 积分耗尽 + 走积分中)
|
||||
const activeModelStatuses = computed<AccountModelStatusItem[]>(() => {
|
||||
const extra = props.account.extra as Record<string, unknown> | undefined
|
||||
const modelLimits = extra?.model_rate_limits as
|
||||
| Record<string, { rate_limited_at: string; rate_limit_reset_at: string }>
|
||||
| undefined
|
||||
const now = new Date()
|
||||
const items: AccountModelStatusItem[] = []
|
||||
|
||||
if (!modelLimits) return items
|
||||
|
||||
// 检查 AICredits key 是否生效（积分是否耗尽）
|
||||
const aiCreditsEntry = modelLimits['AICredits']
|
||||
const hasActiveAICredits = aiCreditsEntry && new Date(aiCreditsEntry.rate_limit_reset_at) > now
|
||||
const allowOverages = !!(extra?.allow_overages)
|
||||
|
||||
for (const [model, info] of Object.entries(modelLimits)) {
|
||||
if (new Date(info.rate_limit_reset_at) <= now) continue
|
||||
|
||||
if (model === 'AICredits') {
|
||||
// AICredits key → 积分已用尽
|
||||
items.push({ kind: 'credits_exhausted', model, reset_at: info.rate_limit_reset_at })
|
||||
} else if (allowOverages && !hasActiveAICredits) {
|
||||
// 普通模型限流 + overages 启用 + 积分可用 → 正在走积分
|
||||
items.push({ kind: 'credits_active', model, reset_at: info.rate_limit_reset_at })
|
||||
} else {
|
||||
// 普通模型限流
|
||||
items.push({ kind: 'rate_limit', model, reset_at: info.rate_limit_reset_at })
|
||||
}
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
const formatScopeName = (scope: string): string => {
|
||||
const aliases: Record<string, string> = {
|
||||
// Claude 系列
|
||||
'claude-opus-4-6': 'COpus46',
|
||||
'claude-opus-4-6-thinking': 'COpus46T',
|
||||
'claude-sonnet-4-6': 'CSon46',
|
||||
'claude-sonnet-4-5': 'CSon45',
|
||||
'claude-sonnet-4-5-thinking': 'CSon45T',
|
||||
// Gemini 2.5 系列
|
||||
'gemini-2.5-flash': 'G25F',
|
||||
'gemini-2.5-flash-lite': 'G25FL',
|
||||
'gemini-2.5-flash-thinking': 'G25FT',
|
||||
'gemini-2.5-pro': 'G25P',
|
||||
'gemini-2.5-flash-image': 'G25I',
|
||||
// Gemini 3 系列
|
||||
'gemini-3-flash': 'G3F',
|
||||
'gemini-3.1-pro-high': 'G3PH',
|
||||
'gemini-3.1-pro-low': 'G3PL',
|
||||
'gemini-3-pro-image': 'G3PI',
|
||||
'gemini-3.1-flash-image': 'G31FI',
|
||||
// 其他
|
||||
'gpt-oss-120b-medium': 'GPT120',
|
||||
'tab_flash_lite_preview': 'TabFL',
|
||||
// 旧版 scope 别名（兼容）
|
||||
claude: 'Claude',
|
||||
claude_sonnet: 'CSon',
|
||||
claude_opus: 'COpus',
|
||||
claude_haiku: 'CHaiku',
|
||||
gemini_text: 'Gemini',
|
||||
gemini_image: 'GImg',
|
||||
gemini_flash: 'GFlash',
|
||||
gemini_pro: 'GPro',
|
||||
}
|
||||
return aliases[scope] || scope
|
||||
}
|
||||
|
||||
const formatModelResetTime = (resetAt: string): string => {
|
||||
const date = new Date(resetAt)
|
||||
const now = new Date()
|
||||
const diffMs = date.getTime() - now.getTime()
|
||||
if (diffMs <= 0) return ''
|
||||
const totalSecs = Math.floor(diffMs / 1000)
|
||||
const h = Math.floor(totalSecs / 3600)
|
||||
const m = Math.floor((totalSecs % 3600) / 60)
|
||||
const s = totalSecs % 60
|
||||
if (h > 0) return `${h}h${m}m`
|
||||
if (m > 0) return `${m}m${s}s`
|
||||
return `${s}s`
|
||||
}
|
||||
|
||||
// Computed: is overloaded (529)
|
||||
const isOverloaded = computed(() => {
|
||||
if (!props.account.overload_until) return false
|
||||
return new Date(props.account.overload_until) > new Date()
|
||||
})
|
||||
|
||||
// Computed: is temp unschedulable
|
||||
const isTempUnschedulable = computed(() => {
|
||||
if (!props.account.temp_unschedulable_until) return false
|
||||
return new Date(props.account.temp_unschedulable_until) > new Date()
|
||||
})
|
||||
|
||||
// Computed: has error status
|
||||
const hasError = computed(() => {
|
||||
return props.account.status === 'error'
|
||||
})
|
||||
|
||||
// Computed: countdown text for rate limit (429)
|
||||
const rateLimitCountdown = computed(() => {
|
||||
return formatCountdown(props.account.rate_limit_reset_at)
|
||||
})
|
||||
|
||||
const rateLimitResumeText = computed(() => {
|
||||
if (!rateLimitCountdown.value) return ''
|
||||
return t('admin.accounts.status.rateLimitedAutoResume', { time: rateLimitCountdown.value })
|
||||
})
|
||||
|
||||
// Computed: countdown text for overload (529)
|
||||
const overloadCountdown = computed(() => {
|
||||
return formatCountdownWithSuffix(props.account.overload_until)
|
||||
})
|
||||
|
||||
// Computed: status badge class
|
||||
const statusClass = computed(() => {
|
||||
if (hasError.value) {
|
||||
return 'badge-danger'
|
||||
}
|
||||
if (isTempUnschedulable.value) {
|
||||
return 'badge-warning'
|
||||
}
|
||||
if (!props.account.schedulable) {
|
||||
return 'badge-gray'
|
||||
}
|
||||
switch (props.account.status) {
|
||||
case 'active':
|
||||
return 'badge-success'
|
||||
case 'inactive':
|
||||
return 'badge-gray'
|
||||
case 'error':
|
||||
return 'badge-danger'
|
||||
default:
|
||||
return 'badge-gray'
|
||||
}
|
||||
})
|
||||
|
||||
// Computed: status text
|
||||
const statusText = computed(() => {
|
||||
if (hasError.value) {
|
||||
return t('admin.accounts.status.error')
|
||||
}
|
||||
if (isTempUnschedulable.value) {
|
||||
return t('admin.accounts.status.tempUnschedulable')
|
||||
}
|
||||
if (!props.account.schedulable) {
|
||||
return t('admin.accounts.status.paused')
|
||||
}
|
||||
return t(`admin.accounts.status.${props.account.status}`)
|
||||
})
|
||||
|
||||
const handleTempUnschedClick = () => {
|
||||
if (!isTempUnschedulable.value) return
|
||||
emit('show-temp-unsched', props.account)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,521 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.testAccountConnection')"
|
||||
width="normal"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<!-- Account Info Card -->
|
||||
<div
|
||||
v-if="account"
|
||||
class="flex items-center justify-between rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100 p-3 dark:border-dark-500 dark:from-dark-700 dark:to-dark-600"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-primary-600"
|
||||
>
|
||||
<Icon name="play" size="md" class="text-white" :stroke-width="2" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ account.name }}</div>
|
||||
<div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span
|
||||
class="rounded bg-gray-200 px-1.5 py-0.5 text-[10px] font-medium uppercase dark:bg-dark-500"
|
||||
>
|
||||
{{ account.type }}
|
||||
</span>
|
||||
<span>{{ t('admin.accounts.account') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full px-2.5 py-1 text-xs font-semibold',
|
||||
account.status === 'active'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
|
||||
]"
|
||||
>
|
||||
{{ account.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSoraAccount" class="space-y-1.5">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.accounts.selectTestModel') }}
|
||||
</label>
|
||||
<Select
|
||||
v-model="selectedModelId"
|
||||
:options="availableModels"
|
||||
:disabled="loadingModels || status === 'connecting'"
|
||||
value-key="id"
|
||||
label-key="display_name"
|
||||
:placeholder="loadingModels ? t('common.loading') + '...' : t('admin.accounts.selectTestModel')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
|
||||
>
|
||||
{{ t('admin.accounts.soraTestHint') }}
|
||||
</div>
|
||||
|
||||
<div v-if="supportsGeminiImageTest" class="space-y-1.5">
|
||||
<TextArea
|
||||
v-model="testPrompt"
|
||||
:label="t('admin.accounts.geminiImagePromptLabel')"
|
||||
:placeholder="t('admin.accounts.geminiImagePromptPlaceholder')"
|
||||
:hint="t('admin.accounts.geminiImageTestHint')"
|
||||
:disabled="status === 'connecting'"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Output -->
|
||||
<div class="group relative">
|
||||
<div
|
||||
ref="terminalRef"
|
||||
class="max-h-[240px] min-h-[120px] overflow-y-auto rounded-xl border border-gray-700 bg-gray-900 p-4 font-mono text-sm dark:border-gray-800 dark:bg-black"
|
||||
>
|
||||
<!-- Status Line -->
|
||||
<div v-if="status === 'idle'" class="flex items-center gap-2 text-gray-500">
|
||||
<Icon name="play" size="sm" :stroke-width="2" />
|
||||
<span>{{ t('admin.accounts.readyToTest') }}</span>
|
||||
</div>
|
||||
<div v-else-if="status === 'connecting'" class="flex items-center gap-2 text-yellow-400">
|
||||
<Icon name="refresh" size="sm" class="animate-spin" :stroke-width="2" />
|
||||
<span>{{ t('admin.accounts.connectingToApi') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Output Lines -->
|
||||
<div v-for="(line, index) in outputLines" :key="index" :class="line.class">
|
||||
{{ line.text }}
|
||||
</div>
|
||||
|
||||
<!-- Streaming Content -->
|
||||
<div v-if="streamingContent" class="text-green-400">
|
||||
{{ streamingContent }}<span class="animate-pulse">_</span>
|
||||
</div>
|
||||
|
||||
<!-- Result Status -->
|
||||
<div
|
||||
v-if="status === 'success'"
|
||||
class="mt-3 flex items-center gap-2 border-t border-gray-700 pt-3 text-green-400"
|
||||
>
|
||||
<Icon name="check" size="sm" :stroke-width="2" />
|
||||
<span>{{ t('admin.accounts.testCompleted') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="status === 'error'"
|
||||
class="mt-3 flex items-center gap-2 border-t border-gray-700 pt-3 text-red-400"
|
||||
>
|
||||
<Icon name="x" size="sm" :stroke-width="2" />
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copy Button -->
|
||||
<button
|
||||
v-if="outputLines.length > 0"
|
||||
@click="copyOutput"
|
||||
class="absolute right-2 top-2 rounded-lg bg-gray-800/80 p-1.5 text-gray-400 opacity-0 transition-all hover:bg-gray-700 hover:text-white group-hover:opacity-100"
|
||||
:title="t('admin.accounts.copyOutput')"
|
||||
>
|
||||
<Icon name="link" size="sm" :stroke-width="2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="generatedImages.length > 0" class="space-y-2">
|
||||
<div class="text-xs font-medium text-gray-600 dark:text-gray-300">
|
||||
{{ t('admin.accounts.geminiImagePreview') }}
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<a
|
||||
v-for="(image, index) in generatedImages"
|
||||
:key="`${image.url}-${index}`"
|
||||
:href="image.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition hover:border-primary-300 hover:shadow-md dark:border-dark-500 dark:bg-dark-700"
|
||||
>
|
||||
<img :src="image.url" :alt="`gemini-test-image-${index + 1}`" class="h-48 w-full object-cover" />
|
||||
<div class="border-t border-gray-100 px-3 py-2 text-xs text-gray-500 dark:border-dark-500 dark:text-gray-300">
|
||||
{{ image.mimeType || 'image/*' }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test Info -->
|
||||
<div class="flex items-center justify-between px-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="grid" size="sm" :stroke-width="2" />
|
||||
{{ isSoraAccount ? t('admin.accounts.soraTestTarget') : t('admin.accounts.testModel') }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="chat" size="sm" :stroke-width="2" />
|
||||
{{
|
||||
isSoraAccount
|
||||
? t('admin.accounts.soraTestMode')
|
||||
: supportsGeminiImageTest
|
||||
? t('admin.accounts.geminiImageTestMode')
|
||||
: t('admin.accounts.testPrompt')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
@click="handleClose"
|
||||
class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500"
|
||||
:disabled="status === 'connecting'"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
<button
|
||||
@click="startTest"
|
||||
:disabled="status === 'connecting' || (!isSoraAccount && !selectedModelId)"
|
||||
:class="[
|
||||
'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all',
|
||||
status === 'connecting' || (!isSoraAccount && !selectedModelId)
|
||||
? 'cursor-not-allowed bg-primary-400 text-white'
|
||||
: status === 'success'
|
||||
? 'bg-green-500 text-white hover:bg-green-600'
|
||||
: status === 'error'
|
||||
? 'bg-orange-500 text-white hover:bg-orange-600'
|
||||
: 'bg-primary-500 text-white hover:bg-primary-600'
|
||||
]"
|
||||
>
|
||||
<Icon
|
||||
v-if="status === 'connecting'"
|
||||
name="refresh"
|
||||
size="sm"
|
||||
class="animate-spin"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
<Icon v-else-if="status === 'idle'" name="play" size="sm" :stroke-width="2" />
|
||||
<Icon v-else name="refresh" size="sm" :stroke-width="2" />
|
||||
<span>
|
||||
{{
|
||||
status === 'connecting'
|
||||
? t('admin.accounts.testing')
|
||||
: status === 'idle'
|
||||
? t('admin.accounts.startTest')
|
||||
: t('admin.accounts.retry')
|
||||
}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Select from '@/components/common/Select.vue'
|
||||
import TextArea from '@/components/common/TextArea.vue'
|
||||
import { Icon } from '@/components/icons'
|
||||
import { useClipboard } from '@/composables/useClipboard'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { Account, ClaudeModel } from '@/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { copyToClipboard } = useClipboard()
|
||||
|
||||
interface OutputLine {
|
||||
text: string
|
||||
class: string
|
||||
}
|
||||
|
||||
interface PreviewImage {
|
||||
url: string
|
||||
mimeType?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
account: Account | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const terminalRef = ref<HTMLElement | null>(null)
|
||||
const status = ref<'idle' | 'connecting' | 'success' | 'error'>('idle')
|
||||
const outputLines = ref<OutputLine[]>([])
|
||||
const streamingContent = ref('')
|
||||
const errorMessage = ref('')
|
||||
const availableModels = ref<ClaudeModel[]>([])
|
||||
const selectedModelId = ref('')
|
||||
const testPrompt = ref('')
|
||||
const loadingModels = ref(false)
|
||||
let eventSource: EventSource | null = null
|
||||
const isSoraAccount = computed(() => props.account?.platform === 'sora')
|
||||
const generatedImages = ref<PreviewImage[]>([])
|
||||
const prioritizedGeminiModels = ['gemini-3.1-flash-image', 'gemini-2.5-flash-image', 'gemini-2.5-flash', 'gemini-2.5-pro', 'gemini-3-flash-preview', 'gemini-3-pro-preview', 'gemini-2.0-flash']
|
||||
const supportsGeminiImageTest = computed(() => {
|
||||
if (isSoraAccount.value) return false
|
||||
const modelID = selectedModelId.value.toLowerCase()
|
||||
if (!modelID.startsWith('gemini-') || !modelID.includes('-image')) return false
|
||||
|
||||
return props.account?.platform === 'gemini' || (props.account?.platform === 'antigravity' && props.account?.type === 'apikey')
|
||||
})
|
||||
|
||||
const sortTestModels = (models: ClaudeModel[]) => {
|
||||
const priorityMap = new Map(prioritizedGeminiModels.map((id, index) => [id, index]))
|
||||
|
||||
return [...models].sort((a, b) => {
|
||||
const aPriority = priorityMap.get(a.id) ?? Number.MAX_SAFE_INTEGER
|
||||
const bPriority = priorityMap.get(b.id) ?? Number.MAX_SAFE_INTEGER
|
||||
if (aPriority !== bPriority) return aPriority - bPriority
|
||||
return 0
|
||||
})
|
||||
}
|
||||
|
||||
// Load available models when modal opens
|
||||
watch(
|
||||
() => props.show,
|
||||
async (newVal) => {
|
||||
if (newVal && props.account) {
|
||||
testPrompt.value = ''
|
||||
resetState()
|
||||
await loadAvailableModels()
|
||||
} else {
|
||||
closeEventSource()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(selectedModelId, () => {
|
||||
if (supportsGeminiImageTest.value && !testPrompt.value.trim()) {
|
||||
testPrompt.value = t('admin.accounts.geminiImagePromptDefault')
|
||||
}
|
||||
})
|
||||
|
||||
const loadAvailableModels = async () => {
|
||||
if (!props.account) return
|
||||
if (props.account.platform === 'sora') {
|
||||
availableModels.value = []
|
||||
selectedModelId.value = ''
|
||||
loadingModels.value = false
|
||||
return
|
||||
}
|
||||
|
||||
loadingModels.value = true
|
||||
selectedModelId.value = '' // Reset selection before loading
|
||||
try {
|
||||
const models = await adminAPI.accounts.getAvailableModels(props.account.id)
|
||||
availableModels.value = props.account.platform === 'gemini' || props.account.platform === 'antigravity'
|
||||
? sortTestModels(models)
|
||||
: models
|
||||
// Default selection by platform
|
||||
if (availableModels.value.length > 0) {
|
||||
if (props.account.platform === 'gemini') {
|
||||
selectedModelId.value = availableModels.value[0].id
|
||||
} else {
|
||||
// Try to select Sonnet as default, otherwise use first model
|
||||
const sonnetModel = availableModels.value.find((m) => m.id.includes('sonnet'))
|
||||
selectedModelId.value = sonnetModel?.id || availableModels.value[0].id
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load available models:', error)
|
||||
// Fallback to empty list
|
||||
availableModels.value = []
|
||||
selectedModelId.value = ''
|
||||
} finally {
|
||||
loadingModels.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetState = () => {
|
||||
status.value = 'idle'
|
||||
outputLines.value = []
|
||||
streamingContent.value = ''
|
||||
errorMessage.value = ''
|
||||
generatedImages.value = []
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
// 防止在连接测试进行中关闭对话框
|
||||
if (status.value === 'connecting') {
|
||||
return
|
||||
}
|
||||
closeEventSource()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const closeEventSource = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
eventSource = null
|
||||
}
|
||||
}
|
||||
|
||||
const addLine = (text: string, className: string = 'text-gray-300') => {
|
||||
outputLines.value.push({ text, class: className })
|
||||
scrollToBottom()
|
||||
}
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick()
|
||||
if (terminalRef.value) {
|
||||
terminalRef.value.scrollTop = terminalRef.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
const startTest = async () => {
|
||||
if (!props.account || (!isSoraAccount.value && !selectedModelId.value)) return
|
||||
|
||||
resetState()
|
||||
status.value = 'connecting'
|
||||
addLine(t('admin.accounts.startingTestForAccount', { name: props.account.name }), 'text-blue-400')
|
||||
addLine(t('admin.accounts.testAccountTypeLabel', { type: props.account.type }), 'text-gray-400')
|
||||
addLine('', 'text-gray-300')
|
||||
|
||||
closeEventSource()
|
||||
|
||||
try {
|
||||
// Create EventSource for SSE
|
||||
const url = `/api/v1/admin/accounts/${props.account.id}/test`
|
||||
|
||||
// Use fetch with streaming for SSE since EventSource doesn't support POST
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(
|
||||
isSoraAccount.value
|
||||
? {}
|
||||
: {
|
||||
model_id: selectedModelId.value,
|
||||
prompt: supportsGeminiImageTest.value ? testPrompt.value.trim() : ''
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader()
|
||||
if (!reader) {
|
||||
throw new Error('No response body')
|
||||
}
|
||||
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() || ''
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
const jsonStr = line.slice(6).trim()
|
||||
if (jsonStr) {
|
||||
try {
|
||||
const event = JSON.parse(jsonStr)
|
||||
handleEvent(event)
|
||||
} catch (e) {
|
||||
console.error('Failed to parse SSE event:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
status.value = 'error'
|
||||
errorMessage.value = error.message || 'Unknown error'
|
||||
addLine(`Error: ${errorMessage.value}`, 'text-red-400')
|
||||
}
|
||||
}
|
||||
|
||||
const handleEvent = (event: {
|
||||
type: string
|
||||
text?: string
|
||||
model?: string
|
||||
success?: boolean
|
||||
error?: string
|
||||
image_url?: string
|
||||
mime_type?: string
|
||||
}) => {
|
||||
switch (event.type) {
|
||||
case 'test_start':
|
||||
addLine(t('admin.accounts.connectedToApi'), 'text-green-400')
|
||||
if (event.model) {
|
||||
addLine(t('admin.accounts.usingModel', { model: event.model }), 'text-cyan-400')
|
||||
}
|
||||
addLine(
|
||||
isSoraAccount.value
|
||||
? t('admin.accounts.soraTestingFlow')
|
||||
: supportsGeminiImageTest.value
|
||||
? t('admin.accounts.sendingGeminiImageRequest')
|
||||
: t('admin.accounts.sendingTestMessage'),
|
||||
'text-gray-400'
|
||||
)
|
||||
addLine('', 'text-gray-300')
|
||||
addLine(t('admin.accounts.response'), 'text-yellow-400')
|
||||
break
|
||||
|
||||
case 'content':
|
||||
if (event.text) {
|
||||
streamingContent.value += event.text
|
||||
scrollToBottom()
|
||||
}
|
||||
break
|
||||
|
||||
case 'image':
|
||||
if (event.image_url) {
|
||||
generatedImages.value.push({
|
||||
url: event.image_url,
|
||||
mimeType: event.mime_type
|
||||
})
|
||||
addLine(t('admin.accounts.geminiImageReceived', { count: generatedImages.value.length }), 'text-purple-300')
|
||||
}
|
||||
break
|
||||
|
||||
case 'test_complete':
|
||||
// Move streaming content to output lines
|
||||
if (streamingContent.value) {
|
||||
addLine(streamingContent.value, 'text-green-300')
|
||||
streamingContent.value = ''
|
||||
}
|
||||
if (event.success) {
|
||||
status.value = 'success'
|
||||
} else {
|
||||
status.value = 'error'
|
||||
errorMessage.value = event.error || 'Test failed'
|
||||
}
|
||||
break
|
||||
|
||||
case 'error':
|
||||
status.value = 'error'
|
||||
errorMessage.value = event.error || 'Unknown error'
|
||||
if (streamingContent.value) {
|
||||
addLine(streamingContent.value, 'text-green-300')
|
||||
streamingContent.value = ''
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const copyOutput = () => {
|
||||
const text = outputLines.value.map((l) => l.text).join('\n')
|
||||
copyToClipboard(text, t('admin.accounts.outputCopied'))
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading state -->
|
||||
<div v-if="props.loading && !props.stats" class="space-y-0.5">
|
||||
<div class="h-3 w-12 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
|
||||
<div class="h-3 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
|
||||
<div class="h-3 w-10 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="props.error && !props.stats" class="text-xs text-red-500">
|
||||
{{ props.error }}
|
||||
</div>
|
||||
|
||||
<!-- Stats data -->
|
||||
<div v-else-if="props.stats" class="space-y-0.5 text-xs">
|
||||
<!-- Requests -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-gray-500 dark:text-gray-400"
|
||||
>{{ t('admin.accounts.stats.requests') }}:</span
|
||||
>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">{{
|
||||
formatNumber(props.stats.requests)
|
||||
}}</span>
|
||||
</div>
|
||||
<!-- Tokens -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-gray-500 dark:text-gray-400"
|
||||
>{{ t('admin.accounts.stats.tokens') }}:</span
|
||||
>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">{{
|
||||
formatTokens(props.stats.tokens)
|
||||
}}</span>
|
||||
</div>
|
||||
<!-- Cost (Account) -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}:</span>
|
||||
<span class="font-medium text-emerald-600 dark:text-emerald-400">{{
|
||||
formatCurrency(props.stats.cost)
|
||||
}}</span>
|
||||
</div>
|
||||
<!-- Cost (User/API Key) -->
|
||||
<div v-if="props.stats.user_cost != null" class="flex items-center gap-1">
|
||||
<span class="text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}:</span>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">{{
|
||||
formatCurrency(props.stats.user_cost)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No data -->
|
||||
<div v-else class="text-xs text-gray-400">-</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { WindowStats } from '@/types'
|
||||
import { formatNumber, formatCurrency } from '@/utils/format'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
stats?: WindowStats | null
|
||||
loading?: boolean
|
||||
error?: string | null
|
||||
}>(),
|
||||
{
|
||||
stats: null,
|
||||
loading: false,
|
||||
error: null
|
||||
}
|
||||
)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// Format large token numbers (e.g., 1234567 -> 1.23M)
|
||||
const formatTokens = (tokens: number): string => {
|
||||
if (tokens >= 1000000) {
|
||||
return `${(tokens / 1000000).toFixed(2)}M`
|
||||
} else if (tokens >= 1000) {
|
||||
return `${(tokens / 1000).toFixed(1)}K`
|
||||
}
|
||||
return tokens.toString()
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Multi-select Dropdown -->
|
||||
<div class="relative mb-3">
|
||||
<div
|
||||
@click="toggleDropdown"
|
||||
class="cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-2 dark:border-dark-500 dark:bg-dark-700"
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-1.5">
|
||||
<span
|
||||
v-for="model in modelValue"
|
||||
:key="model"
|
||||
class="inline-flex items-center justify-between gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-700 dark:bg-dark-600 dark:text-gray-300"
|
||||
>
|
||||
<span class="flex items-center gap-1 truncate">
|
||||
<ModelIcon :model="model" size="14px" />
|
||||
<span class="truncate">{{ model }}</span>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@click.stop="removeModel(model)"
|
||||
class="shrink-0 rounded-full hover:bg-gray-200 dark:hover:bg-dark-500"
|
||||
>
|
||||
<Icon name="x" size="xs" class="h-3.5 w-3.5" :stroke-width="2" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-between border-t border-gray-200 pt-2 dark:border-dark-600">
|
||||
<span class="text-xs text-gray-400">{{ t('admin.accounts.modelCount', { count: modelValue.length }) }}</span>
|
||||
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dropdown List -->
|
||||
<div
|
||||
v-if="showDropdown"
|
||||
class="absolute left-0 right-0 top-full z-50 mt-1 rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dark-600 dark:bg-dark-700"
|
||||
>
|
||||
<div class="sticky top-0 border-b border-gray-200 bg-white p-2 dark:border-dark-600 dark:bg-dark-700">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="input w-full text-sm"
|
||||
:placeholder="t('admin.accounts.searchModels')"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
<div class="max-h-52 overflow-auto">
|
||||
<button
|
||||
v-for="model in filteredModels"
|
||||
:key="model.value"
|
||||
type="button"
|
||||
@click="toggleModel(model.value)"
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-dark-600"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
|
||||
modelValue.includes(model.value)
|
||||
? 'border-primary-500 bg-primary-500 text-white'
|
||||
: 'border-gray-300 dark:border-dark-500'
|
||||
]"
|
||||
>
|
||||
<svg v-if="modelValue.includes(model.value)" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</span>
|
||||
<ModelIcon :model="model.value" size="18px" />
|
||||
<span class="truncate text-gray-900 dark:text-white">{{ model.value }}</span>
|
||||
</button>
|
||||
<div v-if="filteredModels.length === 0" class="px-3 py-4 text-center text-sm text-gray-500">
|
||||
{{ t('admin.accounts.noMatchingModels') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="mb-4 flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="fillRelated"
|
||||
class="rounded-lg border border-blue-200 px-3 py-1.5 text-sm text-blue-600 hover:bg-blue-50 dark:border-blue-800 dark:text-blue-400 dark:hover:bg-blue-900/30"
|
||||
>
|
||||
{{ t('admin.accounts.fillRelatedModels') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="clearAll"
|
||||
class="rounded-lg border border-red-200 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-900/30"
|
||||
>
|
||||
{{ t('admin.accounts.clearAllModels') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Custom Model Input -->
|
||||
<div class="mb-3">
|
||||
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.accounts.customModelName') }}</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="customModel"
|
||||
type="text"
|
||||
class="input flex-1"
|
||||
:placeholder="t('admin.accounts.enterCustomModelName')"
|
||||
@keydown.enter.prevent="handleEnter"
|
||||
@compositionstart="isComposing = true"
|
||||
@compositionend="isComposing = false"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="addCustom"
|
||||
class="rounded-lg bg-primary-50 px-4 py-2 text-sm font-medium text-primary-600 hover:bg-primary-100 dark:bg-primary-900/30 dark:text-primary-400 dark:hover:bg-primary-900/50"
|
||||
>
|
||||
{{ t('admin.accounts.addModel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import ModelIcon from '@/components/common/ModelIcon.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { allModels, getModelsByPlatform } from '@/composables/useModelWhitelist'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string[]
|
||||
platform?: string
|
||||
platforms?: string[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string[]]
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const showDropdown = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const customModel = ref('')
|
||||
const isComposing = ref(false)
|
||||
const normalizedPlatforms = computed(() => {
|
||||
const rawPlatforms =
|
||||
props.platforms && props.platforms.length > 0
|
||||
? props.platforms
|
||||
: props.platform
|
||||
? [props.platform]
|
||||
: []
|
||||
|
||||
return Array.from(
|
||||
new Set(
|
||||
rawPlatforms
|
||||
.map(platform => platform?.trim())
|
||||
.filter((platform): platform is string => Boolean(platform))
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
const availableOptions = computed(() => {
|
||||
if (normalizedPlatforms.value.length === 0) {
|
||||
return allModels
|
||||
}
|
||||
|
||||
const allowedModels = new Set<string>()
|
||||
for (const platform of normalizedPlatforms.value) {
|
||||
for (const model of getModelsByPlatform(platform)) {
|
||||
allowedModels.add(model)
|
||||
}
|
||||
}
|
||||
|
||||
return allModels.filter(model => allowedModels.has(model.value))
|
||||
})
|
||||
|
||||
const filteredModels = computed(() => {
|
||||
const query = searchQuery.value.toLowerCase().trim()
|
||||
if (!query) return availableOptions.value
|
||||
return availableOptions.value.filter(
|
||||
m => m.value.toLowerCase().includes(query) || m.label.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
|
||||
const toggleDropdown = () => {
|
||||
showDropdown.value = !showDropdown.value
|
||||
if (!showDropdown.value) searchQuery.value = ''
|
||||
}
|
||||
|
||||
const removeModel = (model: string) => {
|
||||
emit('update:modelValue', props.modelValue.filter(m => m !== model))
|
||||
}
|
||||
|
||||
const toggleModel = (model: string) => {
|
||||
if (props.modelValue.includes(model)) {
|
||||
removeModel(model)
|
||||
} else {
|
||||
emit('update:modelValue', [...props.modelValue, model])
|
||||
}
|
||||
}
|
||||
|
||||
const addCustom = () => {
|
||||
const model = customModel.value.trim()
|
||||
if (!model) return
|
||||
if (props.modelValue.includes(model)) {
|
||||
appStore.showInfo(t('admin.accounts.modelExists'))
|
||||
return
|
||||
}
|
||||
emit('update:modelValue', [...props.modelValue, model])
|
||||
customModel.value = ''
|
||||
}
|
||||
|
||||
const handleEnter = () => {
|
||||
if (!isComposing.value) addCustom()
|
||||
}
|
||||
|
||||
const fillRelated = () => {
|
||||
const newModels = [...props.modelValue]
|
||||
for (const platform of normalizedPlatforms.value) {
|
||||
for (const model of getModelsByPlatform(platform)) {
|
||||
if (!newModels.includes(model)) {
|
||||
newModels.push(model)
|
||||
}
|
||||
}
|
||||
}
|
||||
emit('update:modelValue', newModels)
|
||||
}
|
||||
|
||||
const clearAll = () => {
|
||||
emit('update:modelValue', [])
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,992 @@
|
||||
<template>
|
||||
<div
|
||||
class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/30"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500">
|
||||
<Icon name="link" size="md" class="text-white" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="mb-3 font-semibold text-blue-900 dark:text-blue-200">{{ oauthTitle }}</h4>
|
||||
|
||||
<!-- Auth Method Selection -->
|
||||
<div v-if="showMethodSelection" class="mb-4">
|
||||
<label class="mb-2 block text-sm font-medium text-blue-800 dark:text-blue-300">
|
||||
{{ methodLabel }}
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<label class="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
v-model="inputMethod"
|
||||
type="radio"
|
||||
value="manual"
|
||||
class="text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span class="text-sm text-blue-900 dark:text-blue-200">{{
|
||||
t('admin.accounts.oauth.manualAuth')
|
||||
}}</span>
|
||||
</label>
|
||||
<label v-if="showCookieOption" class="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
v-model="inputMethod"
|
||||
type="radio"
|
||||
value="cookie"
|
||||
class="text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span class="text-sm text-blue-900 dark:text-blue-200">{{
|
||||
t('admin.accounts.oauth.cookieAutoAuth')
|
||||
}}</span>
|
||||
</label>
|
||||
<label v-if="showRefreshTokenOption" class="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
v-model="inputMethod"
|
||||
type="radio"
|
||||
value="refresh_token"
|
||||
class="text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span class="text-sm text-blue-900 dark:text-blue-200">{{
|
||||
t(getOAuthKey('refreshTokenAuth'))
|
||||
}}</span>
|
||||
</label>
|
||||
<label v-if="showSessionTokenOption" class="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
v-model="inputMethod"
|
||||
type="radio"
|
||||
value="session_token"
|
||||
class="text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span class="text-sm text-blue-900 dark:text-blue-200">{{
|
||||
t(getOAuthKey('sessionTokenAuth'))
|
||||
}}</span>
|
||||
</label>
|
||||
<label v-if="showAccessTokenOption" class="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
v-model="inputMethod"
|
||||
type="radio"
|
||||
value="access_token"
|
||||
class="text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span class="text-sm text-blue-900 dark:text-blue-200">{{
|
||||
t('admin.accounts.oauth.openai.accessTokenAuth', '手动输入 AT')
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Refresh Token Input (OpenAI / Antigravity) -->
|
||||
<div v-if="inputMethod === 'refresh_token'" class="space-y-4">
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
{{ t(getOAuthKey('refreshTokenDesc')) }}
|
||||
</p>
|
||||
|
||||
<!-- Refresh Token Input -->
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<Icon name="key" size="sm" class="text-blue-500" />
|
||||
Refresh Token
|
||||
<span
|
||||
v-if="parsedRefreshTokenCount > 1"
|
||||
class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.keysCount', { count: parsedRefreshTokenCount }) }}
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="refreshTokenInput"
|
||||
rows="3"
|
||||
class="input w-full resize-y font-mono text-sm"
|
||||
:placeholder="t(getOAuthKey('refreshTokenPlaceholder'))"
|
||||
></textarea>
|
||||
<p
|
||||
v-if="parsedRefreshTokenCount > 1"
|
||||
class="mt-1 text-xs text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.batchCreateAccounts', { count: parsedRefreshTokenCount }) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
|
||||
>
|
||||
<p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Validate Button -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary w-full"
|
||||
:disabled="loading || !refreshTokenInput.trim()"
|
||||
@click="handleValidateRefreshToken"
|
||||
>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="-ml-1 mr-2 h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<Icon v-else name="sparkles" size="sm" class="mr-2" />
|
||||
{{
|
||||
loading
|
||||
? t(getOAuthKey('validating'))
|
||||
: t(getOAuthKey('validateAndCreate'))
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session Token Input (Sora) -->
|
||||
<div v-if="inputMethod === 'session_token'" class="space-y-4">
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
{{ t(getOAuthKey('sessionTokenDesc')) }}
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<Icon name="key" size="sm" class="text-blue-500" />
|
||||
{{ t(getOAuthKey('sessionTokenRawLabel')) }}
|
||||
<span
|
||||
v-if="parsedSessionTokenCount > 1"
|
||||
class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.keysCount', { count: parsedSessionTokenCount }) }}
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="sessionTokenInput"
|
||||
rows="3"
|
||||
class="input w-full resize-y font-mono text-sm"
|
||||
:placeholder="t(getOAuthKey('sessionTokenRawPlaceholder'))"
|
||||
></textarea>
|
||||
<p class="mt-1 text-xs text-blue-600 dark:text-blue-400">
|
||||
{{ t(getOAuthKey('sessionTokenRawHint')) }}
|
||||
</p>
|
||||
<div class="mt-2 flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary px-2 py-1 text-xs"
|
||||
@click="handleOpenSoraSessionUrl"
|
||||
>
|
||||
{{ t(getOAuthKey('openSessionUrl')) }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary px-2 py-1 text-xs"
|
||||
@click="handleCopySoraSessionUrl"
|
||||
>
|
||||
{{ t(getOAuthKey('copySessionUrl')) }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-1 break-all text-xs text-blue-600 dark:text-blue-400">
|
||||
{{ soraSessionUrl }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-amber-600 dark:text-amber-400">
|
||||
{{ t(getOAuthKey('sessionUrlHint')) }}
|
||||
</p>
|
||||
<p
|
||||
v-if="parsedSessionTokenCount > 1"
|
||||
class="mt-1 text-xs text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.batchCreateAccounts', { count: parsedSessionTokenCount }) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="sessionTokenInput.trim()" class="mb-4 space-y-3">
|
||||
<div>
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{{ t(getOAuthKey('parsedSessionTokensLabel')) }}
|
||||
<span
|
||||
v-if="parsedSessionTokenCount > 0"
|
||||
class="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] text-white"
|
||||
>
|
||||
{{ parsedSessionTokenCount }}
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
:value="parsedSessionTokensText"
|
||||
rows="2"
|
||||
readonly
|
||||
class="input w-full resize-y bg-gray-50 font-mono text-xs dark:bg-gray-700"
|
||||
></textarea>
|
||||
<p
|
||||
v-if="parsedSessionTokenCount === 0"
|
||||
class="mt-1 text-xs text-amber-600 dark:text-amber-400"
|
||||
>
|
||||
{{ t(getOAuthKey('parsedSessionTokensEmpty')) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{{ t(getOAuthKey('parsedAccessTokensLabel')) }}
|
||||
<span
|
||||
v-if="parsedAccessTokenFromSessionInputCount > 0"
|
||||
class="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] text-white"
|
||||
>
|
||||
{{ parsedAccessTokenFromSessionInputCount }}
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
:value="parsedAccessTokensText"
|
||||
rows="2"
|
||||
readonly
|
||||
class="input w-full resize-y bg-gray-50 font-mono text-xs dark:bg-gray-700"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
|
||||
>
|
||||
<p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary w-full"
|
||||
:disabled="loading || parsedSessionTokenCount === 0"
|
||||
@click="handleValidateSessionToken"
|
||||
>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="-ml-1 mr-2 h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<Icon v-else name="sparkles" size="sm" class="mr-2" />
|
||||
{{
|
||||
loading
|
||||
? t(getOAuthKey('validating'))
|
||||
: t(getOAuthKey('validateAndCreate'))
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access Token Input (Sora) -->
|
||||
<div v-if="inputMethod === 'access_token'" class="space-y-4">
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
{{ t('admin.accounts.oauth.openai.accessTokenDesc', '直接粘贴 Access Token 创建账号，无需 OAuth 授权流程。支持批量导入（每行一个）。') }}
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<Icon name="key" size="sm" class="text-blue-500" />
|
||||
Access Token
|
||||
<span
|
||||
v-if="parsedAccessTokenCount > 1"
|
||||
class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.keysCount', { count: parsedAccessTokenCount }) }}
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="accessTokenInput"
|
||||
rows="3"
|
||||
class="input w-full resize-y font-mono text-sm"
|
||||
:placeholder="t('admin.accounts.oauth.openai.accessTokenPlaceholder', '粘贴 Access Token，每行一个')"
|
||||
></textarea>
|
||||
<p
|
||||
v-if="parsedAccessTokenCount > 1"
|
||||
class="mt-1 text-xs text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.batchCreateAccounts', { count: parsedAccessTokenCount }) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
|
||||
>
|
||||
<p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary w-full"
|
||||
:disabled="loading || !accessTokenInput.trim()"
|
||||
@click="handleImportAccessToken"
|
||||
>
|
||||
<Icon name="sparkles" size="sm" class="mr-2" />
|
||||
{{ t('admin.accounts.oauth.openai.importAccessToken', '导入 Access Token') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cookie Auto-Auth Form -->
|
||||
<div v-if="inputMethod === 'cookie'" class="space-y-4">
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
|
||||
{{ t('admin.accounts.oauth.cookieAutoAuthDesc') }}
|
||||
</p>
|
||||
|
||||
<!-- sessionKey Input -->
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<Icon name="key" size="sm" class="text-blue-500" />
|
||||
{{ t('admin.accounts.oauth.sessionKey') }}
|
||||
<span
|
||||
v-if="parsedKeyCount > 1 && allowMultiple"
|
||||
class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.keysCount', { count: parsedKeyCount }) }}
|
||||
</span>
|
||||
<button
|
||||
v-if="showHelp"
|
||||
type="button"
|
||||
class="text-blue-500 hover:text-blue-600"
|
||||
@click="showHelpDialog = !showHelpDialog"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="sessionKeyInput"
|
||||
rows="3"
|
||||
class="input w-full resize-y font-mono text-sm"
|
||||
:placeholder="
|
||||
allowMultiple
|
||||
? t('admin.accounts.oauth.sessionKeyPlaceholder')
|
||||
: t('admin.accounts.oauth.sessionKeyPlaceholderSingle')
|
||||
"
|
||||
></textarea>
|
||||
<p
|
||||
v-if="parsedKeyCount > 1 && allowMultiple"
|
||||
class="mt-1 text-xs text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
{{ t('admin.accounts.oauth.batchCreateAccounts', { count: parsedKeyCount }) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Help Section -->
|
||||
<div
|
||||
v-if="showHelpDialog && showHelp"
|
||||
class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/30"
|
||||
>
|
||||
<h5 class="mb-2 font-semibold text-amber-800 dark:text-amber-200">
|
||||
{{ t('admin.accounts.oauth.howToGetSessionKey') }}
|
||||
</h5>
|
||||
<ol
|
||||
class="list-inside list-decimal space-y-1 text-xs text-amber-700 dark:text-amber-300"
|
||||
>
|
||||
<li>{{ t('admin.accounts.oauth.step1') }}</li>
|
||||
<li>{{ t('admin.accounts.oauth.step2') }}</li>
|
||||
<li>{{ t('admin.accounts.oauth.step3') }}</li>
|
||||
<li>{{ t('admin.accounts.oauth.step4') }}</li>
|
||||
<li>{{ t('admin.accounts.oauth.step5') }}</li>
|
||||
<li>{{ t('admin.accounts.oauth.step6') }}</li>
|
||||
</ol>
|
||||
<p
|
||||
class="mt-2 text-xs text-amber-600 dark:text-amber-400"
|
||||
v-text="t('admin.accounts.oauth.sessionKeyFormat')"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
|
||||
>
|
||||
<p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Button -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary w-full"
|
||||
:disabled="loading || !sessionKeyInput.trim()"
|
||||
@click="handleCookieAuth"
|
||||
>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="-ml-1 mr-2 h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<Icon v-else name="sparkles" size="sm" class="mr-2" />
|
||||
{{
|
||||
loading
|
||||
? t('admin.accounts.oauth.authorizing')
|
||||
: t('admin.accounts.oauth.startAutoAuth')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual Authorization Flow -->
|
||||
<div v-if="inputMethod === 'manual'" class="space-y-4">
|
||||
<p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
|
||||
{{ oauthFollowSteps }}
|
||||
</p>
|
||||
|
||||
<!-- Step 1: Generate Auth URL -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
{{ oauthStep1GenerateUrl }}
|
||||
</p>
|
||||
<div v-if="showProjectId && platform === 'gemini'" class="mb-3">
|
||||
<label class="input-label flex items-center gap-2">
|
||||
{{ t('admin.accounts.oauth.gemini.projectIdLabel') }}
|
||||
<a
|
||||
href="https://console.cloud.google.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1 text-xs font-normal text-blue-500 hover:text-blue-600 dark:text-blue-400"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
{{ t('admin.accounts.oauth.gemini.howToGetProjectId') }}
|
||||
</a>
|
||||
</label>
|
||||
<input
|
||||
v-model="projectId"
|
||||
type="text"
|
||||
class="input w-full font-mono text-sm"
|
||||
:placeholder="t('admin.accounts.oauth.gemini.projectIdPlaceholder')"
|
||||
/>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.oauth.gemini.projectIdHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
v-if="!authUrl"
|
||||
type="button"
|
||||
:disabled="loading"
|
||||
class="btn btn-primary text-sm"
|
||||
@click="handleGenerateUrl"
|
||||
>
|
||||
<svg
|
||||
v-if="loading"
|
||||
class="-ml-1 mr-2 h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<Icon v-else name="link" size="sm" class="mr-2" />
|
||||
{{ loading ? t('admin.accounts.oauth.generating') : oauthGenerateAuthUrl }}
|
||||
</button>
|
||||
<div v-else class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
:value="authUrl"
|
||||
readonly
|
||||
type="text"
|
||||
class="input flex-1 bg-gray-50 font-mono text-xs dark:bg-gray-700"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary p-2"
|
||||
title="Copy URL"
|
||||
@click="handleCopyUrl"
|
||||
>
|
||||
<svg
|
||||
v-if="!copied"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
|
||||
/>
|
||||
</svg>
|
||||
<Icon
|
||||
v-else
|
||||
name="check"
|
||||
size="sm"
|
||||
class="text-green-500"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400"
|
||||
@click="handleRegenerate"
|
||||
>
|
||||
<Icon name="refresh" size="xs" class="mr-1 inline" />
|
||||
{{ t('admin.accounts.oauth.regenerate') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Open URL and authorize -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
{{ oauthStep2OpenUrl }}
|
||||
</p>
|
||||
<p class="text-sm text-blue-700 dark:text-blue-300">
|
||||
{{ oauthOpenUrlDesc }}
|
||||
</p>
|
||||
<!-- OpenAI Important Notice -->
|
||||
<div
|
||||
v-if="isOpenAI"
|
||||
class="mt-2 rounded border border-amber-300 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/30"
|
||||
>
|
||||
<p
|
||||
class="text-xs text-amber-800 dark:text-amber-300"
|
||||
v-text="oauthImportantNotice"
|
||||
></p>
|
||||
</div>
|
||||
<!-- Proxy Warning (for non-OpenAI) -->
|
||||
<div
|
||||
v-else-if="showProxyWarning"
|
||||
class="mt-2 rounded border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/30"
|
||||
>
|
||||
<p
|
||||
class="text-xs text-yellow-800 dark:text-yellow-300"
|
||||
v-text="t('admin.accounts.oauth.proxyWarning')"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Enter authorization code -->
|
||||
<div
|
||||
class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
|
||||
{{ oauthStep3EnterCode }}
|
||||
</p>
|
||||
<p
|
||||
class="mb-3 text-sm text-blue-700 dark:text-blue-300"
|
||||
v-text="oauthAuthCodeDesc"
|
||||
></p>
|
||||
<div>
|
||||
<label class="input-label">
|
||||
<Icon name="key" size="sm" class="mr-1 inline text-blue-500" />
|
||||
{{ oauthAuthCode }}
|
||||
</label>
|
||||
<textarea
|
||||
v-model="authCodeInput"
|
||||
rows="3"
|
||||
class="input w-full resize-none font-mono text-sm"
|
||||
:placeholder="oauthAuthCodePlaceholder"
|
||||
></textarea>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<Icon name="infoCircle" size="xs" class="mr-1 inline" />
|
||||
{{ oauthAuthCodeHint }}
|
||||
</p>
|
||||
|
||||
<!-- Gemini-specific state parameter warning -->
|
||||
<div
|
||||
v-if="platform === 'gemini'"
|
||||
class="mt-3 rounded-lg border-2 border-amber-400 bg-amber-50 p-3 dark:border-amber-600 dark:bg-amber-900/30"
|
||||
>
|
||||
<div class="flex items-start gap-2">
|
||||
<Icon
|
||||
name="exclamationTriangle"
|
||||
size="md"
|
||||
class="flex-shrink-0 text-amber-600 dark:text-amber-400"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
<div class="text-sm text-amber-800 dark:text-amber-300">
|
||||
<p class="font-semibold">{{ $t('admin.accounts.oauth.gemini.stateWarningTitle') }}</p>
|
||||
<p class="mt-1">{{ $t('admin.accounts.oauth.gemini.stateWarningDesc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="mt-3 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
|
||||
>
|
||||
<p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useClipboard } from '@/composables/useClipboard'
|
||||
import { parseSoraRawTokens } from '@/utils/soraTokenParser'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import type { AddMethod, AuthInputMethod } from '@/composables/useAccountOAuth'
|
||||
import type { AccountPlatform } from '@/types'
|
||||
|
||||
interface Props {
|
||||
addMethod: AddMethod
|
||||
authUrl?: string
|
||||
sessionId?: string
|
||||
loading?: boolean
|
||||
error?: string
|
||||
showHelp?: boolean
|
||||
showProxyWarning?: boolean
|
||||
allowMultiple?: boolean
|
||||
methodLabel?: string
|
||||
showCookieOption?: boolean // Whether to show cookie auto-auth option
|
||||
showRefreshTokenOption?: boolean // Whether to show refresh token input option (OpenAI only)
|
||||
showSessionTokenOption?: boolean // Whether to show session token input option (Sora only)
|
||||
showAccessTokenOption?: boolean // Whether to show access token input option (Sora only)
|
||||
platform?: AccountPlatform // Platform type for different UI/text
|
||||
showProjectId?: boolean // New prop to control project ID visibility
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
authUrl: '',
|
||||
sessionId: '',
|
||||
loading: false,
|
||||
error: '',
|
||||
showHelp: true,
|
||||
showProxyWarning: true,
|
||||
allowMultiple: false,
|
||||
methodLabel: 'Authorization Method',
|
||||
showCookieOption: true,
|
||||
showRefreshTokenOption: false,
|
||||
showSessionTokenOption: false,
|
||||
showAccessTokenOption: false,
|
||||
platform: 'anthropic',
|
||||
showProjectId: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'generate-url': []
|
||||
'exchange-code': [code: string]
|
||||
'cookie-auth': [sessionKey: string]
|
||||
'validate-refresh-token': [refreshToken: string]
|
||||
'validate-session-token': [sessionToken: string]
|
||||
'import-access-token': [accessToken: string]
|
||||
'update:inputMethod': [method: AuthInputMethod]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const isOpenAI = computed(() => props.platform === 'openai' || props.platform === 'sora')
|
||||
|
||||
// Get translation key based on platform
|
||||
const getOAuthKey = (key: string) => {
|
||||
if (props.platform === 'openai' || props.platform === 'sora') return `admin.accounts.oauth.openai.${key}`
|
||||
if (props.platform === 'gemini') return `admin.accounts.oauth.gemini.${key}`
|
||||
if (props.platform === 'antigravity') return `admin.accounts.oauth.antigravity.${key}`
|
||||
return `admin.accounts.oauth.${key}`
|
||||
}
|
||||
|
||||
// Computed translations for current platform
|
||||
const oauthTitle = computed(() => t(getOAuthKey('title')))
|
||||
const oauthFollowSteps = computed(() => t(getOAuthKey('followSteps')))
|
||||
const oauthStep1GenerateUrl = computed(() => t(getOAuthKey('step1GenerateUrl')))
|
||||
const oauthGenerateAuthUrl = computed(() => t(getOAuthKey('generateAuthUrl')))
|
||||
const oauthStep2OpenUrl = computed(() => t(getOAuthKey('step2OpenUrl')))
|
||||
const oauthOpenUrlDesc = computed(() => t(getOAuthKey('openUrlDesc')))
|
||||
const oauthStep3EnterCode = computed(() => t(getOAuthKey('step3EnterCode')))
|
||||
const oauthAuthCodeDesc = computed(() => t(getOAuthKey('authCodeDesc')))
|
||||
const oauthAuthCode = computed(() => t(getOAuthKey('authCode')))
|
||||
const oauthAuthCodePlaceholder = computed(() => t(getOAuthKey('authCodePlaceholder')))
|
||||
const oauthAuthCodeHint = computed(() => t(getOAuthKey('authCodeHint')))
|
||||
const oauthImportantNotice = computed(() => {
|
||||
if (props.platform === 'openai' || props.platform === 'sora') return t('admin.accounts.oauth.openai.importantNotice')
|
||||
if (props.platform === 'antigravity') return t('admin.accounts.oauth.antigravity.importantNotice')
|
||||
return ''
|
||||
})
|
||||
|
||||
// Local state
|
||||
const inputMethod = ref<AuthInputMethod>(props.showCookieOption ? 'manual' : 'manual')
|
||||
const authCodeInput = ref('')
|
||||
const sessionKeyInput = ref('')
|
||||
const refreshTokenInput = ref('')
|
||||
const sessionTokenInput = ref('')
|
||||
const accessTokenInput = ref('')
|
||||
const showHelpDialog = ref(false)
|
||||
const oauthState = ref('')
|
||||
const projectId = ref('')
|
||||
|
||||
// Computed: show method selection when either cookie or refresh token option is enabled
|
||||
const showMethodSelection = computed(() => props.showCookieOption || props.showRefreshTokenOption || props.showSessionTokenOption || props.showAccessTokenOption)
|
||||
|
||||
// Clipboard
|
||||
const { copied, copyToClipboard } = useClipboard()
|
||||
|
||||
// Computed
|
||||
const parsedKeyCount = computed(() => {
|
||||
return sessionKeyInput.value
|
||||
.split('\n')
|
||||
.map((k) => k.trim())
|
||||
.filter((k) => k).length
|
||||
})
|
||||
|
||||
// Computed: count of refresh tokens entered
|
||||
const parsedRefreshTokenCount = computed(() => {
|
||||
return refreshTokenInput.value
|
||||
.split('\n')
|
||||
.map((rt) => rt.trim())
|
||||
.filter((rt) => rt).length
|
||||
})
|
||||
|
||||
const parsedSoraRawTokens = computed(() => parseSoraRawTokens(sessionTokenInput.value))
|
||||
|
||||
const parsedSessionTokenCount = computed(() => {
|
||||
return parsedSoraRawTokens.value.sessionTokens.length
|
||||
})
|
||||
|
||||
const parsedSessionTokensText = computed(() => {
|
||||
return parsedSoraRawTokens.value.sessionTokens.join('\n')
|
||||
})
|
||||
|
||||
const parsedAccessTokenFromSessionInputCount = computed(() => {
|
||||
return parsedSoraRawTokens.value.accessTokens.length
|
||||
})
|
||||
|
||||
const parsedAccessTokensText = computed(() => {
|
||||
return parsedSoraRawTokens.value.accessTokens.join('\n')
|
||||
})
|
||||
|
||||
const soraSessionUrl = 'https://sora.chatgpt.com/api/auth/session'
|
||||
|
||||
const parsedAccessTokenCount = computed(() => {
|
||||
return accessTokenInput.value
|
||||
.split('\n')
|
||||
.map((at) => at.trim())
|
||||
.filter((at) => at).length
|
||||
})
|
||||
|
||||
// Watchers
|
||||
watch(inputMethod, (newVal) => {
|
||||
emit('update:inputMethod', newVal)
|
||||
})
|
||||
|
||||
// Auto-extract code from callback URL (OpenAI/Gemini/Antigravity)
|
||||
// e.g., http://localhost:8085/callback?code=xxx...&state=...
|
||||
watch(authCodeInput, (newVal) => {
|
||||
if (props.platform !== 'openai' && props.platform !== 'gemini' && props.platform !== 'antigravity' && props.platform !== 'sora') return
|
||||
|
||||
const trimmed = newVal.trim()
|
||||
// Check if it looks like a URL with code parameter
|
||||
if (trimmed.includes('?') && trimmed.includes('code=')) {
|
||||
try {
|
||||
// Try to parse as URL
|
||||
const url = new URL(trimmed)
|
||||
const code = url.searchParams.get('code')
|
||||
const stateParam = url.searchParams.get('state')
|
||||
if ((props.platform === 'openai' || props.platform === 'sora' || props.platform === 'gemini' || props.platform === 'antigravity') && stateParam) {
|
||||
oauthState.value = stateParam
|
||||
}
|
||||
if (code && code !== trimmed) {
|
||||
// Replace the input with just the code
|
||||
authCodeInput.value = code
|
||||
}
|
||||
} catch {
|
||||
// If URL parsing fails, try regex extraction
|
||||
const match = trimmed.match(/[?&]code=([^&]+)/)
|
||||
const stateMatch = trimmed.match(/[?&]state=([^&]+)/)
|
||||
if ((props.platform === 'openai' || props.platform === 'sora' || props.platform === 'gemini' || props.platform === 'antigravity') && stateMatch && stateMatch[1]) {
|
||||
oauthState.value = stateMatch[1]
|
||||
}
|
||||
if (match && match[1] && match[1] !== trimmed) {
|
||||
authCodeInput.value = match[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Methods
|
||||
const handleGenerateUrl = () => {
|
||||
emit('generate-url')
|
||||
}
|
||||
|
||||
const handleCopyUrl = () => {
|
||||
if (props.authUrl) {
|
||||
copyToClipboard(props.authUrl, 'URL copied to clipboard')
|
||||
}
|
||||
}
|
||||
|
||||
const handleRegenerate = () => {
|
||||
authCodeInput.value = ''
|
||||
emit('generate-url')
|
||||
}
|
||||
|
||||
const handleCookieAuth = () => {
|
||||
if (sessionKeyInput.value.trim()) {
|
||||
emit('cookie-auth', sessionKeyInput.value)
|
||||
}
|
||||
}
|
||||
|
||||
const handleValidateRefreshToken = () => {
|
||||
if (refreshTokenInput.value.trim()) {
|
||||
emit('validate-refresh-token', refreshTokenInput.value.trim())
|
||||
}
|
||||
}
|
||||
|
||||
const handleValidateSessionToken = () => {
|
||||
if (parsedSessionTokenCount.value > 0) {
|
||||
emit('validate-session-token', parsedSessionTokensText.value)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenSoraSessionUrl = () => {
|
||||
window.open(soraSessionUrl, '_blank', 'noopener,noreferrer')
|
||||
}
|
||||
|
||||
const handleCopySoraSessionUrl = () => {
|
||||
copyToClipboard(soraSessionUrl, 'URL copied to clipboard')
|
||||
}
|
||||
|
||||
const handleImportAccessToken = () => {
|
||||
if (accessTokenInput.value.trim()) {
|
||||
emit('import-access-token', accessTokenInput.value.trim())
|
||||
}
|
||||
}
|
||||
|
||||
// Expose methods and state
|
||||
defineExpose({
|
||||
authCode: authCodeInput,
|
||||
oauthState,
|
||||
projectId,
|
||||
sessionKey: sessionKeyInput,
|
||||
refreshToken: refreshTokenInput,
|
||||
sessionToken: sessionTokenInput,
|
||||
inputMethod,
|
||||
reset: () => {
|
||||
authCodeInput.value = ''
|
||||
oauthState.value = ''
|
||||
projectId.value = ''
|
||||
sessionKeyInput.value = ''
|
||||
refreshTokenInput.value = ''
|
||||
sessionTokenInput.value = ''
|
||||
inputMethod.value = 'manual'
|
||||
showHelpDialog.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const props = defineProps<{
|
||||
used: number
|
||||
limit: number
|
||||
label?: string // 文字前缀，如 "D" / "W"；不传时显示 icon
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const badgeClass = computed(() => {
|
||||
if (props.used >= props.limit) {
|
||||
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
}
|
||||
if (props.used >= props.limit * 0.8) {
|
||||
return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
|
||||
}
|
||||
return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
})
|
||||
|
||||
const tooltip = computed(() => {
|
||||
if (props.used >= props.limit) {
|
||||
return t('admin.accounts.capacity.quota.exceeded')
|
||||
}
|
||||
return t('admin.accounts.capacity.quota.normal')
|
||||
})
|
||||
|
||||
const fmt = (v: number) => v.toFixed(2)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-1 rounded-md px-1.5 py-px text-[10px] font-medium leading-tight',
|
||||
badgeClass
|
||||
]"
|
||||
:title="tooltip"
|
||||
>
|
||||
<span v-if="label" class="font-semibold opacity-70">{{ label }}</span>
|
||||
<svg v-else class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
|
||||
</svg>
|
||||
<span class="font-mono">${{ fmt(used) }}</span>
|
||||
<span class="text-gray-400 dark:text-gray-500">/</span>
|
||||
<span class="font-mono">${{ fmt(limit) }}</span>
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,295 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
totalLimit: number | null
|
||||
dailyLimit: number | null
|
||||
weeklyLimit: number | null
|
||||
dailyResetMode: 'rolling' | 'fixed' | null
|
||||
dailyResetHour: number | null
|
||||
weeklyResetMode: 'rolling' | 'fixed' | null
|
||||
weeklyResetDay: number | null
|
||||
weeklyResetHour: number | null
|
||||
resetTimezone: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:totalLimit': [value: number | null]
|
||||
'update:dailyLimit': [value: number | null]
|
||||
'update:weeklyLimit': [value: number | null]
|
||||
'update:dailyResetMode': [value: 'rolling' | 'fixed' | null]
|
||||
'update:dailyResetHour': [value: number | null]
|
||||
'update:weeklyResetMode': [value: 'rolling' | 'fixed' | null]
|
||||
'update:weeklyResetDay': [value: number | null]
|
||||
'update:weeklyResetHour': [value: number | null]
|
||||
'update:resetTimezone': [value: string | null]
|
||||
}>()
|
||||
|
||||
const enabled = computed(() =>
|
||||
(props.totalLimit != null && props.totalLimit > 0) ||
|
||||
(props.dailyLimit != null && props.dailyLimit > 0) ||
|
||||
(props.weeklyLimit != null && props.weeklyLimit > 0)
|
||||
)
|
||||
|
||||
const localEnabled = ref(enabled.value)
|
||||
|
||||
// Sync when props change externally
|
||||
watch(enabled, (val) => {
|
||||
localEnabled.value = val
|
||||
})
|
||||
|
||||
// When toggle is turned off, clear all values
|
||||
watch(localEnabled, (val) => {
|
||||
if (!val) {
|
||||
emit('update:totalLimit', null)
|
||||
emit('update:dailyLimit', null)
|
||||
emit('update:weeklyLimit', null)
|
||||
emit('update:dailyResetMode', null)
|
||||
emit('update:dailyResetHour', null)
|
||||
emit('update:weeklyResetMode', null)
|
||||
emit('update:weeklyResetDay', null)
|
||||
emit('update:weeklyResetHour', null)
|
||||
emit('update:resetTimezone', null)
|
||||
}
|
||||
})
|
||||
|
||||
// Whether any fixed mode is active (to show timezone selector)
|
||||
const hasFixedMode = computed(() =>
|
||||
props.dailyResetMode === 'fixed' || props.weeklyResetMode === 'fixed'
|
||||
)
|
||||
|
||||
// Common timezone options
|
||||
const timezoneOptions = [
|
||||
'UTC',
|
||||
'Asia/Shanghai',
|
||||
'Asia/Tokyo',
|
||||
'Asia/Seoul',
|
||||
'Asia/Singapore',
|
||||
'Asia/Kolkata',
|
||||
'Asia/Dubai',
|
||||
'Europe/London',
|
||||
'Europe/Paris',
|
||||
'Europe/Berlin',
|
||||
'Europe/Moscow',
|
||||
'America/New_York',
|
||||
'America/Chicago',
|
||||
'America/Denver',
|
||||
'America/Los_Angeles',
|
||||
'America/Sao_Paulo',
|
||||
'Australia/Sydney',
|
||||
'Pacific/Auckland',
|
||||
]
|
||||
|
||||
// Hours for dropdown (0-23)
|
||||
const hourOptions = Array.from({ length: 24 }, (_, i) => i)
|
||||
|
||||
// Day of week options
|
||||
const dayOptions = [
|
||||
{ value: 1, key: 'monday' },
|
||||
{ value: 2, key: 'tuesday' },
|
||||
{ value: 3, key: 'wednesday' },
|
||||
{ value: 4, key: 'thursday' },
|
||||
{ value: 5, key: 'friday' },
|
||||
{ value: 6, key: 'saturday' },
|
||||
{ value: 0, key: 'sunday' },
|
||||
]
|
||||
|
||||
const onTotalInput = (e: Event) => {
|
||||
const raw = (e.target as HTMLInputElement).valueAsNumber
|
||||
emit('update:totalLimit', Number.isNaN(raw) ? null : raw)
|
||||
}
|
||||
const onDailyInput = (e: Event) => {
|
||||
const raw = (e.target as HTMLInputElement).valueAsNumber
|
||||
emit('update:dailyLimit', Number.isNaN(raw) ? null : raw)
|
||||
}
|
||||
const onWeeklyInput = (e: Event) => {
|
||||
const raw = (e.target as HTMLInputElement).valueAsNumber
|
||||
emit('update:weeklyLimit', Number.isNaN(raw) ? null : raw)
|
||||
}
|
||||
|
||||
const onDailyModeChange = (e: Event) => {
|
||||
const val = (e.target as HTMLSelectElement).value as 'rolling' | 'fixed'
|
||||
emit('update:dailyResetMode', val)
|
||||
if (val === 'fixed') {
|
||||
if (props.dailyResetHour == null) emit('update:dailyResetHour', 0)
|
||||
if (!props.resetTimezone) emit('update:resetTimezone', 'UTC')
|
||||
}
|
||||
}
|
||||
|
||||
const onWeeklyModeChange = (e: Event) => {
|
||||
const val = (e.target as HTMLSelectElement).value as 'rolling' | 'fixed'
|
||||
emit('update:weeklyResetMode', val)
|
||||
if (val === 'fixed') {
|
||||
if (props.weeklyResetDay == null) emit('update:weeklyResetDay', 1)
|
||||
if (props.weeklyResetHour == null) emit('update:weeklyResetHour', 0)
|
||||
if (!props.resetTimezone) emit('update:resetTimezone', 'UTC')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-lg border border-gray-200 p-4 dark:border-dark-600">
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<div>
|
||||
<label class="input-label mb-0">{{ t('admin.accounts.quotaLimitToggle') }}</label>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.quotaLimitToggleHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@click="localEnabled = !localEnabled"
|
||||
:class="[
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
|
||||
localEnabled ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
localEnabled ? 'translate-x-5' : 'translate-x-0'
|
||||
]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="localEnabled" class="space-y-3">
|
||||
<!-- 日配额 -->
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.accounts.quotaDailyLimit') }}</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
|
||||
<input
|
||||
:value="dailyLimit"
|
||||
@input="onDailyInput"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
class="input pl-7"
|
||||
:placeholder="t('admin.accounts.quotaLimitPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<!-- 日配额重置模式 -->
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetMode') }}</label>
|
||||
<select
|
||||
:value="dailyResetMode || 'rolling'"
|
||||
@change="onDailyModeChange"
|
||||
class="input py-1 text-xs"
|
||||
>
|
||||
<option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option>
|
||||
<option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 固定模式：小时选择 -->
|
||||
<div v-if="dailyResetMode === 'fixed'" class="mt-2 flex items-center gap-2">
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label>
|
||||
<select
|
||||
:value="dailyResetHour ?? 0"
|
||||
@change="emit('update:dailyResetHour', Number(($event.target as HTMLSelectElement).value))"
|
||||
class="input py-1 text-xs w-24"
|
||||
>
|
||||
<option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="input-hint">
|
||||
<template v-if="dailyResetMode === 'fixed'">
|
||||
{{ t('admin.accounts.quotaDailyLimitHintFixed', { hour: String(dailyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('admin.accounts.quotaDailyLimitHint') }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 周配额 -->
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.accounts.quotaWeeklyLimit') }}</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
|
||||
<input
|
||||
:value="weeklyLimit"
|
||||
@input="onWeeklyInput"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
class="input pl-7"
|
||||
:placeholder="t('admin.accounts.quotaLimitPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<!-- 周配额重置模式 -->
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetMode') }}</label>
|
||||
<select
|
||||
:value="weeklyResetMode || 'rolling'"
|
||||
@change="onWeeklyModeChange"
|
||||
class="input py-1 text-xs"
|
||||
>
|
||||
<option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option>
|
||||
<option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 固定模式：星期几 + 小时 -->
|
||||
<div v-if="weeklyResetMode === 'fixed'" class="mt-2 flex items-center gap-2 flex-wrap">
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaWeeklyResetDay') }}</label>
|
||||
<select
|
||||
:value="weeklyResetDay ?? 1"
|
||||
@change="emit('update:weeklyResetDay', Number(($event.target as HTMLSelectElement).value))"
|
||||
class="input py-1 text-xs w-28"
|
||||
>
|
||||
<option v-for="d in dayOptions" :key="d.value" :value="d.value">{{ t('admin.accounts.dayOfWeek.' + d.key) }}</option>
|
||||
</select>
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label>
|
||||
<select
|
||||
:value="weeklyResetHour ?? 0"
|
||||
@change="emit('update:weeklyResetHour', Number(($event.target as HTMLSelectElement).value))"
|
||||
class="input py-1 text-xs w-24"
|
||||
>
|
||||
<option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="input-hint">
|
||||
<template v-if="weeklyResetMode === 'fixed'">
|
||||
{{ t('admin.accounts.quotaWeeklyLimitHintFixed', { day: t('admin.accounts.dayOfWeek.' + (dayOptions.find(d => d.value === (weeklyResetDay ?? 1))?.key || 'monday')), hour: String(weeklyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ t('admin.accounts.quotaWeeklyLimitHint') }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 时区选择（当任一维度使用固定模式时显示） -->
|
||||
<div v-if="hasFixedMode">
|
||||
<label class="input-label">{{ t('admin.accounts.quotaResetTimezone') }}</label>
|
||||
<select
|
||||
:value="resetTimezone || 'UTC'"
|
||||
@change="emit('update:resetTimezone', ($event.target as HTMLSelectElement).value)"
|
||||
class="input text-sm"
|
||||
>
|
||||
<option v-for="tz in timezoneOptions" :key="tz" :value="tz">{{ tz }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 总配额 -->
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.accounts.quotaTotalLimit') }}</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
|
||||
<input
|
||||
:value="totalLimit"
|
||||
@input="onTotalInput"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
class="input pl-7"
|
||||
:placeholder="t('admin.accounts.quotaLimitPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<p class="input-hint">{{ t('admin.accounts.quotaTotalLimitHint') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,548 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.reAuthorizeAccount')"
|
||||
width="normal"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div v-if="account" class="space-y-4">
|
||||
<!-- Account Info -->
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
:class="[
|
||||
'flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br',
|
||||
isOpenAILike
|
||||
? 'from-green-500 to-green-600'
|
||||
: isGemini
|
||||
? 'from-blue-500 to-blue-600'
|
||||
: isAntigravity
|
||||
? 'from-purple-500 to-purple-600'
|
||||
: 'from-orange-500 to-orange-600'
|
||||
]"
|
||||
>
|
||||
<Icon name="sparkles" size="md" class="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="block font-semibold text-gray-900 dark:text-white">{{
|
||||
account.name
|
||||
}}</span>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{
|
||||
isOpenAI
|
||||
? t('admin.accounts.openaiAccount')
|
||||
: isSora
|
||||
? t('admin.accounts.soraAccount')
|
||||
: isGemini
|
||||
? t('admin.accounts.geminiAccount')
|
||||
: isAntigravity
|
||||
? t('admin.accounts.antigravityAccount')
|
||||
: t('admin.accounts.claudeCodeAccount')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Method Selection (Claude only) -->
|
||||
<fieldset v-if="isAnthropic" class="border-0 p-0">
|
||||
<legend class="input-label">{{ t('admin.accounts.oauth.authMethod') }}</legend>
|
||||
<div class="mt-2 flex gap-4">
|
||||
<label class="flex cursor-pointer items-center">
|
||||
<input
|
||||
v-model="addMethod"
|
||||
type="radio"
|
||||
value="oauth"
|
||||
class="mr-2 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{
|
||||
t('admin.accounts.types.oauth')
|
||||
}}</span>
|
||||
</label>
|
||||
<label class="flex cursor-pointer items-center">
|
||||
<input
|
||||
v-model="addMethod"
|
||||
type="radio"
|
||||
value="setup-token"
|
||||
class="mr-2 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{
|
||||
t('admin.accounts.setupTokenLongLived')
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Gemini OAuth Type Display (read-only) -->
|
||||
<div v-if="isGemini" class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700">
|
||||
<div class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.accounts.oauth.gemini.oauthTypeLabel') }}
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
:class="[
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
|
||||
geminiOAuthType === 'google_one'
|
||||
? 'bg-purple-500 text-white'
|
||||
: geminiOAuthType === 'code_assist'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-amber-500 text-white'
|
||||
]"
|
||||
>
|
||||
<Icon v-if="geminiOAuthType === 'google_one'" name="user" size="sm" />
|
||||
<Icon v-else-if="geminiOAuthType === 'code_assist'" name="cloud" size="sm" />
|
||||
<Icon v-else name="sparkles" size="sm" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{
|
||||
geminiOAuthType === 'google_one'
|
||||
? 'Google One'
|
||||
: geminiOAuthType === 'code_assist'
|
||||
? t('admin.accounts.gemini.oauthType.builtInTitle')
|
||||
: t('admin.accounts.gemini.oauthType.customTitle')
|
||||
}}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{
|
||||
geminiOAuthType === 'google_one'
|
||||
? '个人账号'
|
||||
: geminiOAuthType === 'code_assist'
|
||||
? t('admin.accounts.gemini.oauthType.builtInDesc')
|
||||
: t('admin.accounts.gemini.oauthType.customDesc')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OAuthAuthorizationFlow
|
||||
ref="oauthFlowRef"
|
||||
:add-method="addMethod"
|
||||
:auth-url="currentAuthUrl"
|
||||
:session-id="currentSessionId"
|
||||
:loading="currentLoading"
|
||||
:error="currentError"
|
||||
:show-help="isAnthropic"
|
||||
:show-proxy-warning="isAnthropic"
|
||||
:show-cookie-option="isAnthropic"
|
||||
:allow-multiple="false"
|
||||
:method-label="t('admin.accounts.inputMethod')"
|
||||
:platform="isOpenAI ? 'openai' : isSora ? 'sora' : isGemini ? 'gemini' : isAntigravity ? 'antigravity' : 'anthropic'"
|
||||
:show-project-id="isGemini && geminiOAuthType === 'code_assist'"
|
||||
@generate-url="handleGenerateUrl"
|
||||
@cookie-auth="handleCookieAuth"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div v-if="account" class="flex justify-between gap-3">
|
||||
<button type="button" class="btn btn-secondary" @click="handleClose">
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="isManualInputMethod"
|
||||
type="button"
|
||||
:disabled="!canExchangeCode"
|
||||
class="btn btn-primary"
|
||||
@click="handleExchangeCode"
|
||||
>
|
||||
<svg
|
||||
v-if="currentLoading"
|
||||
class="-ml-1 mr-2 h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{{
|
||||
currentLoading
|
||||
? t('admin.accounts.oauth.verifying')
|
||||
: t('admin.accounts.oauth.completeAuth')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import {
|
||||
useAccountOAuth,
|
||||
type AddMethod,
|
||||
type AuthInputMethod
|
||||
} from '@/composables/useAccountOAuth'
|
||||
import { useOpenAIOAuth } from '@/composables/useOpenAIOAuth'
|
||||
import { useGeminiOAuth } from '@/composables/useGeminiOAuth'
|
||||
import { useAntigravityOAuth } from '@/composables/useAntigravityOAuth'
|
||||
import type { Account } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import OAuthAuthorizationFlow from './OAuthAuthorizationFlow.vue'
|
||||
|
||||
// Type for exposed OAuthAuthorizationFlow component
|
||||
// Note: defineExpose automatically unwraps refs, so we use the unwrapped types
|
||||
interface OAuthFlowExposed {
|
||||
authCode: string
|
||||
oauthState: string
|
||||
projectId: string
|
||||
sessionKey: string
|
||||
inputMethod: AuthInputMethod
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
account: Account | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
reauthorized: []
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
// OAuth composables
|
||||
const claudeOAuth = useAccountOAuth()
|
||||
const openaiOAuth = useOpenAIOAuth({ platform: 'openai' })
|
||||
const soraOAuth = useOpenAIOAuth({ platform: 'sora' })
|
||||
const geminiOAuth = useGeminiOAuth()
|
||||
const antigravityOAuth = useAntigravityOAuth()
|
||||
|
||||
// Refs
|
||||
const oauthFlowRef = ref<OAuthFlowExposed | null>(null)
|
||||
|
||||
// State
|
||||
const addMethod = ref<AddMethod>('oauth')
|
||||
const geminiOAuthType = ref<'code_assist' | 'google_one' | 'ai_studio'>('code_assist')
|
||||
|
||||
// Computed - check platform
|
||||
const isOpenAI = computed(() => props.account?.platform === 'openai')
|
||||
const isSora = computed(() => props.account?.platform === 'sora')
|
||||
const isOpenAILike = computed(() => isOpenAI.value || isSora.value)
|
||||
const isGemini = computed(() => props.account?.platform === 'gemini')
|
||||
const isAnthropic = computed(() => props.account?.platform === 'anthropic')
|
||||
const isAntigravity = computed(() => props.account?.platform === 'antigravity')
|
||||
const activeOpenAIOAuth = computed(() => (isSora.value ? soraOAuth : openaiOAuth))
|
||||
|
||||
// Computed - current OAuth state based on platform
|
||||
const currentAuthUrl = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.authUrl.value
|
||||
if (isGemini.value) return geminiOAuth.authUrl.value
|
||||
if (isAntigravity.value) return antigravityOAuth.authUrl.value
|
||||
return claudeOAuth.authUrl.value
|
||||
})
|
||||
const currentSessionId = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.sessionId.value
|
||||
if (isGemini.value) return geminiOAuth.sessionId.value
|
||||
if (isAntigravity.value) return antigravityOAuth.sessionId.value
|
||||
return claudeOAuth.sessionId.value
|
||||
})
|
||||
const currentLoading = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.loading.value
|
||||
if (isGemini.value) return geminiOAuth.loading.value
|
||||
if (isAntigravity.value) return antigravityOAuth.loading.value
|
||||
return claudeOAuth.loading.value
|
||||
})
|
||||
const currentError = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.error.value
|
||||
if (isGemini.value) return geminiOAuth.error.value
|
||||
if (isAntigravity.value) return antigravityOAuth.error.value
|
||||
return claudeOAuth.error.value
|
||||
})
|
||||
|
||||
// Computed
|
||||
const isManualInputMethod = computed(() => {
|
||||
// OpenAI/Sora/Gemini/Antigravity always use manual input (no cookie auth option)
|
||||
return isOpenAILike.value || isGemini.value || isAntigravity.value || oauthFlowRef.value?.inputMethod === 'manual'
|
||||
})
|
||||
|
||||
const canExchangeCode = computed(() => {
|
||||
const authCode = oauthFlowRef.value?.authCode || ''
|
||||
const sessionId = currentSessionId.value
|
||||
const loading = currentLoading.value
|
||||
return authCode.trim() && sessionId && !loading
|
||||
})
|
||||
|
||||
// Watchers
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
if (newVal && props.account) {
|
||||
// Initialize addMethod based on current account type (Claude only)
|
||||
if (
|
||||
isAnthropic.value &&
|
||||
(props.account.type === 'oauth' || props.account.type === 'setup-token')
|
||||
) {
|
||||
addMethod.value = props.account.type as AddMethod
|
||||
}
|
||||
if (isGemini.value) {
|
||||
const creds = (props.account.credentials || {}) as Record<string, unknown>
|
||||
geminiOAuthType.value =
|
||||
creds.oauth_type === 'google_one'
|
||||
? 'google_one'
|
||||
: creds.oauth_type === 'ai_studio'
|
||||
? 'ai_studio'
|
||||
: 'code_assist'
|
||||
}
|
||||
} else {
|
||||
resetState()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// Methods
|
||||
const resetState = () => {
|
||||
addMethod.value = 'oauth'
|
||||
geminiOAuthType.value = 'code_assist'
|
||||
claudeOAuth.resetState()
|
||||
openaiOAuth.resetState()
|
||||
soraOAuth.resetState()
|
||||
geminiOAuth.resetState()
|
||||
antigravityOAuth.resetState()
|
||||
oauthFlowRef.value?.reset()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleGenerateUrl = async () => {
|
||||
if (!props.account) return
|
||||
|
||||
if (isOpenAILike.value) {
|
||||
await activeOpenAIOAuth.value.generateAuthUrl(props.account.proxy_id)
|
||||
} else if (isGemini.value) {
|
||||
const creds = (props.account.credentials || {}) as Record<string, unknown>
|
||||
const tierId = typeof creds.tier_id === 'string' ? creds.tier_id : undefined
|
||||
const projectId = geminiOAuthType.value === 'code_assist' ? oauthFlowRef.value?.projectId : undefined
|
||||
await geminiOAuth.generateAuthUrl(props.account.proxy_id, projectId, geminiOAuthType.value, tierId)
|
||||
} else if (isAntigravity.value) {
|
||||
await antigravityOAuth.generateAuthUrl(props.account.proxy_id)
|
||||
} else {
|
||||
await claudeOAuth.generateAuthUrl(addMethod.value, props.account.proxy_id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleExchangeCode = async () => {
|
||||
if (!props.account) return
|
||||
|
||||
const authCode = oauthFlowRef.value?.authCode || ''
|
||||
if (!authCode.trim()) return
|
||||
|
||||
if (isOpenAILike.value) {
|
||||
// OpenAI OAuth flow
|
||||
const oauthClient = activeOpenAIOAuth.value
|
||||
const sessionId = oauthClient.sessionId.value
|
||||
if (!sessionId) return
|
||||
const stateToUse = (oauthFlowRef.value?.oauthState || oauthClient.oauthState.value || '').trim()
|
||||
if (!stateToUse) {
|
||||
oauthClient.error.value = t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(oauthClient.error.value)
|
||||
return
|
||||
}
|
||||
|
||||
const tokenInfo = await oauthClient.exchangeAuthCode(
|
||||
authCode.trim(),
|
||||
sessionId,
|
||||
stateToUse,
|
||||
props.account.proxy_id
|
||||
)
|
||||
if (!tokenInfo) return
|
||||
|
||||
// Build credentials and extra info
|
||||
const credentials = oauthClient.buildCredentials(tokenInfo)
|
||||
const extra = oauthClient.buildExtraInfo(tokenInfo)
|
||||
|
||||
try {
|
||||
// Update account with new credentials
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: 'oauth', // OpenAI OAuth is always 'oauth' type
|
||||
credentials,
|
||||
extra
|
||||
})
|
||||
|
||||
// Clear error status after successful re-authorization
|
||||
await adminAPI.accounts.clearError(props.account.id)
|
||||
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized')
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
oauthClient.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(oauthClient.error.value)
|
||||
}
|
||||
} else if (isGemini.value) {
|
||||
const sessionId = geminiOAuth.sessionId.value
|
||||
if (!sessionId) return
|
||||
|
||||
const stateFromInput = oauthFlowRef.value?.oauthState || ''
|
||||
const stateToUse = stateFromInput || geminiOAuth.state.value
|
||||
if (!stateToUse) return
|
||||
|
||||
const tokenInfo = await geminiOAuth.exchangeAuthCode({
|
||||
code: authCode.trim(),
|
||||
sessionId,
|
||||
state: stateToUse,
|
||||
proxyId: props.account.proxy_id,
|
||||
oauthType: geminiOAuthType.value,
|
||||
tierId: typeof (props.account.credentials as any)?.tier_id === 'string' ? ((props.account.credentials as any).tier_id as string) : undefined
|
||||
})
|
||||
if (!tokenInfo) return
|
||||
|
||||
const credentials = geminiOAuth.buildCredentials(tokenInfo)
|
||||
|
||||
try {
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: 'oauth',
|
||||
credentials
|
||||
})
|
||||
await adminAPI.accounts.clearError(props.account.id)
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized')
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
geminiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(geminiOAuth.error.value)
|
||||
}
|
||||
} else if (isAntigravity.value) {
|
||||
// Antigravity OAuth flow
|
||||
const sessionId = antigravityOAuth.sessionId.value
|
||||
if (!sessionId) return
|
||||
|
||||
const stateFromInput = oauthFlowRef.value?.oauthState || ''
|
||||
const stateToUse = stateFromInput || antigravityOAuth.state.value
|
||||
if (!stateToUse) return
|
||||
|
||||
const tokenInfo = await antigravityOAuth.exchangeAuthCode({
|
||||
code: authCode.trim(),
|
||||
sessionId,
|
||||
state: stateToUse,
|
||||
proxyId: props.account.proxy_id
|
||||
})
|
||||
if (!tokenInfo) return
|
||||
|
||||
const credentials = antigravityOAuth.buildCredentials(tokenInfo)
|
||||
|
||||
try {
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: 'oauth',
|
||||
credentials
|
||||
})
|
||||
await adminAPI.accounts.clearError(props.account.id)
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized')
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
antigravityOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(antigravityOAuth.error.value)
|
||||
}
|
||||
} else {
|
||||
// Claude OAuth flow
|
||||
const sessionId = claudeOAuth.sessionId.value
|
||||
if (!sessionId) return
|
||||
|
||||
claudeOAuth.loading.value = true
|
||||
claudeOAuth.error.value = ''
|
||||
|
||||
try {
|
||||
const proxyConfig = props.account.proxy_id ? { proxy_id: props.account.proxy_id } : {}
|
||||
const endpoint =
|
||||
addMethod.value === 'oauth'
|
||||
? '/admin/accounts/exchange-code'
|
||||
: '/admin/accounts/exchange-setup-token-code'
|
||||
|
||||
const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, {
|
||||
session_id: sessionId,
|
||||
code: authCode.trim(),
|
||||
...proxyConfig
|
||||
})
|
||||
|
||||
const extra = claudeOAuth.buildExtraInfo(tokenInfo)
|
||||
|
||||
// Update account with new credentials and type
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: addMethod.value, // Update type based on selected method
|
||||
credentials: tokenInfo,
|
||||
extra
|
||||
})
|
||||
|
||||
// Clear error status after successful re-authorization
|
||||
await adminAPI.accounts.clearError(props.account.id)
|
||||
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized')
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
claudeOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(claudeOAuth.error.value)
|
||||
} finally {
|
||||
claudeOAuth.loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleCookieAuth = async (sessionKey: string) => {
|
||||
if (!props.account || isOpenAILike.value) return
|
||||
|
||||
claudeOAuth.loading.value = true
|
||||
claudeOAuth.error.value = ''
|
||||
|
||||
try {
|
||||
const proxyConfig = props.account.proxy_id ? { proxy_id: props.account.proxy_id } : {}
|
||||
const endpoint =
|
||||
addMethod.value === 'oauth'
|
||||
? '/admin/accounts/cookie-auth'
|
||||
: '/admin/accounts/setup-token-cookie-auth'
|
||||
|
||||
const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, {
|
||||
session_id: '',
|
||||
code: sessionKey.trim(),
|
||||
...proxyConfig
|
||||
})
|
||||
|
||||
const extra = claudeOAuth.buildExtraInfo(tokenInfo)
|
||||
|
||||
// Update account with new credentials and type
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: addMethod.value, // Update type based on selected method
|
||||
credentials: tokenInfo,
|
||||
extra
|
||||
})
|
||||
|
||||
// Clear error status after successful re-authorization
|
||||
await adminAPI.accounts.clearError(props.account.id)
|
||||
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized')
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
claudeOAuth.error.value =
|
||||
error.response?.data?.detail || t('admin.accounts.oauth.cookieAuthFailed')
|
||||
} finally {
|
||||
claudeOAuth.loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.syncFromCrsTitle')"
|
||||
width="normal"
|
||||
close-on-click-outside
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- Step 1: Input credentials -->
|
||||
<form
|
||||
v-if="currentStep === 'input'"
|
||||
id="sync-from-crs-form"
|
||||
class="space-y-4"
|
||||
@submit.prevent="handlePreview"
|
||||
>
|
||||
<div class="text-sm text-gray-600 dark:text-dark-300">
|
||||
{{ t('admin.accounts.syncFromCrsDesc') }}
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg bg-gray-50 p-3 text-xs text-gray-500 dark:bg-dark-700/60 dark:text-dark-400"
|
||||
>
|
||||
{{ t('admin.accounts.crsUpdateBehaviorNote') }}
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-600 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-400"
|
||||
>
|
||||
{{ t('admin.accounts.crsVersionRequirement') }}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label for="crs-base-url" class="input-label">{{ t('admin.accounts.crsBaseUrl') }}</label>
|
||||
<input
|
||||
id="crs-base-url"
|
||||
v-model="form.base_url"
|
||||
type="text"
|
||||
class="input"
|
||||
required
|
||||
:placeholder="t('admin.accounts.crsBaseUrlPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="crs-username" class="input-label">{{ t('admin.accounts.crsUsername') }}</label>
|
||||
<input id="crs-username" v-model="form.username" type="text" class="input" required autocomplete="username" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="crs-password" class="input-label">{{ t('admin.accounts.crsPassword') }}</label>
|
||||
<input
|
||||
id="crs-password"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
class="input"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-dark-300">
|
||||
<input
|
||||
v-model="form.sync_proxies"
|
||||
type="checkbox"
|
||||
class="rounded border-gray-300 dark:border-dark-600"
|
||||
/>
|
||||
{{ t('admin.accounts.syncProxies') }}
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Step 2: Preview & select -->
|
||||
<div v-else-if="currentStep === 'preview' && previewResult" class="space-y-4">
|
||||
<!-- Existing accounts (read-only info) -->
|
||||
<div
|
||||
v-if="previewResult.existing_accounts.length"
|
||||
class="rounded-lg bg-gray-50 p-3 dark:bg-dark-700/60"
|
||||
>
|
||||
<div class="mb-2 text-sm font-medium text-gray-700 dark:text-dark-300">
|
||||
{{ t('admin.accounts.crsExistingAccounts') }}
|
||||
<span class="ml-1 text-xs text-gray-400">({{ previewResult.existing_accounts.length }})</span>
|
||||
</div>
|
||||
<div class="max-h-32 overflow-auto text-xs text-gray-500 dark:text-dark-400">
|
||||
<div
|
||||
v-for="acc in previewResult.existing_accounts"
|
||||
:key="acc.crs_account_id"
|
||||
class="flex items-center gap-2 py-0.5"
|
||||
>
|
||||
<span
|
||||
class="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
|
||||
>{{ acc.platform }} / {{ acc.type }}</span>
|
||||
<span class="truncate">{{ acc.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New accounts (selectable) -->
|
||||
<div v-if="previewResult.new_accounts.length">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.accounts.crsNewAccounts') }}
|
||||
<span class="ml-1 text-xs text-gray-400">({{ previewResult.new_accounts.length }})</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400"
|
||||
@click="selectAll"
|
||||
>{{ t('admin.accounts.crsSelectAll') }}</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-gray-500 hover:text-gray-600 dark:text-gray-400"
|
||||
@click="selectNone"
|
||||
>{{ t('admin.accounts.crsSelectNone') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="max-h-48 overflow-auto rounded-lg border border-gray-200 p-2 dark:border-dark-600"
|
||||
>
|
||||
<label
|
||||
v-for="acc in previewResult.new_accounts"
|
||||
:key="acc.crs_account_id"
|
||||
class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-dark-700/40"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedIds.has(acc.crs_account_id)"
|
||||
class="rounded border-gray-300 dark:border-dark-600"
|
||||
@change="toggleSelect(acc.crs_account_id)"
|
||||
/>
|
||||
<span
|
||||
class="inline-block rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400"
|
||||
>{{ acc.platform }} / {{ acc.type }}</span>
|
||||
<span class="truncate text-sm text-gray-700 dark:text-dark-300">{{ acc.name }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-gray-400">
|
||||
{{ t('admin.accounts.crsSelectedCount', { count: selectedIds.size }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sync options summary -->
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-dark-400">
|
||||
<span>{{ t('admin.accounts.syncProxies') }}:</span>
|
||||
<span :class="form.sync_proxies ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-dark-500'">
|
||||
{{ form.sync_proxies ? t('common.yes') : t('common.no') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- No new accounts -->
|
||||
<div
|
||||
v-if="!previewResult.new_accounts.length"
|
||||
class="rounded-lg bg-gray-50 p-4 text-center text-sm text-gray-500 dark:bg-dark-700/60 dark:text-dark-400"
|
||||
>
|
||||
{{ t('admin.accounts.crsNoNewAccounts') }}
|
||||
<span v-if="previewResult.existing_accounts.length">
|
||||
{{ t('admin.accounts.crsWillUpdate', { count: previewResult.existing_accounts.length }) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Result -->
|
||||
<div v-else-if="currentStep === 'result' && result" class="space-y-4">
|
||||
<div
|
||||
class="space-y-2 rounded-xl border border-gray-200 p-4 dark:border-dark-700"
|
||||
>
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.accounts.syncResult') }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 dark:text-dark-300">
|
||||
{{ t('admin.accounts.syncResultSummary', result) }}
|
||||
</div>
|
||||
|
||||
<div v-if="errorItems.length" class="mt-2">
|
||||
<div class="text-sm font-medium text-red-600 dark:text-red-400">
|
||||
{{ t('admin.accounts.syncErrors') }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-2 max-h-48 overflow-auto rounded-lg bg-gray-50 p-3 font-mono text-xs dark:bg-dark-800"
|
||||
>
|
||||
<div v-for="(item, idx) in errorItems" :key="idx" class="whitespace-pre-wrap">
|
||||
{{ item.kind }} {{ item.crs_account_id }} — {{ item.action
|
||||
}}{{ item.error ? `: ${item.error}` : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<!-- Step 1: Input -->
|
||||
<template v-if="currentStep === 'input'">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
type="button"
|
||||
:disabled="previewing"
|
||||
@click="handleClose"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
form="sync-from-crs-form"
|
||||
:disabled="previewing"
|
||||
>
|
||||
{{ previewing ? t('admin.accounts.crsPreviewing') : t('admin.accounts.crsPreview') }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Step 2: Preview -->
|
||||
<template v-else-if="currentStep === 'preview'">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
type="button"
|
||||
:disabled="syncing"
|
||||
@click="handleBack"
|
||||
>
|
||||
{{ t('admin.accounts.crsBack') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="button"
|
||||
:disabled="syncing || hasNewButNoneSelected"
|
||||
@click="handleSync"
|
||||
>
|
||||
{{ syncing ? t('admin.accounts.syncing') : t('admin.accounts.syncNow') }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Step 3: Result -->
|
||||
<template v-else-if="currentStep === 'result'">
|
||||
<button class="btn btn-secondary" type="button" @click="handleClose">
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { PreviewFromCRSResult } from '@/api/admin/accounts'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
(e: 'synced'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
type Step = 'input' | 'preview' | 'result'
|
||||
const currentStep = ref<Step>('input')
|
||||
const previewing = ref(false)
|
||||
const syncing = ref(false)
|
||||
const previewResult = ref<PreviewFromCRSResult | null>(null)
|
||||
const selectedIds = ref(new Set<string>())
|
||||
const result = ref<Awaited<ReturnType<typeof adminAPI.accounts.syncFromCrs>> | null>(null)
|
||||
|
||||
const form = reactive({
|
||||
base_url: '',
|
||||
username: '',
|
||||
password: '',
|
||||
sync_proxies: true
|
||||
})
|
||||
|
||||
const hasNewButNoneSelected = computed(() => {
|
||||
if (!previewResult.value) return false
|
||||
return previewResult.value.new_accounts.length > 0 && selectedIds.value.size === 0
|
||||
})
|
||||
|
||||
const errorItems = computed(() => {
|
||||
if (!result.value?.items) return []
|
||||
return result.value.items.filter(
|
||||
(i) => i.action === 'failed' || (i.action === 'skipped' && i.error !== 'not selected')
|
||||
)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(open) => {
|
||||
if (open) {
|
||||
currentStep.value = 'input'
|
||||
previewResult.value = null
|
||||
selectedIds.value = new Set()
|
||||
result.value = null
|
||||
form.base_url = ''
|
||||
form.username = ''
|
||||
form.password = ''
|
||||
form.sync_proxies = true
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const handleClose = () => {
|
||||
if (syncing.value || previewing.value) {
|
||||
return
|
||||
}
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
currentStep.value = 'input'
|
||||
previewResult.value = null
|
||||
selectedIds.value = new Set()
|
||||
}
|
||||
|
||||
const selectAll = () => {
|
||||
if (!previewResult.value) return
|
||||
selectedIds.value = new Set(previewResult.value.new_accounts.map((a) => a.crs_account_id))
|
||||
}
|
||||
|
||||
const selectNone = () => {
|
||||
selectedIds.value = new Set()
|
||||
}
|
||||
|
||||
const toggleSelect = (id: string) => {
|
||||
const s = new Set(selectedIds.value)
|
||||
if (s.has(id)) {
|
||||
s.delete(id)
|
||||
} else {
|
||||
s.add(id)
|
||||
}
|
||||
selectedIds.value = s
|
||||
}
|
||||
|
||||
const handlePreview = async () => {
|
||||
if (!form.base_url.trim() || !form.username.trim() || !form.password.trim()) {
|
||||
appStore.showError(t('admin.accounts.syncMissingFields'))
|
||||
return
|
||||
}
|
||||
|
||||
previewing.value = true
|
||||
try {
|
||||
const res = await adminAPI.accounts.previewFromCrs({
|
||||
base_url: form.base_url.trim(),
|
||||
username: form.username.trim(),
|
||||
password: form.password
|
||||
})
|
||||
previewResult.value = res
|
||||
// Auto-select all new accounts
|
||||
selectedIds.value = new Set(res.new_accounts.map((a) => a.crs_account_id))
|
||||
currentStep.value = 'preview'
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || t('admin.accounts.crsPreviewFailed'))
|
||||
} finally {
|
||||
previewing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSync = async () => {
|
||||
if (!form.base_url.trim() || !form.username.trim() || !form.password.trim()) {
|
||||
appStore.showError(t('admin.accounts.syncMissingFields'))
|
||||
return
|
||||
}
|
||||
|
||||
syncing.value = true
|
||||
try {
|
||||
const res = await adminAPI.accounts.syncFromCrs({
|
||||
base_url: form.base_url.trim(),
|
||||
username: form.username.trim(),
|
||||
password: form.password,
|
||||
sync_proxies: form.sync_proxies,
|
||||
selected_account_ids: [...selectedIds.value]
|
||||
})
|
||||
result.value = res
|
||||
currentStep.value = 'result'
|
||||
|
||||
if (res.failed > 0) {
|
||||
appStore.showError(t('admin.accounts.syncCompletedWithErrors', res))
|
||||
} else {
|
||||
appStore.showSuccess(t('admin.accounts.syncCompleted', res))
|
||||
}
|
||||
emit('synced')
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || t('admin.accounts.syncFailed'))
|
||||
} finally {
|
||||
syncing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.tempUnschedulable.statusTitle')"
|
||||
width="normal"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<div v-if="loading" class="flex items-center justify-center py-8">
|
||||
<svg class="h-6 w-6 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!isActive" class="rounded-lg border border-gray-200 p-4 text-sm text-gray-500 dark:border-dark-600 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.notActive') }}
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<div class="rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300">
|
||||
{{ t('admin.accounts.recoverStateHint') }}
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 p-4 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.accountName') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ account?.name || '-' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.triggeredAt') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ triggeredAtText }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.until') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ untilText }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.remaining') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ remainingText }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.errorCode') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ state?.status_code || '-' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.matchedKeyword') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ state?.matched_keyword || '-' }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.ruleOrder') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ ruleIndexDisplay }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.tempUnschedulable.errorMessage') }}
|
||||
</p>
|
||||
<div class="mt-2 rounded bg-gray-50 p-2 text-xs text-gray-700 dark:bg-dark-700 dark:text-gray-300">
|
||||
{{ state?.error_message || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button type="button" class="btn btn-secondary" @click="handleClose">
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
:disabled="!isActive || resetting"
|
||||
@click="handleReset"
|
||||
>
|
||||
<svg
|
||||
v-if="resetting"
|
||||
class="-ml-1 mr-2 h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{{ t('admin.accounts.recoverState') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { Account, TempUnschedulableStatus } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
account: Account | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
reset: [account: Account]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const loading = ref(false)
|
||||
const resetting = ref(false)
|
||||
const status = ref<TempUnschedulableStatus | null>(null)
|
||||
|
||||
const state = computed(() => status.value?.state || null)
|
||||
|
||||
const isActive = computed(() => {
|
||||
if (!status.value?.active || !state.value) return false
|
||||
return state.value.until_unix * 1000 > Date.now()
|
||||
})
|
||||
|
||||
const ruleIndexDisplay = computed(() => {
|
||||
if (!state.value) return '-'
|
||||
return state.value.rule_index + 1
|
||||
})
|
||||
|
||||
const triggeredAtText = computed(() => {
|
||||
if (!state.value?.triggered_at_unix) return '-'
|
||||
return formatDateTime(new Date(state.value.triggered_at_unix * 1000))
|
||||
})
|
||||
|
||||
const untilText = computed(() => {
|
||||
if (!state.value?.until_unix) return '-'
|
||||
return formatDateTime(new Date(state.value.until_unix * 1000))
|
||||
})
|
||||
|
||||
const remainingText = computed(() => {
|
||||
if (!state.value) return '-'
|
||||
const remainingMs = state.value.until_unix * 1000 - Date.now()
|
||||
if (remainingMs <= 0) {
|
||||
return t('admin.accounts.tempUnschedulable.expired')
|
||||
}
|
||||
const minutes = Math.ceil(remainingMs / 60000)
|
||||
if (minutes < 60) {
|
||||
return t('admin.accounts.tempUnschedulable.remainingMinutes', { minutes })
|
||||
}
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const rest = minutes % 60
|
||||
if (rest === 0) {
|
||||
return t('admin.accounts.tempUnschedulable.remainingHours', { hours })
|
||||
}
|
||||
return t('admin.accounts.tempUnschedulable.remainingHoursMinutes', { hours, minutes: rest })
|
||||
})
|
||||
|
||||
const loadStatus = async () => {
|
||||
if (!props.account) return
|
||||
loading.value = true
|
||||
try {
|
||||
status.value = await adminAPI.accounts.getTempUnschedulableStatus(props.account.id)
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || t('admin.accounts.tempUnschedulable.failedToLoad'))
|
||||
status.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleReset = async () => {
|
||||
if (!props.account) return
|
||||
resetting.value = true
|
||||
try {
|
||||
const updated = await adminAPI.accounts.recoverState(props.account.id)
|
||||
appStore.showSuccess(t('admin.accounts.recoverStateSuccess'))
|
||||
emit('reset', updated)
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || t('admin.accounts.recoverStateFailed'))
|
||||
} finally {
|
||||
resetting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.show, props.account?.id],
|
||||
([visible]) => {
|
||||
if (visible && props.account) {
|
||||
loadStatus()
|
||||
return
|
||||
}
|
||||
status.value = null
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Window stats row (above progress bar) -->
|
||||
<div
|
||||
v-if="windowStats"
|
||||
class="mb-0.5 flex items-center"
|
||||
>
|
||||
<div class="flex items-center gap-1.5 text-[9px] text-gray-500 dark:text-gray-400">
|
||||
<span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">
|
||||
{{ formatRequests }} req
|
||||
</span>
|
||||
<span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">
|
||||
{{ formatTokens }}
|
||||
</span>
|
||||
<span class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800">
|
||||
A ${{ formatAccountCost }}
|
||||
</span>
|
||||
<span
|
||||
v-if="windowStats?.user_cost != null"
|
||||
class="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-800"
|
||||
>
|
||||
U ${{ formatUserCost }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress bar row -->
|
||||
<div class="flex items-center gap-1">
|
||||
<!-- Label badge (fixed width for alignment) -->
|
||||
<span
|
||||
:class="['w-[32px] shrink-0 rounded px-1 text-center text-[10px] font-medium', labelClass]"
|
||||
>
|
||||
{{ label }}
|
||||
</span>
|
||||
|
||||
<!-- Progress bar container -->
|
||||
<div class="h-1.5 w-8 shrink-0 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
|
||||
<div
|
||||
:class="['h-full transition-all duration-300', barClass]"
|
||||
:style="{ width: barWidth }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Percentage -->
|
||||
<span :class="['w-[32px] shrink-0 text-right text-[10px] font-medium', textClass]">
|
||||
{{ displayPercent }}
|
||||
</span>
|
||||
|
||||
<!-- Reset time -->
|
||||
<span v-if="resetsAt" class="shrink-0 text-[10px] text-gray-400">
|
||||
{{ formatResetTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { WindowStats } from '@/types'
|
||||
|
||||
const props = defineProps<{
|
||||
label: string
|
||||
utilization: number // Percentage (0-100+)
|
||||
resetsAt?: string | null
|
||||
color: 'indigo' | 'emerald' | 'purple' | 'amber'
|
||||
windowStats?: WindowStats | null
|
||||
}>()
|
||||
|
||||
// Label background colors
|
||||
const labelClass = computed(() => {
|
||||
const colors = {
|
||||
indigo: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300',
|
||||
emerald: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
|
||||
purple: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
|
||||
amber: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
|
||||
}
|
||||
return colors[props.color]
|
||||
})
|
||||
|
||||
// Progress bar color based on utilization
|
||||
const barClass = computed(() => {
|
||||
if (props.utilization >= 100) {
|
||||
return 'bg-red-500'
|
||||
} else if (props.utilization >= 80) {
|
||||
return 'bg-amber-500'
|
||||
} else {
|
||||
return 'bg-green-500'
|
||||
}
|
||||
})
|
||||
|
||||
// Text color based on utilization
|
||||
const textClass = computed(() => {
|
||||
if (props.utilization >= 100) {
|
||||
return 'text-red-600 dark:text-red-400'
|
||||
} else if (props.utilization >= 80) {
|
||||
return 'text-amber-600 dark:text-amber-400'
|
||||
} else {
|
||||
return 'text-gray-600 dark:text-gray-400'
|
||||
}
|
||||
})
|
||||
|
||||
// Bar width (capped at 100%)
|
||||
const barWidth = computed(() => {
|
||||
return `${Math.min(props.utilization, 100)}%`
|
||||
})
|
||||
|
||||
// Display percentage (cap at 999% for readability)
|
||||
const displayPercent = computed(() => {
|
||||
const percent = Math.round(props.utilization)
|
||||
return percent > 999 ? '>999%' : `${percent}%`
|
||||
})
|
||||
|
||||
// Format reset time
|
||||
const formatResetTime = computed(() => {
|
||||
if (!props.resetsAt) return '-'
|
||||
const date = new Date(props.resetsAt)
|
||||
const now = new Date()
|
||||
const diffMs = date.getTime() - now.getTime()
|
||||
|
||||
if (diffMs <= 0) return '现在'
|
||||
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
|
||||
const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
|
||||
|
||||
if (diffHours >= 24) {
|
||||
const days = Math.floor(diffHours / 24)
|
||||
return `${days}d ${diffHours % 24}h`
|
||||
} else if (diffHours > 0) {
|
||||
return `${diffHours}h ${diffMins}m`
|
||||
} else {
|
||||
return `${diffMins}m`
|
||||
}
|
||||
})
|
||||
|
||||
// Window stats formatters
|
||||
const formatRequests = computed(() => {
|
||||
if (!props.windowStats) return ''
|
||||
const r = props.windowStats.requests
|
||||
if (r >= 1000000) return `${(r / 1000000).toFixed(1)}M`
|
||||
if (r >= 1000) return `${(r / 1000).toFixed(1)}K`
|
||||
return r.toString()
|
||||
})
|
||||
|
||||
const formatTokens = computed(() => {
|
||||
if (!props.windowStats) return ''
|
||||
const t = props.windowStats.tokens
|
||||
if (t >= 1000000000) return `${(t / 1000000000).toFixed(1)}B`
|
||||
if (t >= 1000000) return `${(t / 1000000).toFixed(1)}M`
|
||||
if (t >= 1000) return `${(t / 1000).toFixed(1)}K`
|
||||
return t.toString()
|
||||
})
|
||||
|
||||
const formatAccountCost = computed(() => {
|
||||
if (!props.windowStats) return '0.00'
|
||||
return props.windowStats.cost.toFixed(2)
|
||||
})
|
||||
|
||||
const formatUserCost = computed(() => {
|
||||
if (!props.windowStats || props.windowStats.user_cost == null) return '0.00'
|
||||
return props.windowStats.user_cost.toFixed(2)
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,162 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import AccountStatusIndicator from '../AccountStatusIndicator.vue'
|
||||
import type { Account } from '@/types'
|
||||
|
||||
vi.mock('vue-i18n', async () => {
|
||||
const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string) => key
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function makeAccount(overrides: Partial<Account>): Account {
|
||||
return {
|
||||
id: 1,
|
||||
name: 'account',
|
||||
platform: 'antigravity',
|
||||
type: 'oauth',
|
||||
proxy_id: null,
|
||||
concurrency: 1,
|
||||
priority: 1,
|
||||
status: 'active',
|
||||
error_message: null,
|
||||
last_used_at: null,
|
||||
expires_at: null,
|
||||
auto_pause_on_expired: true,
|
||||
created_at: '2026-03-15T00:00:00Z',
|
||||
updated_at: '2026-03-15T00:00:00Z',
|
||||
schedulable: true,
|
||||
rate_limited_at: null,
|
||||
rate_limit_reset_at: null,
|
||||
overload_until: null,
|
||||
temp_unschedulable_until: null,
|
||||
temp_unschedulable_reason: null,
|
||||
session_window_start: null,
|
||||
session_window_end: null,
|
||||
session_window_status: null,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
describe('AccountStatusIndicator', () => {
|
||||
it('模型限流 + overages 启用 + 无 AICredits key → 显示 ⚡ (credits_active)', () => {
|
||||
const wrapper = mount(AccountStatusIndicator, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 1,
|
||||
name: 'ag-1',
|
||||
extra: {
|
||||
allow_overages: true,
|
||||
model_rate_limits: {
|
||||
'claude-sonnet-4-5': {
|
||||
rate_limited_at: '2026-03-15T00:00:00Z',
|
||||
rate_limit_reset_at: '2099-03-15T00:00:00Z'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('⚡')
|
||||
expect(wrapper.text()).toContain('CSon45')
|
||||
})
|
||||
|
||||
it('模型限流 + overages 未启用 → 普通限流样式（无 ⚡）', () => {
|
||||
const wrapper = mount(AccountStatusIndicator, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 2,
|
||||
name: 'ag-2',
|
||||
extra: {
|
||||
model_rate_limits: {
|
||||
'claude-sonnet-4-5': {
|
||||
rate_limited_at: '2026-03-15T00:00:00Z',
|
||||
rate_limit_reset_at: '2099-03-15T00:00:00Z'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('CSon45')
|
||||
expect(wrapper.text()).not.toContain('⚡')
|
||||
})
|
||||
|
||||
it('AICredits key 生效 → 显示积分已用尽 (credits_exhausted)', () => {
|
||||
const wrapper = mount(AccountStatusIndicator, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 3,
|
||||
name: 'ag-3',
|
||||
extra: {
|
||||
allow_overages: true,
|
||||
model_rate_limits: {
|
||||
'AICredits': {
|
||||
rate_limited_at: '2026-03-15T00:00:00Z',
|
||||
rate_limit_reset_at: '2099-03-15T00:00:00Z'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('account.creditsExhausted')
|
||||
})
|
||||
|
||||
it('模型限流 + overages 启用 + AICredits key 生效 → 普通限流样式（积分耗尽，无 ⚡）', () => {
|
||||
const wrapper = mount(AccountStatusIndicator, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 4,
|
||||
name: 'ag-4',
|
||||
extra: {
|
||||
allow_overages: true,
|
||||
model_rate_limits: {
|
||||
'claude-sonnet-4-5': {
|
||||
rate_limited_at: '2026-03-15T00:00:00Z',
|
||||
rate_limit_reset_at: '2099-03-15T00:00:00Z'
|
||||
},
|
||||
'AICredits': {
|
||||
rate_limited_at: '2026-03-15T00:00:00Z',
|
||||
rate_limit_reset_at: '2099-03-15T00:00:00Z'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 模型限流 + 积分耗尽 → 不应显示 ⚡
|
||||
expect(wrapper.text()).toContain('CSon45')
|
||||
expect(wrapper.text()).not.toContain('⚡')
|
||||
// AICredits 积分耗尽状态应显示
|
||||
expect(wrapper.text()).toContain('account.creditsExhausted')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,422 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest'
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import AccountUsageCell from '../AccountUsageCell.vue'
|
||||
import type { Account } from '@/types'
|
||||
|
||||
const { getUsage } = vi.hoisted(() => ({
|
||||
getUsage: vi.fn()
|
||||
}))
|
||||
|
||||
vi.mock('@/api/admin', () => ({
|
||||
adminAPI: {
|
||||
accounts: {
|
||||
getUsage
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('vue-i18n', async () => {
|
||||
const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string) => key
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function makeAccount(overrides: Partial<Account>): Account {
|
||||
return {
|
||||
id: 1,
|
||||
name: 'account',
|
||||
platform: 'antigravity',
|
||||
type: 'oauth',
|
||||
proxy_id: null,
|
||||
concurrency: 1,
|
||||
priority: 1,
|
||||
status: 'active',
|
||||
error_message: null,
|
||||
last_used_at: null,
|
||||
expires_at: null,
|
||||
auto_pause_on_expired: true,
|
||||
created_at: '2026-03-15T00:00:00Z',
|
||||
updated_at: '2026-03-15T00:00:00Z',
|
||||
schedulable: true,
|
||||
rate_limited_at: null,
|
||||
rate_limit_reset_at: null,
|
||||
overload_until: null,
|
||||
temp_unschedulable_until: null,
|
||||
temp_unschedulable_reason: null,
|
||||
session_window_start: null,
|
||||
session_window_end: null,
|
||||
session_window_status: null,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
describe('AccountUsageCell', () => {
|
||||
beforeEach(() => {
|
||||
getUsage.mockReset()
|
||||
})
|
||||
|
||||
it('Antigravity 图片用量会聚合新旧 image 模型', async () => {
|
||||
getUsage.mockResolvedValue({
|
||||
antigravity_quota: {
|
||||
'gemini-2.5-flash-image': {
|
||||
utilization: 45,
|
||||
reset_time: '2026-03-01T11:00:00Z'
|
||||
},
|
||||
'gemini-3.1-flash-image': {
|
||||
utilization: 20,
|
||||
reset_time: '2026-03-01T10:00:00Z'
|
||||
},
|
||||
'gemini-3-pro-image': {
|
||||
utilization: 70,
|
||||
reset_time: '2026-03-01T09:00:00Z'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const wrapper = mount(AccountUsageCell, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 1001,
|
||||
platform: 'antigravity',
|
||||
type: 'oauth',
|
||||
extra: {}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
UsageProgressBar: {
|
||||
props: ['label', 'utilization', 'resetsAt', 'color'],
|
||||
template: '<div class="usage-bar">{{ label }}|{{ utilization }}|{{ resetsAt }}</div>'
|
||||
},
|
||||
AccountQuotaInfo: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.text()).toContain('admin.accounts.usageWindow.gemini3Image|70|2026-03-01T09:00:00Z')
|
||||
})
|
||||
|
||||
it('Antigravity 会显示 AI Credits 余额信息', async () => {
|
||||
getUsage.mockResolvedValue({
|
||||
ai_credits: [
|
||||
{
|
||||
credit_type: 'GOOGLE_ONE_AI',
|
||||
amount: 25,
|
||||
minimum_balance: 5
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const wrapper = mount(AccountUsageCell, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 1002,
|
||||
platform: 'antigravity',
|
||||
type: 'oauth',
|
||||
extra: {}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
UsageProgressBar: true,
|
||||
AccountQuotaInfo: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.text()).toContain('admin.accounts.aiCreditsBalance')
|
||||
expect(wrapper.text()).toContain('25')
|
||||
})
|
||||
|
||||
|
||||
it('OpenAI OAuth 快照已过期时首屏会重新请求 usage', async () => {
|
||||
getUsage.mockResolvedValue({
|
||||
five_hour: {
|
||||
utilization: 15,
|
||||
resets_at: '2026-03-08T12:00:00Z',
|
||||
remaining_seconds: 3600,
|
||||
window_stats: {
|
||||
requests: 3,
|
||||
tokens: 300,
|
||||
cost: 0.03,
|
||||
standard_cost: 0.03,
|
||||
user_cost: 0.03
|
||||
}
|
||||
},
|
||||
seven_day: {
|
||||
utilization: 77,
|
||||
resets_at: '2026-03-13T12:00:00Z',
|
||||
remaining_seconds: 3600,
|
||||
window_stats: {
|
||||
requests: 3,
|
||||
tokens: 300,
|
||||
cost: 0.03,
|
||||
standard_cost: 0.03,
|
||||
user_cost: 0.03
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const wrapper = mount(AccountUsageCell, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 2000,
|
||||
platform: 'openai',
|
||||
type: 'oauth',
|
||||
extra: {
|
||||
codex_usage_updated_at: '2026-03-07T00:00:00Z',
|
||||
codex_5h_used_percent: 12,
|
||||
codex_5h_reset_at: '2026-03-08T12:00:00Z',
|
||||
codex_7d_used_percent: 34,
|
||||
codex_7d_reset_at: '2026-03-13T12:00:00Z'
|
||||
}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
UsageProgressBar: {
|
||||
props: ['label', 'utilization', 'resetsAt', 'windowStats', 'color'],
|
||||
template: '<div class="usage-bar">{{ label }}|{{ utilization }}|{{ windowStats?.tokens }}</div>'
|
||||
},
|
||||
AccountQuotaInfo: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
|
||||
expect(getUsage).toHaveBeenCalledWith(2000)
|
||||
expect(wrapper.text()).toContain('5h|15|300')
|
||||
expect(wrapper.text()).toContain('7d|77|300')
|
||||
})
|
||||
|
||||
it('OpenAI OAuth 有现成快照且未限额时不会首屏请求 usage', async () => {
|
||||
const wrapper = mount(AccountUsageCell, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 2001,
|
||||
platform: 'openai',
|
||||
type: 'oauth',
|
||||
extra: {
|
||||
codex_usage_updated_at: '2099-03-07T10:00:00Z',
|
||||
codex_5h_used_percent: 12,
|
||||
codex_5h_reset_at: '2099-03-07T12:00:00Z',
|
||||
codex_7d_used_percent: 34,
|
||||
codex_7d_reset_at: '2099-03-13T12:00:00Z'
|
||||
}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
UsageProgressBar: {
|
||||
props: ['label', 'utilization', 'resetsAt', 'windowStats', 'color'],
|
||||
template: '<div class="usage-bar">{{ label }}|{{ utilization }}</div>'
|
||||
},
|
||||
AccountQuotaInfo: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
|
||||
expect(getUsage).not.toHaveBeenCalled()
|
||||
expect(wrapper.text()).toContain('5h|12')
|
||||
expect(wrapper.text()).toContain('7d|34')
|
||||
})
|
||||
|
||||
it('OpenAI OAuth 在无 codex 快照时会回退显示 usage 接口窗口', async () => {
|
||||
getUsage.mockResolvedValue({
|
||||
five_hour: {
|
||||
utilization: 0,
|
||||
resets_at: null,
|
||||
remaining_seconds: 0,
|
||||
window_stats: {
|
||||
requests: 2,
|
||||
tokens: 27700,
|
||||
cost: 0.06,
|
||||
standard_cost: 0.06,
|
||||
user_cost: 0.06
|
||||
}
|
||||
},
|
||||
seven_day: {
|
||||
utilization: 0,
|
||||
resets_at: null,
|
||||
remaining_seconds: 0,
|
||||
window_stats: {
|
||||
requests: 2,
|
||||
tokens: 27700,
|
||||
cost: 0.06,
|
||||
standard_cost: 0.06,
|
||||
user_cost: 0.06
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const wrapper = mount(AccountUsageCell, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 2002,
|
||||
platform: 'openai',
|
||||
type: 'oauth',
|
||||
extra: {}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
UsageProgressBar: {
|
||||
props: ['label', 'utilization', 'resetsAt', 'windowStats', 'color'],
|
||||
template: '<div class="usage-bar">{{ label }}|{{ utilization }}|{{ windowStats?.tokens }}</div>'
|
||||
},
|
||||
AccountQuotaInfo: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
|
||||
expect(getUsage).toHaveBeenCalledWith(2002)
|
||||
expect(wrapper.text()).toContain('5h|0|27700')
|
||||
expect(wrapper.text()).toContain('7d|0|27700')
|
||||
})
|
||||
|
||||
it('OpenAI OAuth 在行数据刷新但仍无 codex 快照时会重新拉取 usage', async () => {
|
||||
getUsage
|
||||
.mockResolvedValueOnce({
|
||||
five_hour: {
|
||||
utilization: 0,
|
||||
resets_at: null,
|
||||
remaining_seconds: 0,
|
||||
window_stats: {
|
||||
requests: 1,
|
||||
tokens: 100,
|
||||
cost: 0.01,
|
||||
standard_cost: 0.01,
|
||||
user_cost: 0.01
|
||||
}
|
||||
},
|
||||
seven_day: null
|
||||
})
|
||||
.mockResolvedValueOnce({
|
||||
five_hour: {
|
||||
utilization: 0,
|
||||
resets_at: null,
|
||||
remaining_seconds: 0,
|
||||
window_stats: {
|
||||
requests: 2,
|
||||
tokens: 200,
|
||||
cost: 0.02,
|
||||
standard_cost: 0.02,
|
||||
user_cost: 0.02
|
||||
}
|
||||
},
|
||||
seven_day: null
|
||||
})
|
||||
|
||||
const wrapper = mount(AccountUsageCell, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 2003,
|
||||
platform: 'openai',
|
||||
type: 'oauth',
|
||||
updated_at: '2026-03-07T10:00:00Z',
|
||||
extra: {}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
UsageProgressBar: {
|
||||
props: ['label', 'utilization', 'resetsAt', 'windowStats', 'color'],
|
||||
template: '<div class="usage-bar">{{ label }}|{{ utilization }}|{{ windowStats?.tokens }}</div>'
|
||||
},
|
||||
AccountQuotaInfo: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
expect(wrapper.text()).toContain('5h|0|100')
|
||||
expect(getUsage).toHaveBeenCalledTimes(1)
|
||||
|
||||
await wrapper.setProps({
|
||||
account: {
|
||||
id: 2003,
|
||||
platform: 'openai',
|
||||
type: 'oauth',
|
||||
updated_at: '2026-03-07T10:01:00Z',
|
||||
extra: {}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
expect(getUsage).toHaveBeenCalledTimes(2)
|
||||
expect(wrapper.text()).toContain('5h|0|200')
|
||||
})
|
||||
|
||||
it('OpenAI OAuth 已限额时首屏优先展示重新查询后的 usage，而不是旧 codex 快照', async () => {
|
||||
getUsage.mockResolvedValue({
|
||||
five_hour: {
|
||||
utilization: 100,
|
||||
resets_at: '2026-03-07T12:00:00Z',
|
||||
remaining_seconds: 3600,
|
||||
window_stats: {
|
||||
requests: 211,
|
||||
tokens: 106540000,
|
||||
cost: 38.13,
|
||||
standard_cost: 38.13,
|
||||
user_cost: 38.13
|
||||
}
|
||||
},
|
||||
seven_day: {
|
||||
utilization: 100,
|
||||
resets_at: '2026-03-13T12:00:00Z',
|
||||
remaining_seconds: 3600,
|
||||
window_stats: {
|
||||
requests: 211,
|
||||
tokens: 106540000,
|
||||
cost: 38.13,
|
||||
standard_cost: 38.13,
|
||||
user_cost: 38.13
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const wrapper = mount(AccountUsageCell, {
|
||||
props: {
|
||||
account: makeAccount({
|
||||
id: 2004,
|
||||
platform: 'openai',
|
||||
type: 'oauth',
|
||||
rate_limit_reset_at: '2099-03-07T12:00:00Z',
|
||||
extra: {
|
||||
codex_5h_used_percent: 0,
|
||||
codex_7d_used_percent: 0
|
||||
}
|
||||
})
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
UsageProgressBar: {
|
||||
props: ['label', 'utilization', 'resetsAt', 'windowStats', 'color'],
|
||||
template: '<div class="usage-bar">{{ label }}|{{ utilization }}|{{ windowStats?.tokens }}</div>'
|
||||
},
|
||||
AccountQuotaInfo: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
|
||||
expect(getUsage).toHaveBeenCalledWith(2004)
|
||||
expect(wrapper.text()).toContain('5h|100|106540000')
|
||||
expect(wrapper.text()).toContain('7d|100|106540000')
|
||||
expect(wrapper.text()).not.toContain('5h|0|')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,76 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import BulkEditAccountModal from '../BulkEditAccountModal.vue'
|
||||
|
||||
vi.mock('@/stores/app', () => ({
|
||||
useAppStore: () => ({
|
||||
showError: vi.fn(),
|
||||
showSuccess: vi.fn(),
|
||||
showInfo: vi.fn()
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/api/admin', () => ({
|
||||
adminAPI: {
|
||||
accounts: {
|
||||
bulkEdit: vi.fn()
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('@/api/admin/accounts', () => ({
|
||||
getAntigravityDefaultModelMapping: vi.fn()
|
||||
}))
|
||||
|
||||
vi.mock('vue-i18n', async () => {
|
||||
const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string) => key
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function mountModal() {
|
||||
return mount(BulkEditAccountModal, {
|
||||
props: {
|
||||
show: true,
|
||||
accountIds: [1, 2],
|
||||
selectedPlatforms: ['antigravity'],
|
||||
proxies: [],
|
||||
groups: []
|
||||
} as any,
|
||||
global: {
|
||||
stubs: {
|
||||
BaseDialog: { template: '<div><slot /><slot name="footer" /></div>' },
|
||||
Select: true,
|
||||
ProxySelector: true,
|
||||
GroupSelector: true,
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
describe('BulkEditAccountModal', () => {
|
||||
it('antigravity 白名单包含 Gemini 图片模型且过滤掉普通 GPT 模型', () => {
|
||||
const wrapper = mountModal()
|
||||
|
||||
expect(wrapper.text()).toContain('Gemini 3.1 Flash Image')
|
||||
expect(wrapper.text()).toContain('Gemini 3 Pro Image (Legacy)')
|
||||
expect(wrapper.text()).not.toContain('GPT-5.3 Codex')
|
||||
})
|
||||
|
||||
it('antigravity 映射预设包含图片映射并过滤 OpenAI 预设', async () => {
|
||||
const wrapper = mountModal()
|
||||
|
||||
const mappingTab = wrapper.findAll('button').find((btn) => btn.text().includes('admin.accounts.modelMapping'))
|
||||
expect(mappingTab).toBeTruthy()
|
||||
await mappingTab!.trigger('click')
|
||||
|
||||
expect(wrapper.text()).toContain('Gemini 3.1 Image')
|
||||
expect(wrapper.text()).toContain('G3 Image→3.1')
|
||||
expect(wrapper.text()).not.toContain('GPT-5.3 Codex')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,46 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { applyInterceptWarmup } from '../credentialsBuilder'
|
||||
|
||||
describe('applyInterceptWarmup', () => {
|
||||
it('create + enabled=true: should set intercept_warmup_requests to true', () => {
|
||||
const creds: Record<string, unknown> = { access_token: 'tok' }
|
||||
applyInterceptWarmup(creds, true, 'create')
|
||||
expect(creds.intercept_warmup_requests).toBe(true)
|
||||
})
|
||||
|
||||
it('create + enabled=false: should not add the field', () => {
|
||||
const creds: Record<string, unknown> = { access_token: 'tok' }
|
||||
applyInterceptWarmup(creds, false, 'create')
|
||||
expect('intercept_warmup_requests' in creds).toBe(false)
|
||||
})
|
||||
|
||||
it('edit + enabled=true: should set intercept_warmup_requests to true', () => {
|
||||
const creds: Record<string, unknown> = { api_key: 'sk' }
|
||||
applyInterceptWarmup(creds, true, 'edit')
|
||||
expect(creds.intercept_warmup_requests).toBe(true)
|
||||
})
|
||||
|
||||
it('edit + enabled=false + field exists: should delete the field', () => {
|
||||
const creds: Record<string, unknown> = { api_key: 'sk', intercept_warmup_requests: true }
|
||||
applyInterceptWarmup(creds, false, 'edit')
|
||||
expect('intercept_warmup_requests' in creds).toBe(false)
|
||||
})
|
||||
|
||||
it('edit + enabled=false + field absent: should not throw', () => {
|
||||
const creds: Record<string, unknown> = { api_key: 'sk' }
|
||||
applyInterceptWarmup(creds, false, 'edit')
|
||||
expect('intercept_warmup_requests' in creds).toBe(false)
|
||||
})
|
||||
|
||||
it('should not affect other fields', () => {
|
||||
const creds: Record<string, unknown> = {
|
||||
api_key: 'sk',
|
||||
base_url: 'url',
|
||||
intercept_warmup_requests: true
|
||||
}
|
||||
applyInterceptWarmup(creds, false, 'edit')
|
||||
expect(creds.api_key).toBe('sk')
|
||||
expect(creds.base_url).toBe('url')
|
||||
expect('intercept_warmup_requests' in creds).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,11 @@
|
||||
export function applyInterceptWarmup(
|
||||
credentials: Record<string, unknown>,
|
||||
enabled: boolean,
|
||||
mode: 'create' | 'edit'
|
||||
): void {
|
||||
if (enabled) {
|
||||
credentials.intercept_warmup_requests = true
|
||||
} else if (mode === 'edit') {
|
||||
delete credentials.intercept_warmup_requests
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export { default as CreateAccountModal } from './CreateAccountModal.vue'
|
||||
export { default as EditAccountModal } from './EditAccountModal.vue'
|
||||
export { default as BulkEditAccountModal } from './BulkEditAccountModal.vue'
|
||||
export { default as ReAuthAccountModal } from './ReAuthAccountModal.vue'
|
||||
export { default as OAuthAuthorizationFlow } from './OAuthAuthorizationFlow.vue'
|
||||
export { default as AccountStatusIndicator } from './AccountStatusIndicator.vue'
|
||||
export { default as AccountUsageCell } from './AccountUsageCell.vue'
|
||||
export { default as UsageProgressBar } from './UsageProgressBar.vue'
|
||||
export { default as AccountStatsModal } from './AccountStatsModal.vue'
|
||||
export { default as AccountTestModal } from './AccountTestModal.vue'
|
||||
export { default as AccountTodayStatsCell } from './AccountTodayStatsCell.vue'
|
||||
export { default as TempUnschedStatusModal } from './TempUnschedStatusModal.vue'
|
||||
export { default as SyncFromCrsModal } from './SyncFromCrsModal.vue'
|
||||
@@ -0,0 +1,650 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.errorPassthrough.title')"
|
||||
width="extra-wide"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.description') }}
|
||||
</p>
|
||||
<button @click="showCreateModal = true" class="btn btn-primary btn-sm">
|
||||
<Icon name="plus" size="sm" class="mr-1" />
|
||||
{{ t('admin.errorPassthrough.createRule') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Rules Table -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-8">
|
||||
<Icon name="refresh" size="lg" class="animate-spin text-gray-400" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="rules.length === 0" class="py-8 text-center">
|
||||
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700">
|
||||
<Icon name="shield" size="lg" class="text-gray-400" />
|
||||
</div>
|
||||
<h4 class="mb-1 text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.errorPassthrough.noRules') }}
|
||||
</h4>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.createFirstRule') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="max-h-96 overflow-auto rounded-lg border border-gray-200 dark:border-dark-600">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
|
||||
<thead class="sticky top-0 bg-gray-50 dark:bg-dark-700">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.columns.priority') }}
|
||||
</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.columns.name') }}
|
||||
</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.columns.conditions') }}
|
||||
</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.columns.platforms') }}
|
||||
</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.columns.behavior') }}
|
||||
</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.columns.status') }}
|
||||
</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.columns.actions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-800">
|
||||
<tr v-for="rule in rules" :key="rule.id" class="hover:bg-gray-50 dark:hover:bg-dark-700">
|
||||
<td class="whitespace-nowrap px-3 py-2">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center rounded bg-gray-100 text-xs font-medium text-gray-700 dark:bg-dark-600 dark:text-gray-300">
|
||||
{{ rule.priority }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<div class="font-medium text-gray-900 dark:text-white text-sm">{{ rule.name }}</div>
|
||||
<div v-if="rule.description" class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 max-w-xs truncate">
|
||||
{{ rule.description }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<div class="flex flex-wrap gap-1 max-w-48">
|
||||
<span
|
||||
v-for="code in rule.error_codes.slice(0, 3)"
|
||||
:key="code"
|
||||
class="badge badge-danger text-xs"
|
||||
>
|
||||
{{ code }}
|
||||
</span>
|
||||
<span
|
||||
v-if="rule.error_codes.length > 3"
|
||||
class="text-xs text-gray-500"
|
||||
>
|
||||
+{{ rule.error_codes.length - 3 }}
|
||||
</span>
|
||||
<span
|
||||
v-for="keyword in rule.keywords.slice(0, 1)"
|
||||
:key="keyword"
|
||||
class="badge badge-gray text-xs"
|
||||
>
|
||||
"{{ keyword.length > 10 ? keyword.substring(0, 10) + '...' : keyword }}"
|
||||
</span>
|
||||
<span
|
||||
v-if="rule.keywords.length > 1"
|
||||
class="text-xs text-gray-500"
|
||||
>
|
||||
+{{ rule.keywords.length - 1 }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.matchMode.' + rule.match_mode) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<div v-if="rule.platforms.length === 0" class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.allPlatforms') }}
|
||||
</div>
|
||||
<div v-else class="flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="platform in rule.platforms.slice(0, 2)"
|
||||
:key="platform"
|
||||
class="badge badge-primary text-xs"
|
||||
>
|
||||
{{ platform }}
|
||||
</span>
|
||||
<span v-if="rule.platforms.length > 2" class="text-xs text-gray-500">
|
||||
+{{ rule.platforms.length - 2 }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<div class="text-xs space-y-0.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<Icon
|
||||
:name="rule.passthrough_code ? 'checkCircle' : 'xCircle'"
|
||||
size="xs"
|
||||
:class="rule.passthrough_code ? 'text-green-500' : 'text-gray-400'"
|
||||
/>
|
||||
<span class="text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.code') }}:
|
||||
{{ rule.passthrough_code ? t('admin.errorPassthrough.passthrough') : (rule.response_code || '-') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<Icon
|
||||
:name="rule.passthrough_body ? 'checkCircle' : 'xCircle'"
|
||||
size="xs"
|
||||
:class="rule.passthrough_body ? 'text-green-500' : 'text-gray-400'"
|
||||
/>
|
||||
<span class="text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.body') }}:
|
||||
{{ rule.passthrough_body ? t('admin.errorPassthrough.passthrough') : t('admin.errorPassthrough.custom') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="rule.skip_monitoring" class="flex items-center gap-1">
|
||||
<Icon
|
||||
name="checkCircle"
|
||||
size="xs"
|
||||
class="text-yellow-500"
|
||||
/>
|
||||
<span class="text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.errorPassthrough.skipMonitoring') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<button
|
||||
@click="toggleEnabled(rule)"
|
||||
:class="[
|
||||
'relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
|
||||
rule.enabled ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
'pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
rule.enabled ? 'translate-x-3' : 'translate-x-0'
|
||||
]"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-3 py-2">
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
@click="handleEdit(rule)"
|
||||
class="p-1 text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
:title="t('common.edit')"
|
||||
>
|
||||
<Icon name="edit" size="sm" />
|
||||
</button>
|
||||
<button
|
||||
@click="handleDelete(rule)"
|
||||
class="p-1 text-gray-500 hover:text-red-600 dark:hover:text-red-400"
|
||||
:title="t('common.delete')"
|
||||
>
|
||||
<Icon name="trash" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<button @click="$emit('close')" class="btn btn-secondary">
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Create/Edit Modal -->
|
||||
<BaseDialog
|
||||
:show="showCreateModal || showEditModal"
|
||||
:title="showEditModal ? t('admin.errorPassthrough.editRule') : t('admin.errorPassthrough.createRule')"
|
||||
width="wide"
|
||||
@close="closeFormModal"
|
||||
>
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4">
|
||||
<!-- Basic Info -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.errorPassthrough.form.name') }}</label>
|
||||
<input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
required
|
||||
class="input"
|
||||
:placeholder="t('admin.errorPassthrough.form.namePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.errorPassthrough.form.priority') }}</label>
|
||||
<input
|
||||
v-model.number="form.priority"
|
||||
type="number"
|
||||
min="0"
|
||||
class="input"
|
||||
/>
|
||||
<p class="input-hint">{{ t('admin.errorPassthrough.form.priorityHint') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.errorPassthrough.form.description') }}</label>
|
||||
<input
|
||||
v-model="form.description"
|
||||
type="text"
|
||||
class="input"
|
||||
:placeholder="t('admin.errorPassthrough.form.descriptionPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Match Conditions -->
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<h4 class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.errorPassthrough.form.matchConditions') }}
|
||||
</h4>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="input-label text-xs">{{ t('admin.errorPassthrough.form.errorCodes') }}</label>
|
||||
<input
|
||||
v-model="errorCodesInput"
|
||||
type="text"
|
||||
class="input text-sm"
|
||||
:placeholder="t('admin.errorPassthrough.form.errorCodesPlaceholder')"
|
||||
/>
|
||||
<p class="input-hint text-xs">{{ t('admin.errorPassthrough.form.errorCodesHint') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label text-xs">{{ t('admin.errorPassthrough.form.keywords') }}</label>
|
||||
<textarea
|
||||
v-model="keywordsInput"
|
||||
rows="2"
|
||||
class="input font-mono text-xs"
|
||||
:placeholder="t('admin.errorPassthrough.form.keywordsPlaceholder')"
|
||||
/>
|
||||
<p class="input-hint text-xs">{{ t('admin.errorPassthrough.form.keywordsHint') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="input-label text-xs">{{ t('admin.errorPassthrough.form.matchMode') }}</label>
|
||||
<div class="mt-1 space-y-2">
|
||||
<label
|
||||
v-for="option in matchModeOptions"
|
||||
:key="option.value"
|
||||
class="flex items-start gap-2 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:value="option.value"
|
||||
v-model="form.match_mode"
|
||||
class="mt-0.5 h-3.5 w-3.5 border-gray-300 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{ option.label }}</span>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">{{ option.description }}</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="input-label text-xs">{{ t('admin.errorPassthrough.form.platforms') }}</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<label
|
||||
v-for="platform in platformOptions"
|
||||
:key="platform.value"
|
||||
class="inline-flex items-center gap-1.5"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="platform.value"
|
||||
v-model="form.platforms"
|
||||
class="h-3.5 w-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-xs text-gray-700 dark:text-gray-300">{{ platform.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="input-hint text-xs mt-1">{{ t('admin.errorPassthrough.form.platformsHint') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Response Behavior -->
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<h4 class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.errorPassthrough.form.responseBehavior') }}
|
||||
</h4>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="flex items-center gap-1.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.passthrough_code"
|
||||
class="h-3.5 w-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.errorPassthrough.form.passthroughCode') }}
|
||||
</span>
|
||||
</label>
|
||||
<div v-if="!form.passthrough_code" class="mt-2">
|
||||
<label class="input-label text-xs">{{ t('admin.errorPassthrough.form.responseCode') }}</label>
|
||||
<input
|
||||
v-model.number="form.response_code"
|
||||
type="number"
|
||||
min="100"
|
||||
max="599"
|
||||
class="input text-sm"
|
||||
placeholder="422"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="flex items-center gap-1.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.passthrough_body"
|
||||
class="h-3.5 w-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.errorPassthrough.form.passthroughBody') }}
|
||||
</span>
|
||||
</label>
|
||||
<div v-if="!form.passthrough_body" class="mt-2">
|
||||
<label class="input-label text-xs">{{ t('admin.errorPassthrough.form.customMessage') }}</label>
|
||||
<input
|
||||
v-model="form.custom_message"
|
||||
type="text"
|
||||
class="input text-sm"
|
||||
:placeholder="t('admin.errorPassthrough.form.customMessagePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skip Monitoring -->
|
||||
<div class="flex items-center gap-1.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.skip_monitoring"
|
||||
class="h-3.5 w-3.5 rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
|
||||
/>
|
||||
<span class="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.errorPassthrough.form.skipMonitoring') }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="input-hint text-xs -mt-3">{{ t('admin.errorPassthrough.form.skipMonitoringHint') }}</p>
|
||||
|
||||
<!-- Enabled -->
|
||||
<div class="flex items-center gap-1.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.enabled"
|
||||
class="h-3.5 w-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.errorPassthrough.form.enabled') }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="closeFormModal" type="button" class="btn btn-secondary">
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button @click="handleSubmit" :disabled="submitting" class="btn btn-primary">
|
||||
<Icon v-if="submitting" name="refresh" size="sm" class="mr-1 animate-spin" />
|
||||
{{ showEditModal ? t('common.update') : t('common.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Confirmation -->
|
||||
<ConfirmDialog
|
||||
:show="showDeleteDialog"
|
||||
:title="t('admin.errorPassthrough.deleteRule')"
|
||||
:message="t('admin.errorPassthrough.deleteConfirm', { name: deletingRule?.name })"
|
||||
:confirm-text="t('common.delete')"
|
||||
:cancel-text="t('common.cancel')"
|
||||
:danger="true"
|
||||
@confirm="confirmDelete"
|
||||
@cancel="showDeleteDialog = false"
|
||||
/>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { ErrorPassthroughRule } from '@/api/admin/errorPassthrough'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
}>()
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
void emit // suppress unused warning - emit is used via $emit in template
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const rules = ref<ErrorPassthroughRule[]>([])
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const showCreateModal = ref(false)
|
||||
const showEditModal = ref(false)
|
||||
const showDeleteDialog = ref(false)
|
||||
const editingRule = ref<ErrorPassthroughRule | null>(null)
|
||||
const deletingRule = ref<ErrorPassthroughRule | null>(null)
|
||||
|
||||
// Form inputs for arrays
|
||||
const errorCodesInput = ref('')
|
||||
const keywordsInput = ref('')
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
enabled: true,
|
||||
priority: 0,
|
||||
match_mode: 'any' as 'any' | 'all',
|
||||
platforms: [] as string[],
|
||||
passthrough_code: true,
|
||||
response_code: null as number | null,
|
||||
passthrough_body: true,
|
||||
custom_message: null as string | null,
|
||||
skip_monitoring: false,
|
||||
description: null as string | null
|
||||
})
|
||||
|
||||
const matchModeOptions = computed(() => [
|
||||
{ value: 'any', label: t('admin.errorPassthrough.matchMode.any'), description: t('admin.errorPassthrough.matchMode.anyHint') },
|
||||
{ value: 'all', label: t('admin.errorPassthrough.matchMode.all'), description: t('admin.errorPassthrough.matchMode.allHint') }
|
||||
])
|
||||
|
||||
const platformOptions = [
|
||||
{ value: 'anthropic', label: 'Anthropic' },
|
||||
{ value: 'openai', label: 'OpenAI' },
|
||||
{ value: 'gemini', label: 'Gemini' },
|
||||
{ value: 'antigravity', label: 'Antigravity' }
|
||||
]
|
||||
|
||||
// Load rules when dialog opens
|
||||
watch(() => props.show, (newVal) => {
|
||||
if (newVal) {
|
||||
loadRules()
|
||||
}
|
||||
})
|
||||
|
||||
const loadRules = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
rules.value = await adminAPI.errorPassthrough.list()
|
||||
} catch (error) {
|
||||
appStore.showError(t('admin.errorPassthrough.failedToLoad'))
|
||||
console.error('Error loading rules:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.name = ''
|
||||
form.enabled = true
|
||||
form.priority = 0
|
||||
form.match_mode = 'any'
|
||||
form.platforms = []
|
||||
form.passthrough_code = true
|
||||
form.response_code = null
|
||||
form.passthrough_body = true
|
||||
form.custom_message = null
|
||||
form.skip_monitoring = false
|
||||
form.description = null
|
||||
errorCodesInput.value = ''
|
||||
keywordsInput.value = ''
|
||||
}
|
||||
|
||||
const closeFormModal = () => {
|
||||
showCreateModal.value = false
|
||||
showEditModal.value = false
|
||||
editingRule.value = null
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const handleEdit = (rule: ErrorPassthroughRule) => {
|
||||
editingRule.value = rule
|
||||
form.name = rule.name
|
||||
form.enabled = rule.enabled
|
||||
form.priority = rule.priority
|
||||
form.match_mode = rule.match_mode
|
||||
form.platforms = [...rule.platforms]
|
||||
form.passthrough_code = rule.passthrough_code
|
||||
form.response_code = rule.response_code
|
||||
form.passthrough_body = rule.passthrough_body
|
||||
form.custom_message = rule.custom_message
|
||||
form.skip_monitoring = rule.skip_monitoring
|
||||
form.description = rule.description
|
||||
errorCodesInput.value = rule.error_codes.join(', ')
|
||||
keywordsInput.value = rule.keywords.join('\n')
|
||||
showEditModal.value = true
|
||||
}
|
||||
|
||||
const handleDelete = (rule: ErrorPassthroughRule) => {
|
||||
deletingRule.value = rule
|
||||
showDeleteDialog.value = true
|
||||
}
|
||||
|
||||
const parseErrorCodes = (): number[] => {
|
||||
if (!errorCodesInput.value.trim()) return []
|
||||
return errorCodesInput.value
|
||||
.split(/[,\s]+/)
|
||||
.map(s => parseInt(s.trim(), 10))
|
||||
.filter(n => !isNaN(n) && n > 0)
|
||||
}
|
||||
|
||||
const parseKeywords = (): string[] => {
|
||||
if (!keywordsInput.value.trim()) return []
|
||||
return keywordsInput.value
|
||||
.split('\n')
|
||||
.map(s => s.trim())
|
||||
.filter(s => s.length > 0)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.name.trim()) {
|
||||
appStore.showError(t('admin.errorPassthrough.nameRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
const errorCodes = parseErrorCodes()
|
||||
const keywords = parseKeywords()
|
||||
|
||||
if (errorCodes.length === 0 && keywords.length === 0) {
|
||||
appStore.showError(t('admin.errorPassthrough.conditionsRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const data = {
|
||||
name: form.name.trim(),
|
||||
enabled: form.enabled,
|
||||
priority: form.priority,
|
||||
error_codes: errorCodes,
|
||||
keywords: keywords,
|
||||
match_mode: form.match_mode,
|
||||
platforms: form.platforms,
|
||||
passthrough_code: form.passthrough_code,
|
||||
response_code: form.passthrough_code ? null : form.response_code,
|
||||
passthrough_body: form.passthrough_body,
|
||||
custom_message: form.passthrough_body ? null : form.custom_message,
|
||||
skip_monitoring: form.skip_monitoring,
|
||||
description: form.description?.trim() || null
|
||||
}
|
||||
|
||||
if (showEditModal.value && editingRule.value) {
|
||||
await adminAPI.errorPassthrough.update(editingRule.value.id, data)
|
||||
appStore.showSuccess(t('admin.errorPassthrough.ruleUpdated'))
|
||||
} else {
|
||||
await adminAPI.errorPassthrough.create(data)
|
||||
appStore.showSuccess(t('admin.errorPassthrough.ruleCreated'))
|
||||
}
|
||||
|
||||
closeFormModal()
|
||||
loadRules()
|
||||
} catch (error: any) {
|
||||
appStore.showError(error.response?.data?.detail || t('admin.errorPassthrough.failedToSave'))
|
||||
console.error('Error saving rule:', error)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleEnabled = async (rule: ErrorPassthroughRule) => {
|
||||
try {
|
||||
await adminAPI.errorPassthrough.toggleEnabled(rule.id, !rule.enabled)
|
||||
rule.enabled = !rule.enabled
|
||||
} catch (error: any) {
|
||||
appStore.showError(error.response?.data?.detail || t('admin.errorPassthrough.failedToToggle'))
|
||||
console.error('Error toggling rule:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDelete = async () => {
|
||||
if (!deletingRule.value) return
|
||||
|
||||
try {
|
||||
await adminAPI.errorPassthrough.delete(deletingRule.value.id)
|
||||
appStore.showSuccess(t('admin.errorPassthrough.ruleDeleted'))
|
||||
showDeleteDialog.value = false
|
||||
deletingRule.value = null
|
||||
loadRules()
|
||||
} catch (error: any) {
|
||||
appStore.showError(error.response?.data?.detail || t('admin.errorPassthrough.failedToDelete'))
|
||||
console.error('Error deleting rule:', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="show && position">
|
||||
<!-- Backdrop: click anywhere outside to close -->
|
||||
<div class="fixed inset-0 z-[9998]" @click="emit('close')"></div>
|
||||
<div
|
||||
class="action-menu-content fixed z-[9999] w-52 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800"
|
||||
:style="{ top: position.top + 'px', left: position.left + 'px' }"
|
||||
@click.stop
|
||||
>
|
||||
<div class="py-1">
|
||||
<template v-if="account">
|
||||
<button @click="$emit('test', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700">
|
||||
<Icon name="play" size="sm" class="text-green-500" :stroke-width="2" />
|
||||
{{ t('admin.accounts.testConnection') }}
|
||||
</button>
|
||||
<button @click="$emit('stats', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700">
|
||||
<Icon name="chart" size="sm" class="text-indigo-500" />
|
||||
{{ t('admin.accounts.viewStats') }}
|
||||
</button>
|
||||
<button @click="$emit('schedule', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700">
|
||||
<Icon name="clock" size="sm" class="text-orange-500" />
|
||||
{{ t('admin.scheduledTests.schedule') }}
|
||||
</button>
|
||||
<template v-if="account.type === 'oauth' || account.type === 'setup-token'">
|
||||
<button @click="$emit('reauth', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-blue-600 hover:bg-gray-100 dark:hover:bg-dark-700">
|
||||
<Icon name="link" size="sm" />
|
||||
{{ t('admin.accounts.reAuthorize') }}
|
||||
</button>
|
||||
<button @click="$emit('refresh-token', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-purple-600 hover:bg-gray-100 dark:hover:bg-dark-700">
|
||||
<Icon name="refresh" size="sm" />
|
||||
{{ t('admin.accounts.refreshToken') }}
|
||||
</button>
|
||||
</template>
|
||||
<div v-if="hasRecoverableState" class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
|
||||
<button v-if="hasRecoverableState" @click="$emit('recover-state', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-emerald-600 hover:bg-gray-100 dark:hover:bg-dark-700">
|
||||
<Icon name="sync" size="sm" />
|
||||
{{ t('admin.accounts.recoverState') }}
|
||||
</button>
|
||||
<button v-if="hasQuotaLimit" @click="$emit('reset-quota', account); $emit('close')" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-teal-600 hover:bg-gray-100 dark:hover:bg-dark-700">
|
||||
<Icon name="refresh" size="sm" />
|
||||
{{ t('admin.accounts.resetQuota') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, watch, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Icon } from '@/components/icons'
|
||||
import type { Account } from '@/types'
|
||||
|
||||
const props = defineProps<{ show: boolean; account: Account | null; position: { top: number; left: number } | null }>()
|
||||
const emit = defineEmits(['close', 'test', 'stats', 'schedule', 'reauth', 'refresh-token', 'recover-state', 'reset-quota'])
|
||||
const { t } = useI18n()
|
||||
const isRateLimited = computed(() => {
|
||||
if (props.account?.rate_limit_reset_at && new Date(props.account.rate_limit_reset_at) > new Date()) {
|
||||
return true
|
||||
}
|
||||
const modelLimits = (props.account?.extra as Record<string, unknown> | undefined)?.model_rate_limits as
|
||||
| Record<string, { rate_limit_reset_at: string }>
|
||||
| undefined
|
||||
if (modelLimits) {
|
||||
const now = new Date()
|
||||
return Object.values(modelLimits).some(info => new Date(info.rate_limit_reset_at) > now)
|
||||
}
|
||||
return false
|
||||
})
|
||||
const isOverloaded = computed(() => props.account?.overload_until && new Date(props.account.overload_until) > new Date())
|
||||
const isTempUnschedulable = computed(() => props.account?.temp_unschedulable_until && new Date(props.account.temp_unschedulable_until) > new Date())
|
||||
const hasRecoverableState = computed(() => {
|
||||
return props.account?.status === 'error' || Boolean(isRateLimited.value) || Boolean(isOverloaded.value) || Boolean(isTempUnschedulable.value)
|
||||
})
|
||||
const hasQuotaLimit = computed(() => {
|
||||
return (props.account?.type === 'apikey' || props.account?.type === 'bedrock') && (
|
||||
(props.account?.quota_limit ?? 0) > 0 ||
|
||||
(props.account?.quota_daily_limit ?? 0) > 0 ||
|
||||
(props.account?.quota_weekly_limit ?? 0) > 0
|
||||
)
|
||||
})
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') emit('close')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
} else {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div v-if="selectedIds.length > 0" class="mb-4 flex items-center justify-between p-3 bg-primary-50 rounded-lg dark:bg-primary-900/20">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-medium text-primary-900 dark:text-primary-100">
|
||||
{{ t('admin.accounts.bulkActions.selected', { count: selectedIds.length }) }}
|
||||
</span>
|
||||
<button
|
||||
@click="$emit('select-page')"
|
||||
class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
|
||||
>
|
||||
{{ t('admin.accounts.bulkActions.selectCurrentPage') }}
|
||||
</button>
|
||||
<span class="text-gray-300 dark:text-primary-800">•</span>
|
||||
<button
|
||||
@click="$emit('clear')"
|
||||
class="text-xs font-medium text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
|
||||
>
|
||||
{{ t('admin.accounts.bulkActions.clear') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button @click="$emit('delete')" class="btn btn-danger btn-sm">{{ t('admin.accounts.bulkActions.delete') }}</button>
|
||||
<button @click="$emit('reset-status')" class="btn btn-secondary btn-sm">{{ t('admin.accounts.bulkActions.resetStatus') }}</button>
|
||||
<button @click="$emit('refresh-token')" class="btn btn-secondary btn-sm">{{ t('admin.accounts.bulkActions.refreshToken') }}</button>
|
||||
<button @click="$emit('toggle-schedulable', true)" class="btn btn-success btn-sm">{{ t('admin.accounts.bulkActions.enableScheduling') }}</button>
|
||||
<button @click="$emit('toggle-schedulable', false)" class="btn btn-warning btn-sm">{{ t('admin.accounts.bulkActions.disableScheduling') }}</button>
|
||||
<button @click="$emit('edit')" class="btn btn-primary btn-sm">{{ t('admin.accounts.bulkActions.edit') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
defineProps(['selectedIds']); defineEmits(['delete', 'edit', 'clear', 'select-page', 'toggle-schedulable', 'reset-status', 'refresh-token']); const { t } = useI18n()
|
||||
</script>
|
||||
@@ -0,0 +1,713 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.usageStatistics')"
|
||||
width="extra-wide"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<!-- Account Info Header -->
|
||||
<div
|
||||
v-if="account"
|
||||
class="flex items-center justify-between rounded-xl border border-primary-200 bg-gradient-to-r from-primary-50 to-primary-100 p-3 dark:border-primary-700/50 dark:from-primary-900/20 dark:to-primary-800/20"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-primary-600"
|
||||
>
|
||||
<Icon name="chartBar" size="md" class="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ account.name }}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.last30DaysUsage') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full px-2.5 py-1 text-xs font-semibold',
|
||||
account.status === 'active'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
|
||||
]"
|
||||
>
|
||||
{{ account.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
|
||||
<template v-else-if="stats">
|
||||
<!-- Row 1: Main Stats Cards -->
|
||||
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<!-- 30-Day Total Cost -->
|
||||
<div
|
||||
class="card border-emerald-200 bg-gradient-to-br from-emerald-50 to-white p-4 dark:border-emerald-800/30 dark:from-emerald-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.totalCost')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-emerald-100 p-1.5 dark:bg-emerald-900/30">
|
||||
<Icon name="dollar" size="sm" class="text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${{ formatCost(stats.summary.total_cost) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.stats.accumulatedCost') }}
|
||||
<span class="text-gray-400 dark:text-gray-500">
|
||||
({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.total_user_cost) }} ·
|
||||
{{ t('admin.accounts.stats.standardCost') }}: ${{
|
||||
formatCost(stats.summary.total_standard_cost)
|
||||
}})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 30-Day Total Requests -->
|
||||
<div
|
||||
class="card border-blue-200 bg-gradient-to-br from-blue-50 to-white p-4 dark:border-blue-800/30 dark:from-blue-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.totalRequests')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-blue-100 p-1.5 dark:bg-blue-900/30">
|
||||
<Icon name="bolt" size="sm" class="text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{{ formatNumber(stats.summary.total_requests) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.stats.totalCalls') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Daily Average Cost -->
|
||||
<div
|
||||
class="card border-amber-200 bg-gradient-to-br from-amber-50 to-white p-4 dark:border-amber-800/30 dark:from-amber-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.avgDailyCost')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-amber-100 p-1.5 dark:bg-amber-900/30">
|
||||
<Icon
|
||||
name="calculator"
|
||||
size="sm"
|
||||
class="text-amber-600 dark:text-amber-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${{ formatCost(stats.summary.avg_daily_cost) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{
|
||||
t('admin.accounts.stats.basedOnActualDays', {
|
||||
days: stats.summary.actual_days_used
|
||||
})
|
||||
}}
|
||||
<span class="text-gray-400 dark:text-gray-500">
|
||||
({{ t('usage.userBilled') }}: ${{ formatCost(stats.summary.avg_daily_user_cost) }})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Daily Average Requests -->
|
||||
<div
|
||||
class="card border-purple-200 bg-gradient-to-br from-purple-50 to-white p-4 dark:border-purple-800/30 dark:from-purple-900/10 dark:to-dark-700"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.avgDailyRequests')
|
||||
}}</span>
|
||||
<div class="rounded-lg bg-purple-100 p-1.5 dark:bg-purple-900/30">
|
||||
<svg
|
||||
class="h-4 w-4 text-purple-600 dark:text-purple-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{{ formatNumber(Math.round(stats.summary.avg_daily_requests)) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.accounts.stats.avgDailyUsage') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Today, Highest Cost, Highest Requests -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<!-- Today Overview -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-cyan-100 p-1.5 dark:bg-cyan-900/30">
|
||||
<Icon name="clock" size="sm" class="text-cyan-600 dark:text-cyan-400" />
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.todayOverview')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.today?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.today?.user_cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.requests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatNumber(stats.summary.today?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.tokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(stats.summary.today?.tokens || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highest Cost Day -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-orange-100 p-1.5 dark:bg-orange-900/30">
|
||||
<Icon name="fire" size="sm" class="text-orange-600 dark:text-orange-400" />
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.highestCostDay')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.date')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
stats.summary.highest_cost_day?.label || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-orange-600 dark:text-orange-400"
|
||||
>${{ formatCost(stats.summary.highest_cost_day?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.highest_cost_day?.user_cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.requests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatNumber(stats.summary.highest_cost_day?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highest Request Day -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-indigo-100 p-1.5 dark:bg-indigo-900/30">
|
||||
<Icon
|
||||
name="trendingUp"
|
||||
size="sm"
|
||||
class="text-indigo-600 dark:text-indigo-400"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.highestRequestDay')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.date')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
stats.summary.highest_request_day?.label || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.requests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">{{
|
||||
formatNumber(stats.summary.highest_request_day?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.highest_request_day?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.highest_request_day?.user_cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Token Stats -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<!-- Accumulated Tokens -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-teal-100 p-1.5 dark:bg-teal-900/30">
|
||||
<Icon name="cube" size="sm" class="text-teal-600 dark:text-teal-400" />
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.accumulatedTokens')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.totalTokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(stats.summary.total_tokens)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.dailyAvgTokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(Math.round(stats.summary.avg_daily_tokens))
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-rose-100 p-1.5 dark:bg-rose-900/30">
|
||||
<Icon name="bolt" size="sm" class="text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.performance')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.avgResponseTime')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatDuration(stats.summary.avg_duration_ms)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.daysActive')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>{{ stats.summary.actual_days_used }} / {{ stats.summary.days }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="rounded-lg bg-lime-100 p-1.5 dark:bg-lime-900/30">
|
||||
<Icon
|
||||
name="clipboard"
|
||||
size="sm"
|
||||
class="text-lime-600 dark:text-lime-400"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
t('admin.accounts.stats.recentActivity')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.todayRequests')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatNumber(stats.summary.today?.requests || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.todayTokens')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{
|
||||
formatTokens(stats.summary.today?.tokens || 0)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">{{
|
||||
t('admin.accounts.stats.todayCost')
|
||||
}}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white"
|
||||
>${{ formatCost(stats.summary.today?.cost || 0) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Trend Chart -->
|
||||
<div class="card p-4">
|
||||
<h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('admin.accounts.stats.usageTrend') }}
|
||||
</h3>
|
||||
<div class="h-64">
|
||||
<Line v-if="trendChartData" :data="trendChartData" :options="lineChartOptions" />
|
||||
<div
|
||||
v-else
|
||||
class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.dashboard.noDataAvailable') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Distribution -->
|
||||
<ModelDistributionChart :model-stats="stats.models" :loading="false" />
|
||||
|
||||
<EndpointDistributionChart
|
||||
:endpoint-stats="stats.endpoints || []"
|
||||
:loading="false"
|
||||
:title="t('usage.inboundEndpoint')"
|
||||
/>
|
||||
|
||||
<EndpointDistributionChart
|
||||
:endpoint-stats="stats.upstream_endpoints || []"
|
||||
:loading="false"
|
||||
:title="t('usage.upstreamEndpoint')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- No Data State -->
|
||||
<div
|
||||
v-else-if="!loading"
|
||||
class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<Icon name="chartBar" size="xl" class="mb-4 h-12 w-12" />
|
||||
<p class="text-sm">{{ t('admin.accounts.stats.noData') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
@click="handleClose"
|
||||
class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
} from 'chart.js'
|
||||
import { Line } from 'vue-chartjs'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
|
||||
import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
|
||||
import EndpointDistributionChart from '@/components/charts/EndpointDistributionChart.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { Account, AccountUsageStatsResponse } from '@/types'
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
account: Account | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const loading = ref(false)
|
||||
const stats = ref<AccountUsageStatsResponse | null>(null)
|
||||
|
||||
// Dark mode detection
|
||||
const isDarkMode = computed(() => {
|
||||
return document.documentElement.classList.contains('dark')
|
||||
})
|
||||
|
||||
// Chart colors
|
||||
const chartColors = computed(() => ({
|
||||
text: isDarkMode.value ? '#e5e7eb' : '#374151',
|
||||
grid: isDarkMode.value ? '#374151' : '#e5e7eb'
|
||||
}))
|
||||
|
||||
// Line chart data
|
||||
const trendChartData = computed(() => {
|
||||
if (!stats.value?.history?.length) return null
|
||||
|
||||
return {
|
||||
labels: stats.value.history.map((h) => h.label),
|
||||
datasets: [
|
||||
{
|
||||
label: t('usage.accountBilled') + ' (USD)',
|
||||
data: stats.value.history.map((h) => h.actual_cost),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: t('usage.userBilled') + ' (USD)',
|
||||
data: stats.value.history.map((h) => h.user_cost),
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.08)',
|
||||
fill: false,
|
||||
tension: 0.3,
|
||||
borderDash: [5, 5],
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: t('admin.accounts.stats.requests'),
|
||||
data: stats.value.history.map((h) => h.requests),
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: 'rgba(249, 115, 22, 0.1)',
|
||||
fill: false,
|
||||
tension: 0.3,
|
||||
yAxisID: 'y1'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// Line chart options with dual Y-axis
|
||||
const lineChartOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index' as const
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top' as const,
|
||||
labels: {
|
||||
color: chartColors.value.text,
|
||||
usePointStyle: true,
|
||||
pointStyle: 'circle',
|
||||
padding: 15,
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: any) => {
|
||||
const label = context.dataset.label || ''
|
||||
const value = context.raw
|
||||
if (label.includes('USD')) {
|
||||
return `${label}: $${formatCost(value)}`
|
||||
}
|
||||
return `${label}: ${formatNumber(value)}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: chartColors.value.grid
|
||||
},
|
||||
ticks: {
|
||||
color: chartColors.value.text,
|
||||
font: {
|
||||
size: 10
|
||||
},
|
||||
maxRotation: 45,
|
||||
minRotation: 0
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear' as const,
|
||||
display: true,
|
||||
position: 'left' as const,
|
||||
grid: {
|
||||
color: chartColors.value.grid
|
||||
},
|
||||
ticks: {
|
||||
color: '#3b82f6',
|
||||
font: {
|
||||
size: 10
|
||||
},
|
||||
callback: (value: string | number) => '$' + formatCost(Number(value))
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: t('usage.accountBilled') + ' (USD)',
|
||||
color: '#3b82f6',
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear' as const,
|
||||
display: true,
|
||||
position: 'right' as const,
|
||||
grid: {
|
||||
drawOnChartArea: false
|
||||
},
|
||||
ticks: {
|
||||
color: '#f97316',
|
||||
font: {
|
||||
size: 10
|
||||
},
|
||||
callback: (value: string | number) => formatNumber(Number(value))
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: t('admin.accounts.stats.requests'),
|
||||
color: '#f97316',
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
// Load stats when modal opens
|
||||
watch(
|
||||
() => props.show,
|
||||
async (newVal) => {
|
||||
if (newVal && props.account) {
|
||||
await loadStats()
|
||||
} else {
|
||||
stats.value = null
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const loadStats = async () => {
|
||||
if (!props.account) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
stats.value = await adminAPI.accounts.getStats(props.account.id, 30)
|
||||
} catch (error) {
|
||||
console.error('Failed to load account stats:', error)
|
||||
stats.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// Format helpers
|
||||
const formatCost = (value: number): string => {
|
||||
if (value >= 1000) {
|
||||
return (value / 1000).toFixed(2) + 'K'
|
||||
} else if (value >= 1) {
|
||||
return value.toFixed(2)
|
||||
} else if (value >= 0.01) {
|
||||
return value.toFixed(3)
|
||||
}
|
||||
return value.toFixed(4)
|
||||
}
|
||||
|
||||
const formatNumber = (value: number): string => {
|
||||
if (value >= 1_000_000) {
|
||||
return (value / 1_000_000).toFixed(2) + 'M'
|
||||
} else if (value >= 1_000) {
|
||||
return (value / 1_000).toFixed(2) + 'K'
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatTokens = (value: number): string => {
|
||||
if (value >= 1_000_000_000) {
|
||||
return `${(value / 1_000_000_000).toFixed(2)}B`
|
||||
} else if (value >= 1_000_000) {
|
||||
return `${(value / 1_000_000).toFixed(2)}M`
|
||||
} else if (value >= 1_000) {
|
||||
return `${(value / 1_000).toFixed(2)}K`
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatDuration = (ms: number): string => {
|
||||
if (ms >= 1000) {
|
||||
return `${(ms / 1000).toFixed(2)}s`
|
||||
}
|
||||
return `${Math.round(ms)}ms`
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<slot name="before"></slot>
|
||||
<button @click="$emit('refresh')" :disabled="loading" class="btn btn-secondary">
|
||||
<Icon name="refresh" size="md" :class="[loading ? 'animate-spin' : '']" />
|
||||
</button>
|
||||
<slot name="after"></slot>
|
||||
<button @click="$emit('sync')" class="btn btn-secondary">{{ t('admin.accounts.syncFromCrs') }}</button>
|
||||
<slot name="beforeCreate"></slot>
|
||||
<button @click="$emit('create')" class="btn btn-primary">{{ t('admin.accounts.createAccount') }}</button>
|
||||
<slot name="afterCreate"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
defineProps(['loading'])
|
||||
defineEmits(['refresh', 'sync', 'create'])
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<SearchInput
|
||||
:model-value="searchQuery"
|
||||
:placeholder="t('admin.accounts.searchAccounts')"
|
||||
class="w-full sm:w-64"
|
||||
@update:model-value="$emit('update:searchQuery', $event)"
|
||||
@search="$emit('change')"
|
||||
/>
|
||||
<Select :model-value="filters.platform" class="w-40" :options="pOpts" @update:model-value="updatePlatform" @change="$emit('change')" />
|
||||
<Select :model-value="filters.type" class="w-40" :options="tOpts" @update:model-value="updateType" @change="$emit('change')" />
|
||||
<Select :model-value="filters.status" class="w-40" :options="sOpts" @update:model-value="updateStatus" @change="$emit('change')" />
|
||||
<Select :model-value="filters.group" class="w-40" :options="gOpts" @update:model-value="updateGroup" @change="$emit('change')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'; import { useI18n } from 'vue-i18n'; import Select from '@/components/common/Select.vue'; import SearchInput from '@/components/common/SearchInput.vue'
|
||||
import type { AdminGroup } from '@/types'
|
||||
const props = defineProps<{ searchQuery: string; filters: Record<string, any>; groups?: AdminGroup[] }>()
|
||||
const emit = defineEmits(['update:searchQuery', 'update:filters', 'change']); const { t } = useI18n()
|
||||
const updatePlatform = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, platform: value }) }
|
||||
const updateType = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, type: value }) }
|
||||
const updateStatus = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, status: value }) }
|
||||
const updateGroup = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, group: value }) }
|
||||
const pOpts = computed(() => [{ value: '', label: t('admin.accounts.allPlatforms') }, { value: 'anthropic', label: 'Anthropic' }, { value: 'openai', label: 'OpenAI' }, { value: 'gemini', label: 'Gemini' }, { value: 'antigravity', label: 'Antigravity' }, { value: 'sora', label: 'Sora' }])
|
||||
const tOpts = computed(() => [{ value: '', label: t('admin.accounts.allTypes') }, { value: 'oauth', label: t('admin.accounts.oauthType') }, { value: 'setup-token', label: t('admin.accounts.setupToken') }, { value: 'apikey', label: t('admin.accounts.apiKey') }, { value: 'bedrock', label: 'AWS Bedrock' }])
|
||||
const sOpts = computed(() => [{ value: '', label: t('admin.accounts.allStatus') }, { value: 'active', label: t('admin.accounts.status.active') }, { value: 'inactive', label: t('admin.accounts.status.inactive') }, { value: 'error', label: t('admin.accounts.status.error') }, { value: 'rate_limited', label: t('admin.accounts.status.rateLimited') }, { value: 'temp_unschedulable', label: t('admin.accounts.status.tempUnschedulable') }])
|
||||
const gOpts = computed(() => [{ value: '', label: t('admin.accounts.allGroups') }, ...(props.groups || []).map(g => ({ value: String(g.id), label: g.name }))])
|
||||
</script>
|
||||
@@ -0,0 +1,521 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.testAccountConnection')"
|
||||
width="normal"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<!-- Account Info Card -->
|
||||
<div
|
||||
v-if="account"
|
||||
class="flex items-center justify-between rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100 p-3 dark:border-dark-500 dark:from-dark-700 dark:to-dark-600"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-primary-600"
|
||||
>
|
||||
<Icon name="play" size="md" class="text-white" :stroke-width="2" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ account.name }}</div>
|
||||
<div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span
|
||||
class="rounded bg-gray-200 px-1.5 py-0.5 text-[10px] font-medium uppercase dark:bg-dark-500"
|
||||
>
|
||||
{{ account.type }}
|
||||
</span>
|
||||
<span>{{ t('admin.accounts.account') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
:class="[
|
||||
'rounded-full px-2.5 py-1 text-xs font-semibold',
|
||||
account.status === 'active'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
|
||||
]"
|
||||
>
|
||||
{{ account.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSoraAccount" class="space-y-1.5">
|
||||
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.accounts.selectTestModel') }}
|
||||
</label>
|
||||
<Select
|
||||
v-model="selectedModelId"
|
||||
:options="availableModels"
|
||||
:disabled="loadingModels || status === 'connecting'"
|
||||
value-key="id"
|
||||
label-key="display_name"
|
||||
:placeholder="loadingModels ? t('common.loading') + '...' : t('admin.accounts.selectTestModel')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
|
||||
>
|
||||
{{ t('admin.accounts.soraTestHint') }}
|
||||
</div>
|
||||
|
||||
<div v-if="supportsGeminiImageTest" class="space-y-1.5">
|
||||
<TextArea
|
||||
v-model="testPrompt"
|
||||
:label="t('admin.accounts.geminiImagePromptLabel')"
|
||||
:placeholder="t('admin.accounts.geminiImagePromptPlaceholder')"
|
||||
:hint="t('admin.accounts.geminiImageTestHint')"
|
||||
:disabled="status === 'connecting'"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Output -->
|
||||
<div class="group relative">
|
||||
<div
|
||||
ref="terminalRef"
|
||||
class="max-h-[240px] min-h-[120px] overflow-y-auto rounded-xl border border-gray-700 bg-gray-900 p-4 font-mono text-sm dark:border-gray-800 dark:bg-black"
|
||||
>
|
||||
<!-- Status Line -->
|
||||
<div v-if="status === 'idle'" class="flex items-center gap-2 text-gray-500">
|
||||
<Icon name="play" size="sm" :stroke-width="2" />
|
||||
<span>{{ t('admin.accounts.readyToTest') }}</span>
|
||||
</div>
|
||||
<div v-else-if="status === 'connecting'" class="flex items-center gap-2 text-yellow-400">
|
||||
<Icon name="refresh" size="sm" class="animate-spin" :stroke-width="2" />
|
||||
<span>{{ t('admin.accounts.connectingToApi') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Output Lines -->
|
||||
<div v-for="(line, index) in outputLines" :key="index" :class="line.class">
|
||||
{{ line.text }}
|
||||
</div>
|
||||
|
||||
<!-- Streaming Content -->
|
||||
<div v-if="streamingContent" class="text-green-400">
|
||||
{{ streamingContent }}<span class="animate-pulse">_</span>
|
||||
</div>
|
||||
|
||||
<!-- Result Status -->
|
||||
<div
|
||||
v-if="status === 'success'"
|
||||
class="mt-3 flex items-center gap-2 border-t border-gray-700 pt-3 text-green-400"
|
||||
>
|
||||
<Icon name="check" size="sm" :stroke-width="2" />
|
||||
<span>{{ t('admin.accounts.testCompleted') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="status === 'error'"
|
||||
class="mt-3 flex items-center gap-2 border-t border-gray-700 pt-3 text-red-400"
|
||||
>
|
||||
<Icon name="x" size="sm" :stroke-width="2" />
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copy Button -->
|
||||
<button
|
||||
v-if="outputLines.length > 0"
|
||||
@click="copyOutput"
|
||||
class="absolute right-2 top-2 rounded-lg bg-gray-800/80 p-1.5 text-gray-400 opacity-0 transition-all hover:bg-gray-700 hover:text-white group-hover:opacity-100"
|
||||
:title="t('admin.accounts.copyOutput')"
|
||||
>
|
||||
<Icon name="link" size="sm" :stroke-width="2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="generatedImages.length > 0" class="space-y-2">
|
||||
<div class="text-xs font-medium text-gray-600 dark:text-gray-300">
|
||||
{{ t('admin.accounts.geminiImagePreview') }}
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<a
|
||||
v-for="(image, index) in generatedImages"
|
||||
:key="`${image.url}-${index}`"
|
||||
:href="image.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition hover:border-primary-300 hover:shadow-md dark:border-dark-500 dark:bg-dark-700"
|
||||
>
|
||||
<img :src="image.url" :alt="`gemini-test-image-${index + 1}`" class="h-48 w-full object-cover" />
|
||||
<div class="border-t border-gray-100 px-3 py-2 text-xs text-gray-500 dark:border-dark-500 dark:text-gray-300">
|
||||
{{ image.mimeType || 'image/*' }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test Info -->
|
||||
<div class="flex items-center justify-between px-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="grid" size="sm" :stroke-width="2" />
|
||||
{{ isSoraAccount ? t('admin.accounts.soraTestTarget') : t('admin.accounts.testModel') }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="chat" size="sm" :stroke-width="2" />
|
||||
{{
|
||||
isSoraAccount
|
||||
? t('admin.accounts.soraTestMode')
|
||||
: supportsGeminiImageTest
|
||||
? t('admin.accounts.geminiImageTestMode')
|
||||
: t('admin.accounts.testPrompt')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
@click="handleClose"
|
||||
class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500"
|
||||
:disabled="status === 'connecting'"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
<button
|
||||
@click="startTest"
|
||||
:disabled="status === 'connecting' || (!isSoraAccount && !selectedModelId)"
|
||||
:class="[
|
||||
'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all',
|
||||
status === 'connecting' || (!isSoraAccount && !selectedModelId)
|
||||
? 'cursor-not-allowed bg-primary-400 text-white'
|
||||
: status === 'success'
|
||||
? 'bg-green-500 text-white hover:bg-green-600'
|
||||
: status === 'error'
|
||||
? 'bg-orange-500 text-white hover:bg-orange-600'
|
||||
: 'bg-primary-500 text-white hover:bg-primary-600'
|
||||
]"
|
||||
>
|
||||
<Icon
|
||||
v-if="status === 'connecting'"
|
||||
name="refresh"
|
||||
size="sm"
|
||||
class="animate-spin"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
<Icon v-else-if="status === 'idle'" name="play" size="sm" :stroke-width="2" />
|
||||
<Icon v-else name="refresh" size="sm" :stroke-width="2" />
|
||||
<span>
|
||||
{{
|
||||
status === 'connecting'
|
||||
? t('admin.accounts.testing')
|
||||
: status === 'idle'
|
||||
? t('admin.accounts.startTest')
|
||||
: t('admin.accounts.retry')
|
||||
}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Select from '@/components/common/Select.vue'
|
||||
import TextArea from '@/components/common/TextArea.vue'
|
||||
import { Icon } from '@/components/icons'
|
||||
import { useClipboard } from '@/composables/useClipboard'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { Account, ClaudeModel } from '@/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { copyToClipboard } = useClipboard()
|
||||
|
||||
interface OutputLine {
|
||||
text: string
|
||||
class: string
|
||||
}
|
||||
|
||||
interface PreviewImage {
|
||||
url: string
|
||||
mimeType?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
account: Account | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const terminalRef = ref<HTMLElement | null>(null)
|
||||
const status = ref<'idle' | 'connecting' | 'success' | 'error'>('idle')
|
||||
const outputLines = ref<OutputLine[]>([])
|
||||
const streamingContent = ref('')
|
||||
const errorMessage = ref('')
|
||||
const availableModels = ref<ClaudeModel[]>([])
|
||||
const selectedModelId = ref('')
|
||||
const testPrompt = ref('')
|
||||
const loadingModels = ref(false)
|
||||
let eventSource: EventSource | null = null
|
||||
const isSoraAccount = computed(() => props.account?.platform === 'sora')
|
||||
const generatedImages = ref<PreviewImage[]>([])
|
||||
const prioritizedGeminiModels = ['gemini-3.1-flash-image', 'gemini-2.5-flash-image', 'gemini-2.5-flash', 'gemini-2.5-pro', 'gemini-3-flash-preview', 'gemini-3-pro-preview', 'gemini-2.0-flash']
|
||||
const supportsGeminiImageTest = computed(() => {
|
||||
if (isSoraAccount.value) return false
|
||||
const modelID = selectedModelId.value.toLowerCase()
|
||||
if (!modelID.startsWith('gemini-') || !modelID.includes('-image')) return false
|
||||
|
||||
return props.account?.platform === 'gemini' || (props.account?.platform === 'antigravity' && props.account?.type === 'apikey')
|
||||
})
|
||||
|
||||
const sortTestModels = (models: ClaudeModel[]) => {
|
||||
const priorityMap = new Map(prioritizedGeminiModels.map((id, index) => [id, index]))
|
||||
|
||||
return [...models].sort((a, b) => {
|
||||
const aPriority = priorityMap.get(a.id) ?? Number.MAX_SAFE_INTEGER
|
||||
const bPriority = priorityMap.get(b.id) ?? Number.MAX_SAFE_INTEGER
|
||||
if (aPriority !== bPriority) return aPriority - bPriority
|
||||
return 0
|
||||
})
|
||||
}
|
||||
|
||||
// Load available models when modal opens
|
||||
watch(
|
||||
() => props.show,
|
||||
async (newVal) => {
|
||||
if (newVal && props.account) {
|
||||
testPrompt.value = ''
|
||||
resetState()
|
||||
await loadAvailableModels()
|
||||
} else {
|
||||
closeEventSource()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(selectedModelId, () => {
|
||||
if (supportsGeminiImageTest.value && !testPrompt.value.trim()) {
|
||||
testPrompt.value = t('admin.accounts.geminiImagePromptDefault')
|
||||
}
|
||||
})
|
||||
|
||||
const loadAvailableModels = async () => {
|
||||
if (!props.account) return
|
||||
if (props.account.platform === 'sora') {
|
||||
availableModels.value = []
|
||||
selectedModelId.value = ''
|
||||
loadingModels.value = false
|
||||
return
|
||||
}
|
||||
|
||||
loadingModels.value = true
|
||||
selectedModelId.value = '' // Reset selection before loading
|
||||
try {
|
||||
const models = await adminAPI.accounts.getAvailableModels(props.account.id)
|
||||
availableModels.value = props.account.platform === 'gemini' || props.account.platform === 'antigravity'
|
||||
? sortTestModels(models)
|
||||
: models
|
||||
// Default selection by platform
|
||||
if (availableModels.value.length > 0) {
|
||||
if (props.account.platform === 'gemini') {
|
||||
selectedModelId.value = availableModels.value[0].id
|
||||
} else {
|
||||
// Try to select Sonnet as default, otherwise use first model
|
||||
const sonnetModel = availableModels.value.find((m) => m.id.includes('sonnet'))
|
||||
selectedModelId.value = sonnetModel?.id || availableModels.value[0].id
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load available models:', error)
|
||||
// Fallback to empty list
|
||||
availableModels.value = []
|
||||
selectedModelId.value = ''
|
||||
} finally {
|
||||
loadingModels.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetState = () => {
|
||||
status.value = 'idle'
|
||||
outputLines.value = []
|
||||
streamingContent.value = ''
|
||||
errorMessage.value = ''
|
||||
generatedImages.value = []
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
// 防止在连接测试进行中关闭对话框
|
||||
if (status.value === 'connecting') {
|
||||
return
|
||||
}
|
||||
closeEventSource()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const closeEventSource = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
eventSource = null
|
||||
}
|
||||
}
|
||||
|
||||
const addLine = (text: string, className: string = 'text-gray-300') => {
|
||||
outputLines.value.push({ text, class: className })
|
||||
scrollToBottom()
|
||||
}
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick()
|
||||
if (terminalRef.value) {
|
||||
terminalRef.value.scrollTop = terminalRef.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
const startTest = async () => {
|
||||
if (!props.account || (!isSoraAccount.value && !selectedModelId.value)) return
|
||||
|
||||
resetState()
|
||||
status.value = 'connecting'
|
||||
addLine(t('admin.accounts.startingTestForAccount', { name: props.account.name }), 'text-blue-400')
|
||||
addLine(t('admin.accounts.testAccountTypeLabel', { type: props.account.type }), 'text-gray-400')
|
||||
addLine('', 'text-gray-300')
|
||||
|
||||
closeEventSource()
|
||||
|
||||
try {
|
||||
// Create EventSource for SSE
|
||||
const url = `/api/v1/admin/accounts/${props.account.id}/test`
|
||||
|
||||
// Use fetch with streaming for SSE since EventSource doesn't support POST
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(
|
||||
isSoraAccount.value
|
||||
? {}
|
||||
: {
|
||||
model_id: selectedModelId.value,
|
||||
prompt: supportsGeminiImageTest.value ? testPrompt.value.trim() : ''
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const reader = response.body?.getReader()
|
||||
if (!reader) {
|
||||
throw new Error('No response body')
|
||||
}
|
||||
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() || ''
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
const jsonStr = line.slice(6).trim()
|
||||
if (jsonStr) {
|
||||
try {
|
||||
const event = JSON.parse(jsonStr)
|
||||
handleEvent(event)
|
||||
} catch (e) {
|
||||
console.error('Failed to parse SSE event:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
status.value = 'error'
|
||||
errorMessage.value = error.message || 'Unknown error'
|
||||
addLine(`Error: ${errorMessage.value}`, 'text-red-400')
|
||||
}
|
||||
}
|
||||
|
||||
const handleEvent = (event: {
|
||||
type: string
|
||||
text?: string
|
||||
model?: string
|
||||
success?: boolean
|
||||
error?: string
|
||||
image_url?: string
|
||||
mime_type?: string
|
||||
}) => {
|
||||
switch (event.type) {
|
||||
case 'test_start':
|
||||
addLine(t('admin.accounts.connectedToApi'), 'text-green-400')
|
||||
if (event.model) {
|
||||
addLine(t('admin.accounts.usingModel', { model: event.model }), 'text-cyan-400')
|
||||
}
|
||||
addLine(
|
||||
isSoraAccount.value
|
||||
? t('admin.accounts.soraTestingFlow')
|
||||
: supportsGeminiImageTest.value
|
||||
? t('admin.accounts.sendingGeminiImageRequest')
|
||||
: t('admin.accounts.sendingTestMessage'),
|
||||
'text-gray-400'
|
||||
)
|
||||
addLine('', 'text-gray-300')
|
||||
addLine(t('admin.accounts.response'), 'text-yellow-400')
|
||||
break
|
||||
|
||||
case 'content':
|
||||
if (event.text) {
|
||||
streamingContent.value += event.text
|
||||
scrollToBottom()
|
||||
}
|
||||
break
|
||||
|
||||
case 'image':
|
||||
if (event.image_url) {
|
||||
generatedImages.value.push({
|
||||
url: event.image_url,
|
||||
mimeType: event.mime_type
|
||||
})
|
||||
addLine(t('admin.accounts.geminiImageReceived', { count: generatedImages.value.length }), 'text-purple-300')
|
||||
}
|
||||
break
|
||||
|
||||
case 'test_complete':
|
||||
// Move streaming content to output lines
|
||||
if (streamingContent.value) {
|
||||
addLine(streamingContent.value, 'text-green-300')
|
||||
streamingContent.value = ''
|
||||
}
|
||||
if (event.success) {
|
||||
status.value = 'success'
|
||||
} else {
|
||||
status.value = 'error'
|
||||
errorMessage.value = event.error || 'Test failed'
|
||||
}
|
||||
break
|
||||
|
||||
case 'error':
|
||||
status.value = 'error'
|
||||
errorMessage.value = event.error || 'Unknown error'
|
||||
if (streamingContent.value) {
|
||||
addLine(streamingContent.value, 'text-green-300')
|
||||
streamingContent.value = ''
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const copyOutput = () => {
|
||||
const text = outputLines.value.map((l) => l.text).join('\n')
|
||||
copyToClipboard(text, t('admin.accounts.outputCopied'))
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.dataImportTitle')"
|
||||
width="normal"
|
||||
close-on-click-outside
|
||||
@close="handleClose"
|
||||
>
|
||||
<form id="import-data-form" class="space-y-4" @submit.prevent="handleImport">
|
||||
<div class="text-sm text-gray-600 dark:text-dark-300">
|
||||
{{ t('admin.accounts.dataImportHint') }}
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-600 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-400"
|
||||
>
|
||||
{{ t('admin.accounts.dataImportWarning') }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.accounts.dataImportFile') }}</label>
|
||||
<div
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-3 dark:border-dark-600 dark:bg-dark-800"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="truncate text-sm text-gray-700 dark:text-dark-200">
|
||||
{{ fileName || t('admin.accounts.dataImportSelectFile') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-dark-400">JSON (.json)</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary shrink-0" @click="openFilePicker">
|
||||
{{ t('common.chooseFile') }}
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
class="hidden"
|
||||
accept="application/json,.json"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="result"
|
||||
class="space-y-2 rounded-xl border border-gray-200 p-4 dark:border-dark-700"
|
||||
>
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.accounts.dataImportResult') }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 dark:text-dark-300">
|
||||
{{ t('admin.accounts.dataImportResultSummary', result) }}
|
||||
</div>
|
||||
|
||||
<div v-if="errorItems.length" class="mt-2">
|
||||
<div class="text-sm font-medium text-red-600 dark:text-red-400">
|
||||
{{ t('admin.accounts.dataImportErrors') }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-2 max-h-48 overflow-auto rounded-lg bg-gray-50 p-3 font-mono text-xs dark:bg-dark-800"
|
||||
>
|
||||
<div v-for="(item, idx) in errorItems" :key="idx" class="whitespace-pre-wrap">
|
||||
{{ item.kind }} {{ item.name || item.proxy_key || '-' }} — {{ item.message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="btn btn-secondary" type="button" :disabled="importing" @click="handleClose">
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
form="import-data-form"
|
||||
:disabled="importing"
|
||||
>
|
||||
{{ importing ? t('admin.accounts.dataImporting') : t('admin.accounts.dataImportButton') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import type { AdminDataImportResult } from '@/types'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
(e: 'imported'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const importing = ref(false)
|
||||
const file = ref<File | null>(null)
|
||||
const result = ref<AdminDataImportResult | null>(null)
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const fileName = computed(() => file.value?.name || '')
|
||||
|
||||
const errorItems = computed(() => result.value?.errors || [])
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(open) => {
|
||||
if (open) {
|
||||
file.value = null
|
||||
result.value = null
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const openFilePicker = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleFileChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
file.value = target.files?.[0] || null
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
if (importing.value) return
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const readFileAsText = async (sourceFile: File): Promise<string> => {
|
||||
if (typeof sourceFile.text === 'function') {
|
||||
return sourceFile.text()
|
||||
}
|
||||
|
||||
if (typeof sourceFile.arrayBuffer === 'function') {
|
||||
const buffer = await sourceFile.arrayBuffer()
|
||||
return new TextDecoder().decode(buffer)
|
||||
}
|
||||
|
||||
return await new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(String(reader.result ?? ''))
|
||||
reader.onerror = () => reject(reader.error || new Error('Failed to read file'))
|
||||
reader.readAsText(sourceFile)
|
||||
})
|
||||
}
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!file.value) {
|
||||
appStore.showError(t('admin.accounts.dataImportSelectFile'))
|
||||
return
|
||||
}
|
||||
|
||||
importing.value = true
|
||||
try {
|
||||
const text = await readFileAsText(file.value)
|
||||
const dataPayload = JSON.parse(text)
|
||||
|
||||
const res = await adminAPI.accounts.importData({
|
||||
data: dataPayload,
|
||||
skip_default_group_bind: true
|
||||
})
|
||||
|
||||
result.value = res
|
||||
|
||||
const msgParams: Record<string, unknown> = {
|
||||
account_created: res.account_created,
|
||||
account_failed: res.account_failed,
|
||||
proxy_created: res.proxy_created,
|
||||
proxy_reused: res.proxy_reused,
|
||||
proxy_failed: res.proxy_failed,
|
||||
}
|
||||
if (res.account_failed > 0 || res.proxy_failed > 0) {
|
||||
appStore.showError(t('admin.accounts.dataImportCompletedWithErrors', msgParams))
|
||||
} else {
|
||||
appStore.showSuccess(t('admin.accounts.dataImportSuccess', msgParams))
|
||||
emit('imported')
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error instanceof SyntaxError) {
|
||||
appStore.showError(t('admin.accounts.dataImportParseFailed'))
|
||||
} else {
|
||||
appStore.showError(error?.message || t('admin.accounts.dataImportFailed'))
|
||||
}
|
||||
} finally {
|
||||
importing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,548 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.accounts.reAuthorizeAccount')"
|
||||
width="normal"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div v-if="account" class="space-y-4">
|
||||
<!-- Account Info -->
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
:class="[
|
||||
'flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br',
|
||||
isOpenAILike
|
||||
? 'from-green-500 to-green-600'
|
||||
: isGemini
|
||||
? 'from-blue-500 to-blue-600'
|
||||
: isAntigravity
|
||||
? 'from-purple-500 to-purple-600'
|
||||
: 'from-orange-500 to-orange-600'
|
||||
]"
|
||||
>
|
||||
<Icon name="sparkles" size="md" class="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="block font-semibold text-gray-900 dark:text-white">{{
|
||||
account.name
|
||||
}}</span>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{
|
||||
isOpenAI
|
||||
? t('admin.accounts.openaiAccount')
|
||||
: isSora
|
||||
? t('admin.accounts.soraAccount')
|
||||
: isGemini
|
||||
? t('admin.accounts.geminiAccount')
|
||||
: isAntigravity
|
||||
? t('admin.accounts.antigravityAccount')
|
||||
: t('admin.accounts.claudeCodeAccount')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Method Selection (Claude only) -->
|
||||
<fieldset v-if="isAnthropic" class="border-0 p-0">
|
||||
<legend class="input-label">{{ t('admin.accounts.oauth.authMethod') }}</legend>
|
||||
<div class="mt-2 flex gap-4">
|
||||
<label class="flex cursor-pointer items-center">
|
||||
<input
|
||||
v-model="addMethod"
|
||||
type="radio"
|
||||
value="oauth"
|
||||
class="mr-2 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{
|
||||
t('admin.accounts.types.oauth')
|
||||
}}</span>
|
||||
</label>
|
||||
<label class="flex cursor-pointer items-center">
|
||||
<input
|
||||
v-model="addMethod"
|
||||
type="radio"
|
||||
value="setup-token"
|
||||
class="mr-2 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{
|
||||
t('admin.accounts.setupTokenLongLived')
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Gemini OAuth Type Display (read-only) -->
|
||||
<div v-if="isGemini" class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700">
|
||||
<div class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.accounts.oauth.gemini.oauthTypeLabel') }}
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
:class="[
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
|
||||
geminiOAuthType === 'google_one'
|
||||
? 'bg-purple-500 text-white'
|
||||
: geminiOAuthType === 'code_assist'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-amber-500 text-white'
|
||||
]"
|
||||
>
|
||||
<Icon v-if="geminiOAuthType === 'google_one'" name="user" size="sm" />
|
||||
<Icon v-else-if="geminiOAuthType === 'code_assist'" name="cloud" size="sm" />
|
||||
<Icon v-else name="sparkles" size="sm" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{
|
||||
geminiOAuthType === 'google_one'
|
||||
? 'Google One'
|
||||
: geminiOAuthType === 'code_assist'
|
||||
? t('admin.accounts.gemini.oauthType.builtInTitle')
|
||||
: t('admin.accounts.gemini.oauthType.customTitle')
|
||||
}}
|
||||
</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{
|
||||
geminiOAuthType === 'google_one'
|
||||
? '个人账号'
|
||||
: geminiOAuthType === 'code_assist'
|
||||
? t('admin.accounts.gemini.oauthType.builtInDesc')
|
||||
: t('admin.accounts.gemini.oauthType.customDesc')
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OAuthAuthorizationFlow
|
||||
ref="oauthFlowRef"
|
||||
:add-method="addMethod"
|
||||
:auth-url="currentAuthUrl"
|
||||
:session-id="currentSessionId"
|
||||
:loading="currentLoading"
|
||||
:error="currentError"
|
||||
:show-help="isAnthropic"
|
||||
:show-proxy-warning="isAnthropic"
|
||||
:show-cookie-option="isAnthropic"
|
||||
:allow-multiple="false"
|
||||
:method-label="t('admin.accounts.inputMethod')"
|
||||
:platform="isOpenAI ? 'openai' : isSora ? 'sora' : isGemini ? 'gemini' : isAntigravity ? 'antigravity' : 'anthropic'"
|
||||
:show-project-id="isGemini && geminiOAuthType === 'code_assist'"
|
||||
@generate-url="handleGenerateUrl"
|
||||
@cookie-auth="handleCookieAuth"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div v-if="account" class="flex justify-between gap-3">
|
||||
<button type="button" class="btn btn-secondary" @click="handleClose">
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="isManualInputMethod"
|
||||
type="button"
|
||||
:disabled="!canExchangeCode"
|
||||
class="btn btn-primary"
|
||||
@click="handleExchangeCode"
|
||||
>
|
||||
<svg
|
||||
v-if="currentLoading"
|
||||
class="-ml-1 mr-2 h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{{
|
||||
currentLoading
|
||||
? t('admin.accounts.oauth.verifying')
|
||||
: t('admin.accounts.oauth.completeAuth')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import {
|
||||
useAccountOAuth,
|
||||
type AddMethod,
|
||||
type AuthInputMethod
|
||||
} from '@/composables/useAccountOAuth'
|
||||
import { useOpenAIOAuth } from '@/composables/useOpenAIOAuth'
|
||||
import { useGeminiOAuth } from '@/composables/useGeminiOAuth'
|
||||
import { useAntigravityOAuth } from '@/composables/useAntigravityOAuth'
|
||||
import type { Account } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import OAuthAuthorizationFlow from '@/components/account/OAuthAuthorizationFlow.vue'
|
||||
|
||||
// Type for exposed OAuthAuthorizationFlow component
|
||||
// Note: defineExpose automatically unwraps refs, so we use the unwrapped types
|
||||
interface OAuthFlowExposed {
|
||||
authCode: string
|
||||
oauthState: string
|
||||
projectId: string
|
||||
sessionKey: string
|
||||
inputMethod: AuthInputMethod
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
account: Account | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
reauthorized: [account: Account]
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
// OAuth composables
|
||||
const claudeOAuth = useAccountOAuth()
|
||||
const openaiOAuth = useOpenAIOAuth({ platform: 'openai' })
|
||||
const soraOAuth = useOpenAIOAuth({ platform: 'sora' })
|
||||
const geminiOAuth = useGeminiOAuth()
|
||||
const antigravityOAuth = useAntigravityOAuth()
|
||||
|
||||
// Refs
|
||||
const oauthFlowRef = ref<OAuthFlowExposed | null>(null)
|
||||
|
||||
// State
|
||||
const addMethod = ref<AddMethod>('oauth')
|
||||
const geminiOAuthType = ref<'code_assist' | 'google_one' | 'ai_studio'>('code_assist')
|
||||
|
||||
// Computed - check platform
|
||||
const isOpenAI = computed(() => props.account?.platform === 'openai')
|
||||
const isSora = computed(() => props.account?.platform === 'sora')
|
||||
const isOpenAILike = computed(() => isOpenAI.value || isSora.value)
|
||||
const isGemini = computed(() => props.account?.platform === 'gemini')
|
||||
const isAnthropic = computed(() => props.account?.platform === 'anthropic')
|
||||
const isAntigravity = computed(() => props.account?.platform === 'antigravity')
|
||||
const activeOpenAIOAuth = computed(() => (isSora.value ? soraOAuth : openaiOAuth))
|
||||
|
||||
// Computed - current OAuth state based on platform
|
||||
const currentAuthUrl = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.authUrl.value
|
||||
if (isGemini.value) return geminiOAuth.authUrl.value
|
||||
if (isAntigravity.value) return antigravityOAuth.authUrl.value
|
||||
return claudeOAuth.authUrl.value
|
||||
})
|
||||
const currentSessionId = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.sessionId.value
|
||||
if (isGemini.value) return geminiOAuth.sessionId.value
|
||||
if (isAntigravity.value) return antigravityOAuth.sessionId.value
|
||||
return claudeOAuth.sessionId.value
|
||||
})
|
||||
const currentLoading = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.loading.value
|
||||
if (isGemini.value) return geminiOAuth.loading.value
|
||||
if (isAntigravity.value) return antigravityOAuth.loading.value
|
||||
return claudeOAuth.loading.value
|
||||
})
|
||||
const currentError = computed(() => {
|
||||
if (isOpenAILike.value) return activeOpenAIOAuth.value.error.value
|
||||
if (isGemini.value) return geminiOAuth.error.value
|
||||
if (isAntigravity.value) return antigravityOAuth.error.value
|
||||
return claudeOAuth.error.value
|
||||
})
|
||||
|
||||
// Computed
|
||||
const isManualInputMethod = computed(() => {
|
||||
// OpenAI/Sora/Gemini/Antigravity always use manual input (no cookie auth option)
|
||||
return isOpenAILike.value || isGemini.value || isAntigravity.value || oauthFlowRef.value?.inputMethod === 'manual'
|
||||
})
|
||||
|
||||
const canExchangeCode = computed(() => {
|
||||
const authCode = oauthFlowRef.value?.authCode || ''
|
||||
const sessionId = currentSessionId.value
|
||||
const loading = currentLoading.value
|
||||
return authCode.trim() && sessionId && !loading
|
||||
})
|
||||
|
||||
// Watchers
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
if (newVal && props.account) {
|
||||
// Initialize addMethod based on current account type (Claude only)
|
||||
if (
|
||||
isAnthropic.value &&
|
||||
(props.account.type === 'oauth' || props.account.type === 'setup-token')
|
||||
) {
|
||||
addMethod.value = props.account.type as AddMethod
|
||||
}
|
||||
if (isGemini.value) {
|
||||
const creds = (props.account.credentials || {}) as Record<string, unknown>
|
||||
geminiOAuthType.value =
|
||||
creds.oauth_type === 'google_one'
|
||||
? 'google_one'
|
||||
: creds.oauth_type === 'ai_studio'
|
||||
? 'ai_studio'
|
||||
: 'code_assist'
|
||||
}
|
||||
} else {
|
||||
resetState()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// Methods
|
||||
const resetState = () => {
|
||||
addMethod.value = 'oauth'
|
||||
geminiOAuthType.value = 'code_assist'
|
||||
claudeOAuth.resetState()
|
||||
openaiOAuth.resetState()
|
||||
soraOAuth.resetState()
|
||||
geminiOAuth.resetState()
|
||||
antigravityOAuth.resetState()
|
||||
oauthFlowRef.value?.reset()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleGenerateUrl = async () => {
|
||||
if (!props.account) return
|
||||
|
||||
if (isOpenAILike.value) {
|
||||
await activeOpenAIOAuth.value.generateAuthUrl(props.account.proxy_id)
|
||||
} else if (isGemini.value) {
|
||||
const creds = (props.account.credentials || {}) as Record<string, unknown>
|
||||
const tierId = typeof creds.tier_id === 'string' ? creds.tier_id : undefined
|
||||
const projectId = geminiOAuthType.value === 'code_assist' ? oauthFlowRef.value?.projectId : undefined
|
||||
await geminiOAuth.generateAuthUrl(props.account.proxy_id, projectId, geminiOAuthType.value, tierId)
|
||||
} else if (isAntigravity.value) {
|
||||
await antigravityOAuth.generateAuthUrl(props.account.proxy_id)
|
||||
} else {
|
||||
await claudeOAuth.generateAuthUrl(addMethod.value, props.account.proxy_id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleExchangeCode = async () => {
|
||||
if (!props.account) return
|
||||
|
||||
const authCode = oauthFlowRef.value?.authCode || ''
|
||||
if (!authCode.trim()) return
|
||||
|
||||
if (isOpenAILike.value) {
|
||||
// OpenAI OAuth flow
|
||||
const oauthClient = activeOpenAIOAuth.value
|
||||
const sessionId = oauthClient.sessionId.value
|
||||
if (!sessionId) return
|
||||
const stateToUse = (oauthFlowRef.value?.oauthState || oauthClient.oauthState.value || '').trim()
|
||||
if (!stateToUse) {
|
||||
oauthClient.error.value = t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(oauthClient.error.value)
|
||||
return
|
||||
}
|
||||
|
||||
const tokenInfo = await oauthClient.exchangeAuthCode(
|
||||
authCode.trim(),
|
||||
sessionId,
|
||||
stateToUse,
|
||||
props.account.proxy_id
|
||||
)
|
||||
if (!tokenInfo) return
|
||||
|
||||
// Build credentials and extra info
|
||||
const credentials = oauthClient.buildCredentials(tokenInfo)
|
||||
const extra = oauthClient.buildExtraInfo(tokenInfo)
|
||||
|
||||
try {
|
||||
// Update account with new credentials
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: 'oauth', // OpenAI OAuth is always 'oauth' type
|
||||
credentials,
|
||||
extra
|
||||
})
|
||||
|
||||
// Clear error status after successful re-authorization
|
||||
const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
|
||||
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized', updatedAccount)
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
oauthClient.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(oauthClient.error.value)
|
||||
}
|
||||
} else if (isGemini.value) {
|
||||
const sessionId = geminiOAuth.sessionId.value
|
||||
if (!sessionId) return
|
||||
|
||||
const stateFromInput = oauthFlowRef.value?.oauthState || ''
|
||||
const stateToUse = stateFromInput || geminiOAuth.state.value
|
||||
if (!stateToUse) return
|
||||
|
||||
const tokenInfo = await geminiOAuth.exchangeAuthCode({
|
||||
code: authCode.trim(),
|
||||
sessionId,
|
||||
state: stateToUse,
|
||||
proxyId: props.account.proxy_id,
|
||||
oauthType: geminiOAuthType.value,
|
||||
tierId: typeof (props.account.credentials as any)?.tier_id === 'string' ? ((props.account.credentials as any).tier_id as string) : undefined
|
||||
})
|
||||
if (!tokenInfo) return
|
||||
|
||||
const credentials = geminiOAuth.buildCredentials(tokenInfo)
|
||||
|
||||
try {
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: 'oauth',
|
||||
credentials
|
||||
})
|
||||
const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized', updatedAccount)
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
geminiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(geminiOAuth.error.value)
|
||||
}
|
||||
} else if (isAntigravity.value) {
|
||||
// Antigravity OAuth flow
|
||||
const sessionId = antigravityOAuth.sessionId.value
|
||||
if (!sessionId) return
|
||||
|
||||
const stateFromInput = oauthFlowRef.value?.oauthState || ''
|
||||
const stateToUse = stateFromInput || antigravityOAuth.state.value
|
||||
if (!stateToUse) return
|
||||
|
||||
const tokenInfo = await antigravityOAuth.exchangeAuthCode({
|
||||
code: authCode.trim(),
|
||||
sessionId,
|
||||
state: stateToUse,
|
||||
proxyId: props.account.proxy_id
|
||||
})
|
||||
if (!tokenInfo) return
|
||||
|
||||
const credentials = antigravityOAuth.buildCredentials(tokenInfo)
|
||||
|
||||
try {
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: 'oauth',
|
||||
credentials
|
||||
})
|
||||
const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized', updatedAccount)
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
antigravityOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(antigravityOAuth.error.value)
|
||||
}
|
||||
} else {
|
||||
// Claude OAuth flow
|
||||
const sessionId = claudeOAuth.sessionId.value
|
||||
if (!sessionId) return
|
||||
|
||||
claudeOAuth.loading.value = true
|
||||
claudeOAuth.error.value = ''
|
||||
|
||||
try {
|
||||
const proxyConfig = props.account.proxy_id ? { proxy_id: props.account.proxy_id } : {}
|
||||
const endpoint =
|
||||
addMethod.value === 'oauth'
|
||||
? '/admin/accounts/exchange-code'
|
||||
: '/admin/accounts/exchange-setup-token-code'
|
||||
|
||||
const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, {
|
||||
session_id: sessionId,
|
||||
code: authCode.trim(),
|
||||
...proxyConfig
|
||||
})
|
||||
|
||||
const extra = claudeOAuth.buildExtraInfo(tokenInfo)
|
||||
|
||||
// Update account with new credentials and type
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: addMethod.value, // Update type based on selected method
|
||||
credentials: tokenInfo,
|
||||
extra
|
||||
})
|
||||
|
||||
// Clear error status after successful re-authorization
|
||||
const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
|
||||
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized', updatedAccount)
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
claudeOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
|
||||
appStore.showError(claudeOAuth.error.value)
|
||||
} finally {
|
||||
claudeOAuth.loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleCookieAuth = async (sessionKey: string) => {
|
||||
if (!props.account || isOpenAILike.value) return
|
||||
|
||||
claudeOAuth.loading.value = true
|
||||
claudeOAuth.error.value = ''
|
||||
|
||||
try {
|
||||
const proxyConfig = props.account.proxy_id ? { proxy_id: props.account.proxy_id } : {}
|
||||
const endpoint =
|
||||
addMethod.value === 'oauth'
|
||||
? '/admin/accounts/cookie-auth'
|
||||
: '/admin/accounts/setup-token-cookie-auth'
|
||||
|
||||
const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, {
|
||||
session_id: '',
|
||||
code: sessionKey.trim(),
|
||||
...proxyConfig
|
||||
})
|
||||
|
||||
const extra = claudeOAuth.buildExtraInfo(tokenInfo)
|
||||
|
||||
// Update account with new credentials and type
|
||||
await adminAPI.accounts.update(props.account.id, {
|
||||
type: addMethod.value, // Update type based on selected method
|
||||
credentials: tokenInfo,
|
||||
extra
|
||||
})
|
||||
|
||||
// Clear error status after successful re-authorization
|
||||
const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
|
||||
|
||||
appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
|
||||
emit('reauthorized', updatedAccount)
|
||||
handleClose()
|
||||
} catch (error: any) {
|
||||
claudeOAuth.error.value =
|
||||
error.response?.data?.detail || t('admin.accounts.oauth.cookieAuthFailed')
|
||||
} finally {
|
||||
claudeOAuth.loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,684 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.scheduledTests.title')"
|
||||
width="wide"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<!-- Add Plan Button -->
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.title') }}
|
||||
</p>
|
||||
<button
|
||||
@click="showAddForm = !showAddForm"
|
||||
class="btn btn-primary flex items-center gap-1.5 text-sm"
|
||||
>
|
||||
<Icon name="plus" size="sm" :stroke-width="2" />
|
||||
{{ t('admin.scheduledTests.addPlan') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Add Plan Form -->
|
||||
<div
|
||||
v-if="showAddForm"
|
||||
class="rounded-xl border border-primary-200 bg-primary-50/50 p-4 dark:border-primary-800 dark:bg-primary-900/20"
|
||||
>
|
||||
<div class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.scheduledTests.addPlan') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.model') }}
|
||||
</label>
|
||||
<Select
|
||||
v-model="newPlan.model_id"
|
||||
:options="modelOptions"
|
||||
:placeholder="t('admin.scheduledTests.model')"
|
||||
:searchable="modelOptions.length > 5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 flex items-center gap-1 text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.cronExpression') }}
|
||||
<HelpTooltip>
|
||||
<template #trigger>
|
||||
<span class="inline-flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-gray-400/70 text-[10px] font-semibold text-gray-400 transition-colors hover:border-primary-500 hover:text-primary-600 dark:border-gray-500 dark:text-gray-500 dark:hover:border-primary-400 dark:hover:text-primary-400">
|
||||
?
|
||||
</span>
|
||||
</template>
|
||||
<div class="space-y-1.5">
|
||||
<p class="font-medium">{{ t('admin.scheduledTests.cronTooltipTitle') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipMeaning') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleEvery30Min') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleHourly') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleDaily') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleWeekly') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipRange') }}</p>
|
||||
</div>
|
||||
</HelpTooltip>
|
||||
</label>
|
||||
<Input
|
||||
v-model="newPlan.cron_expression"
|
||||
:placeholder="'*/30 * * * *'"
|
||||
:hint="t('admin.scheduledTests.cronHelp')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 flex items-center gap-1 text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.maxResults') }}
|
||||
<HelpTooltip>
|
||||
<template #trigger>
|
||||
<span class="inline-flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-gray-400/70 text-[10px] font-semibold text-gray-400 transition-colors hover:border-primary-500 hover:text-primary-600 dark:border-gray-500 dark:text-gray-500 dark:hover:border-primary-400 dark:hover:text-primary-400">
|
||||
?
|
||||
</span>
|
||||
</template>
|
||||
<div class="space-y-1.5">
|
||||
<p class="font-medium">{{ t('admin.scheduledTests.maxResultsTooltipTitle') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipMeaning') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipBody') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipExample') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipRange') }}</p>
|
||||
</div>
|
||||
</HelpTooltip>
|
||||
</label>
|
||||
<Input
|
||||
v-model="newPlan.max_results"
|
||||
type="number"
|
||||
placeholder="100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<Toggle v-model="newPlan.enabled" />
|
||||
{{ t('admin.scheduledTests.enabled') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<div>
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<Toggle v-model="newPlan.auto_recover" />
|
||||
{{ t('admin.scheduledTests.autoRecover') }}
|
||||
</label>
|
||||
<p class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
|
||||
{{ t('admin.scheduledTests.autoRecoverHelp') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-end gap-2">
|
||||
<button
|
||||
@click="showAddForm = false; resetNewPlan()"
|
||||
class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
@click="handleCreate"
|
||||
:disabled="!newPlan.model_id || !newPlan.cron_expression || creating"
|
||||
class="flex items-center gap-1.5 rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Icon v-if="creating" name="refresh" size="sm" class="animate-spin" :stroke-width="2" />
|
||||
{{ t('common.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-8">
|
||||
<Icon name="refresh" size="md" class="animate-spin text-gray-400" :stroke-width="2" />
|
||||
<span class="ml-2 text-sm text-gray-500">{{ t('common.loading') }}...</span>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-else-if="plans.length === 0"
|
||||
class="rounded-xl border border-dashed border-gray-300 py-10 text-center dark:border-dark-600"
|
||||
>
|
||||
<Icon name="calendar" size="lg" class="mx-auto mb-2 text-gray-400" :stroke-width="1.5" />
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.noPlans') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Plans List -->
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="plan in plans"
|
||||
:key="plan.id"
|
||||
class="rounded-xl border border-gray-200 bg-white transition-all dark:border-dark-600 dark:bg-dark-800"
|
||||
>
|
||||
<!-- Plan Header -->
|
||||
<div
|
||||
class="flex cursor-pointer items-center justify-between px-4 py-3"
|
||||
@click="toggleExpand(plan.id)"
|
||||
>
|
||||
<div class="flex flex-1 items-center gap-4">
|
||||
<!-- Model -->
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ plan.model_id }}
|
||||
</div>
|
||||
<div class="mt-0.5 font-mono text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ plan.cron_expression }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enabled Toggle -->
|
||||
<div class="flex items-center gap-1.5" @click.stop>
|
||||
<Toggle
|
||||
:model-value="plan.enabled"
|
||||
@update:model-value="(val: boolean) => handleToggleEnabled(plan, val)"
|
||||
/>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ plan.enabled ? t('admin.scheduledTests.enabled') : '' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Auto Recover Badge -->
|
||||
<span
|
||||
v-if="plan.auto_recover"
|
||||
class="inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400"
|
||||
>
|
||||
{{ t('admin.scheduledTests.autoRecover') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Last Run -->
|
||||
<div v-if="plan.last_run_at" class="hidden text-right text-xs text-gray-500 dark:text-gray-400 sm:block">
|
||||
<div>{{ t('admin.scheduledTests.lastRun') }}</div>
|
||||
<div>{{ formatDateTime(plan.last_run_at) }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Next Run -->
|
||||
<div v-if="plan.next_run_at" class="hidden text-right text-xs text-gray-500 dark:text-gray-400 sm:block">
|
||||
<div>{{ t('admin.scheduledTests.nextRun') }}</div>
|
||||
<div>{{ formatDateTime(plan.next_run_at) }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-1" @click.stop>
|
||||
<button
|
||||
@click="startEdit(plan)"
|
||||
class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-blue-50 hover:text-blue-500 dark:hover:bg-blue-900/20"
|
||||
:title="t('admin.scheduledTests.editPlan')"
|
||||
>
|
||||
<Icon name="edit" size="sm" :stroke-width="2" />
|
||||
</button>
|
||||
<button
|
||||
@click="confirmDeletePlan(plan)"
|
||||
class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
|
||||
:title="t('admin.scheduledTests.deletePlan')"
|
||||
>
|
||||
<Icon name="trash" size="sm" :stroke-width="2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Expand indicator -->
|
||||
<Icon
|
||||
name="chevronDown"
|
||||
size="sm"
|
||||
:class="[
|
||||
'text-gray-400 transition-transform duration-200',
|
||||
expandedPlanId === plan.id ? 'rotate-180' : ''
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div
|
||||
v-if="editingPlanId === plan.id"
|
||||
class="border-t border-blue-100 bg-blue-50/50 px-4 py-3 dark:border-blue-900 dark:bg-blue-900/10"
|
||||
@click.stop
|
||||
>
|
||||
<div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.editPlan') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.model') }}
|
||||
</label>
|
||||
<Select
|
||||
v-model="editForm.model_id"
|
||||
:options="modelOptions"
|
||||
:placeholder="t('admin.scheduledTests.model')"
|
||||
:searchable="modelOptions.length > 5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 flex items-center gap-1 text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.cronExpression') }}
|
||||
<HelpTooltip>
|
||||
<template #trigger>
|
||||
<span class="inline-flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-gray-400/70 text-[10px] font-semibold text-gray-400 transition-colors hover:border-primary-500 hover:text-primary-600 dark:border-gray-500 dark:text-gray-500 dark:hover:border-primary-400 dark:hover:text-primary-400">
|
||||
?
|
||||
</span>
|
||||
</template>
|
||||
<div class="space-y-1.5">
|
||||
<p class="font-medium">{{ t('admin.scheduledTests.cronTooltipTitle') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipMeaning') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleEvery30Min') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleHourly') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleDaily') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipExampleWeekly') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.cronTooltipRange') }}</p>
|
||||
</div>
|
||||
</HelpTooltip>
|
||||
</label>
|
||||
<Input
|
||||
v-model="editForm.cron_expression"
|
||||
:placeholder="'*/30 * * * *'"
|
||||
:hint="t('admin.scheduledTests.cronHelp')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 flex items-center gap-1 text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.maxResults') }}
|
||||
<HelpTooltip>
|
||||
<template #trigger>
|
||||
<span class="inline-flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-gray-400/70 text-[10px] font-semibold text-gray-400 transition-colors hover:border-primary-500 hover:text-primary-600 dark:border-gray-500 dark:text-gray-500 dark:hover:border-primary-400 dark:hover:text-primary-400">
|
||||
?
|
||||
</span>
|
||||
</template>
|
||||
<div class="space-y-1.5">
|
||||
<p class="font-medium">{{ t('admin.scheduledTests.maxResultsTooltipTitle') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipMeaning') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipBody') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipExample') }}</p>
|
||||
<p>{{ t('admin.scheduledTests.maxResultsTooltipRange') }}</p>
|
||||
</div>
|
||||
</HelpTooltip>
|
||||
</label>
|
||||
<Input
|
||||
v-model="editForm.max_results"
|
||||
type="number"
|
||||
placeholder="100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<Toggle v-model="editForm.enabled" />
|
||||
{{ t('admin.scheduledTests.enabled') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<div>
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<Toggle v-model="editForm.auto_recover" />
|
||||
{{ t('admin.scheduledTests.autoRecover') }}
|
||||
</label>
|
||||
<p class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
|
||||
{{ t('admin.scheduledTests.autoRecoverHelp') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-end gap-2">
|
||||
<button
|
||||
@click="cancelEdit"
|
||||
class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
@click="handleEdit"
|
||||
:disabled="!editForm.model_id || !editForm.cron_expression || updating"
|
||||
class="flex items-center gap-1.5 rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Icon v-if="updating" name="refresh" size="sm" class="animate-spin" :stroke-width="2" />
|
||||
{{ t('common.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Expanded Results Section -->
|
||||
<div
|
||||
v-if="expandedPlanId === plan.id"
|
||||
class="border-t border-gray-100 px-4 py-3 dark:border-dark-700"
|
||||
>
|
||||
<div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.scheduledTests.results') }}
|
||||
</div>
|
||||
|
||||
<!-- Results Loading -->
|
||||
<div v-if="loadingResults" class="flex items-center justify-center py-4">
|
||||
<Icon name="refresh" size="sm" class="animate-spin text-gray-400" :stroke-width="2" />
|
||||
<span class="ml-2 text-xs text-gray-500">{{ t('common.loading') }}...</span>
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
<div
|
||||
v-else-if="results.length === 0"
|
||||
class="py-4 text-center text-xs text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.scheduledTests.noResults') }}
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<div v-else class="max-h-64 space-y-2 overflow-y-auto">
|
||||
<div
|
||||
v-for="result in results"
|
||||
:key="result.id"
|
||||
class="rounded-lg border border-gray-100 bg-gray-50 p-3 dark:border-dark-700 dark:bg-dark-900"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Status Badge -->
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
|
||||
result.status === 'success'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
|
||||
: result.status === 'running'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'
|
||||
: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400'
|
||||
]"
|
||||
>
|
||||
{{
|
||||
result.status === 'success'
|
||||
? t('admin.scheduledTests.success')
|
||||
: result.status === 'running'
|
||||
? t('admin.scheduledTests.running')
|
||||
: t('admin.scheduledTests.failed')
|
||||
}}
|
||||
</span>
|
||||
|
||||
<!-- Latency -->
|
||||
<span v-if="result.latency_ms > 0" class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ result.latency_ms }}ms
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Started At -->
|
||||
<span class="text-xs text-gray-400">
|
||||
{{ formatDateTime(result.started_at) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Response / Error (collapsible) -->
|
||||
<div v-if="result.error_message" class="mt-2">
|
||||
<div
|
||||
class="cursor-pointer text-xs font-medium text-red-600 dark:text-red-400"
|
||||
@click="toggleResultDetail(result.id)"
|
||||
>
|
||||
{{ t('admin.scheduledTests.errorMessage') }}
|
||||
<Icon
|
||||
name="chevronDown"
|
||||
size="sm"
|
||||
:class="[
|
||||
'inline transition-transform duration-200',
|
||||
expandedResultIds.has(result.id) ? 'rotate-180' : ''
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<pre
|
||||
v-if="expandedResultIds.has(result.id)"
|
||||
class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded bg-red-50 p-2 text-xs text-red-700 dark:bg-red-900/20 dark:text-red-300"
|
||||
>{{ result.error_message }}</pre>
|
||||
</div>
|
||||
<div v-else-if="result.response_text" class="mt-2">
|
||||
<div
|
||||
class="cursor-pointer text-xs font-medium text-gray-600 dark:text-gray-400"
|
||||
@click="toggleResultDetail(result.id)"
|
||||
>
|
||||
{{ t('admin.scheduledTests.responseText') }}
|
||||
<Icon
|
||||
name="chevronDown"
|
||||
size="sm"
|
||||
:class="[
|
||||
'inline transition-transform duration-200',
|
||||
expandedResultIds.has(result.id) ? 'rotate-180' : ''
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<pre
|
||||
v-if="expandedResultIds.has(result.id)"
|
||||
class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded bg-gray-100 p-2 text-xs text-gray-700 dark:bg-dark-800 dark:text-gray-300"
|
||||
>{{ result.response_text }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation -->
|
||||
<ConfirmDialog
|
||||
:show="showDeleteConfirm"
|
||||
:title="t('admin.scheduledTests.deletePlan')"
|
||||
:message="t('admin.scheduledTests.confirmDelete')"
|
||||
:confirm-text="t('common.delete')"
|
||||
:cancel-text="t('common.cancel')"
|
||||
:danger="true"
|
||||
@confirm="handleDelete"
|
||||
@cancel="showDeleteConfirm = false"
|
||||
/>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
|
||||
import HelpTooltip from '@/components/common/HelpTooltip.vue'
|
||||
import Select, { type SelectOption } from '@/components/common/Select.vue'
|
||||
import Input from '@/components/common/Input.vue'
|
||||
import Toggle from '@/components/common/Toggle.vue'
|
||||
import { Icon } from '@/components/icons'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import type { ScheduledTestPlan, ScheduledTestResult } from '@/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
accountId: number | null
|
||||
modelOptions: SelectOption[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
// State
|
||||
const loading = ref(false)
|
||||
const creating = ref(false)
|
||||
const loadingResults = ref(false)
|
||||
const plans = ref<ScheduledTestPlan[]>([])
|
||||
const results = ref<ScheduledTestResult[]>([])
|
||||
const expandedPlanId = ref<number | null>(null)
|
||||
const expandedResultIds = reactive(new Set<number>())
|
||||
const showAddForm = ref(false)
|
||||
const showDeleteConfirm = ref(false)
|
||||
const deletingPlan = ref<ScheduledTestPlan | null>(null)
|
||||
const editingPlanId = ref<number | null>(null)
|
||||
const updating = ref(false)
|
||||
const editForm = reactive({
|
||||
model_id: '' as string,
|
||||
cron_expression: '' as string,
|
||||
max_results: '100' as string,
|
||||
enabled: true,
|
||||
auto_recover: false
|
||||
})
|
||||
|
||||
const newPlan = reactive({
|
||||
model_id: '' as string,
|
||||
cron_expression: '' as string,
|
||||
max_results: '100' as string,
|
||||
enabled: true,
|
||||
auto_recover: false
|
||||
})
|
||||
|
||||
const resetNewPlan = () => {
|
||||
newPlan.model_id = ''
|
||||
newPlan.cron_expression = ''
|
||||
newPlan.max_results = '100'
|
||||
newPlan.enabled = true
|
||||
newPlan.auto_recover = false
|
||||
}
|
||||
|
||||
// Load plans when dialog opens
|
||||
watch(
|
||||
() => props.show,
|
||||
async (visible) => {
|
||||
if (visible && props.accountId) {
|
||||
await loadPlans()
|
||||
} else {
|
||||
plans.value = []
|
||||
results.value = []
|
||||
expandedPlanId.value = null
|
||||
expandedResultIds.clear()
|
||||
showAddForm.value = false
|
||||
showDeleteConfirm.value = false
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const loadPlans = async () => {
|
||||
if (!props.accountId) return
|
||||
loading.value = true
|
||||
try {
|
||||
plans.value = await adminAPI.scheduledTests.listByAccount(props.accountId)
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || 'Failed to load plans')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!props.accountId || !newPlan.model_id || !newPlan.cron_expression) return
|
||||
creating.value = true
|
||||
try {
|
||||
const maxResults = Number(newPlan.max_results) || 100
|
||||
await adminAPI.scheduledTests.create({
|
||||
account_id: props.accountId,
|
||||
model_id: newPlan.model_id,
|
||||
cron_expression: newPlan.cron_expression,
|
||||
enabled: newPlan.enabled,
|
||||
max_results: maxResults,
|
||||
auto_recover: newPlan.auto_recover
|
||||
})
|
||||
appStore.showSuccess(t('admin.scheduledTests.createSuccess'))
|
||||
showAddForm.value = false
|
||||
resetNewPlan()
|
||||
await loadPlans()
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || 'Failed to create plan')
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleEnabled = async (plan: ScheduledTestPlan, enabled: boolean) => {
|
||||
try {
|
||||
const updated = await adminAPI.scheduledTests.update(plan.id, { enabled })
|
||||
const index = plans.value.findIndex((p) => p.id === plan.id)
|
||||
if (index !== -1) {
|
||||
plans.value[index] = updated
|
||||
}
|
||||
appStore.showSuccess(t('admin.scheduledTests.updateSuccess'))
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || 'Failed to update plan')
|
||||
}
|
||||
}
|
||||
|
||||
const startEdit = (plan: ScheduledTestPlan) => {
|
||||
editingPlanId.value = plan.id
|
||||
editForm.model_id = plan.model_id
|
||||
editForm.cron_expression = plan.cron_expression
|
||||
editForm.max_results = String(plan.max_results)
|
||||
editForm.enabled = plan.enabled
|
||||
editForm.auto_recover = plan.auto_recover
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
editingPlanId.value = null
|
||||
}
|
||||
|
||||
const handleEdit = async () => {
|
||||
if (!editingPlanId.value || !editForm.model_id || !editForm.cron_expression) return
|
||||
updating.value = true
|
||||
try {
|
||||
const updated = await adminAPI.scheduledTests.update(editingPlanId.value, {
|
||||
model_id: editForm.model_id,
|
||||
cron_expression: editForm.cron_expression,
|
||||
max_results: Number(editForm.max_results) || 100,
|
||||
enabled: editForm.enabled,
|
||||
auto_recover: editForm.auto_recover
|
||||
})
|
||||
const index = plans.value.findIndex((p) => p.id === editingPlanId.value)
|
||||
if (index !== -1) {
|
||||
plans.value[index] = updated
|
||||
}
|
||||
appStore.showSuccess(t('admin.scheduledTests.updateSuccess'))
|
||||
editingPlanId.value = null
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || 'Failed to update plan')
|
||||
} finally {
|
||||
updating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeletePlan = (plan: ScheduledTestPlan) => {
|
||||
deletingPlan.value = plan
|
||||
showDeleteConfirm.value = true
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deletingPlan.value) return
|
||||
try {
|
||||
await adminAPI.scheduledTests.delete(deletingPlan.value.id)
|
||||
appStore.showSuccess(t('admin.scheduledTests.deleteSuccess'))
|
||||
plans.value = plans.value.filter((p) => p.id !== deletingPlan.value!.id)
|
||||
if (expandedPlanId.value === deletingPlan.value.id) {
|
||||
expandedPlanId.value = null
|
||||
results.value = []
|
||||
}
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || 'Failed to delete plan')
|
||||
} finally {
|
||||
showDeleteConfirm.value = false
|
||||
deletingPlan.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const toggleExpand = async (planId: number) => {
|
||||
if (expandedPlanId.value === planId) {
|
||||
expandedPlanId.value = null
|
||||
results.value = []
|
||||
expandedResultIds.clear()
|
||||
return
|
||||
}
|
||||
|
||||
expandedPlanId.value = planId
|
||||
expandedResultIds.clear()
|
||||
loadingResults.value = true
|
||||
try {
|
||||
results.value = await adminAPI.scheduledTests.listResults(planId, 20)
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || 'Failed to load results')
|
||||
results.value = []
|
||||
} finally {
|
||||
loadingResults.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleResultDetail = (resultId: number) => {
|
||||
if (expandedResultIds.has(resultId)) {
|
||||
expandedResultIds.delete(resultId)
|
||||
} else {
|
||||
expandedResultIds.add(resultId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,147 @@
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import AccountTestModal from '../AccountTestModal.vue'
|
||||
|
||||
const { getAvailableModels, copyToClipboard } = vi.hoisted(() => ({
|
||||
getAvailableModels: vi.fn(),
|
||||
copyToClipboard: vi.fn()
|
||||
}))
|
||||
|
||||
vi.mock('@/api/admin', () => ({
|
||||
adminAPI: {
|
||||
accounts: {
|
||||
getAvailableModels
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('@/composables/useClipboard', () => ({
|
||||
useClipboard: () => ({
|
||||
copyToClipboard
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('vue-i18n', async () => {
|
||||
const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
|
||||
const messages: Record<string, string> = {
|
||||
'admin.accounts.geminiImagePromptDefault': 'Generate a cute orange cat astronaut sticker on a clean pastel background.'
|
||||
}
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string, params?: Record<string, string | number>) => {
|
||||
if (key === 'admin.accounts.geminiImageReceived' && params?.count) {
|
||||
return `received-${params.count}`
|
||||
}
|
||||
return messages[key] || key
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function createStreamResponse(lines: string[]) {
|
||||
const encoder = new TextEncoder()
|
||||
const chunks = lines.map((line) => encoder.encode(line))
|
||||
let index = 0
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
body: {
|
||||
getReader: () => ({
|
||||
read: vi.fn().mockImplementation(async () => {
|
||||
if (index < chunks.length) {
|
||||
return { done: false, value: chunks[index++] }
|
||||
}
|
||||
return { done: true, value: undefined }
|
||||
})
|
||||
})
|
||||
}
|
||||
} as Response
|
||||
}
|
||||
|
||||
function mountModal() {
|
||||
return mount(AccountTestModal, {
|
||||
props: {
|
||||
show: false,
|
||||
account: {
|
||||
id: 42,
|
||||
name: 'Gemini Image Test',
|
||||
platform: 'gemini',
|
||||
type: 'apikey',
|
||||
status: 'active'
|
||||
}
|
||||
} as any,
|
||||
global: {
|
||||
stubs: {
|
||||
BaseDialog: { template: '<div><slot /><slot name="footer" /></div>' },
|
||||
Select: { template: '<div class="select-stub"></div>' },
|
||||
TextArea: {
|
||||
props: ['modelValue'],
|
||||
emits: ['update:modelValue'],
|
||||
template: '<textarea class="textarea-stub" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />'
|
||||
},
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
describe('AccountTestModal', () => {
|
||||
beforeEach(() => {
|
||||
getAvailableModels.mockResolvedValue([
|
||||
{ id: 'gemini-2.0-flash', display_name: 'Gemini 2.0 Flash' },
|
||||
{ id: 'gemini-2.5-flash-image', display_name: 'Gemini 2.5 Flash Image' },
|
||||
{ id: 'gemini-3.1-flash-image', display_name: 'Gemini 3.1 Flash Image' }
|
||||
])
|
||||
copyToClipboard.mockReset()
|
||||
Object.defineProperty(globalThis, 'localStorage', {
|
||||
value: {
|
||||
getItem: vi.fn((key: string) => (key === 'auth_token' ? 'test-token' : null)),
|
||||
setItem: vi.fn(),
|
||||
removeItem: vi.fn(),
|
||||
clear: vi.fn()
|
||||
},
|
||||
configurable: true
|
||||
})
|
||||
global.fetch = vi.fn().mockResolvedValue(
|
||||
createStreamResponse([
|
||||
'data: {"type":"test_start","model":"gemini-2.5-flash-image"}\n',
|
||||
'data: {"type":"image","image_url":"data:image/png;base64,QUJD","mime_type":"image/png"}\n',
|
||||
'data: {"type":"test_complete","success":true}\n'
|
||||
])
|
||||
) as any
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
it('gemini 图片模型测试会携带提示词并渲染图片预览', async () => {
|
||||
const wrapper = mountModal()
|
||||
await wrapper.setProps({ show: true })
|
||||
await flushPromises()
|
||||
|
||||
const promptInput = wrapper.find('textarea.textarea-stub')
|
||||
expect(promptInput.exists()).toBe(true)
|
||||
await promptInput.setValue('draw a tiny orange cat astronaut')
|
||||
|
||||
const buttons = wrapper.findAll('button')
|
||||
const startButton = buttons.find((button) => button.text().includes('admin.accounts.startTest'))
|
||||
expect(startButton).toBeTruthy()
|
||||
|
||||
await startButton!.trigger('click')
|
||||
await flushPromises()
|
||||
await flushPromises()
|
||||
|
||||
expect(global.fetch).toHaveBeenCalledTimes(1)
|
||||
const [, request] = (global.fetch as any).mock.calls[0]
|
||||
expect(JSON.parse(request.body)).toEqual({
|
||||
model_id: 'gemini-3.1-flash-image',
|
||||
prompt: 'draw a tiny orange cat astronaut'
|
||||
})
|
||||
|
||||
const preview = wrapper.find('img[alt="gemini-test-image-1"]')
|
||||
expect(preview.exists()).toBe(true)
|
||||
expect(preview.attributes('src')).toBe('data:image/png;base64,QUJD')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.announcements.readStatus')"
|
||||
width="extra-wide"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex-1">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="input"
|
||||
:placeholder="t('admin.announcements.searchUsers')"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<button @click="load" :disabled="loading" class="btn btn-secondary" :title="t('common.refresh')">
|
||||
<Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DataTable :columns="columns" :data="items" :loading="loading">
|
||||
<template #cell-email="{ value }">
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-balance="{ value }">
|
||||
<span class="font-medium text-gray-900 dark:text-white">${{ Number(value ?? 0).toFixed(2) }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-eligible="{ value }">
|
||||
<span :class="['badge', value ? 'badge-success' : 'badge-gray']">
|
||||
{{ value ? t('admin.announcements.eligible') : t('common.no') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #cell-read_at="{ value }">
|
||||
<span class="text-sm text-gray-500 dark:text-dark-400">
|
||||
{{ value ? formatDateTime(value) : t('admin.announcements.unread') }}
|
||||
</span>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<Pagination
|
||||
v-if="pagination.total > 0"
|
||||
:page="pagination.page"
|
||||
:total="pagination.total"
|
||||
:page-size="pagination.page_size"
|
||||
@update:page="handlePageChange"
|
||||
@update:pageSize="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<button type="button" class="btn btn-secondary" @click="handleClose">{{ t('common.close') }}</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import type { AnnouncementUserReadStatus } from '@/types'
|
||||
import type { Column } from '@/components/common/types'
|
||||
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import DataTable from '@/components/common/DataTable.vue'
|
||||
import Pagination from '@/components/common/Pagination.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
announcementId: number | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const loading = ref(false)
|
||||
const search = ref('')
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
total: 0,
|
||||
pages: 0
|
||||
})
|
||||
|
||||
const items = ref<AnnouncementUserReadStatus[]>([])
|
||||
|
||||
const columns = computed<Column[]>(() => [
|
||||
{ key: 'email', label: t('common.email') },
|
||||
{ key: 'username', label: t('admin.users.columns.username') },
|
||||
{ key: 'balance', label: t('common.balance') },
|
||||
{ key: 'eligible', label: t('admin.announcements.eligible') },
|
||||
{ key: 'read_at', label: t('admin.announcements.readAt') }
|
||||
])
|
||||
|
||||
let currentController: AbortController | null = null
|
||||
|
||||
async function load() {
|
||||
if (!props.show || !props.announcementId) return
|
||||
|
||||
if (currentController) currentController.abort()
|
||||
currentController = new AbortController()
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await adminAPI.announcements.getReadStatus(
|
||||
props.announcementId,
|
||||
pagination.page,
|
||||
pagination.page_size,
|
||||
search.value
|
||||
)
|
||||
|
||||
items.value = res.items
|
||||
pagination.total = res.total
|
||||
pagination.pages = res.pages
|
||||
pagination.page = res.page
|
||||
pagination.page_size = res.page_size
|
||||
} catch (error: any) {
|
||||
if (currentController.signal.aborted || error?.name === 'AbortError') return
|
||||
console.error('Failed to load read status:', error)
|
||||
appStore.showError(error.response?.data?.detail || t('admin.announcements.failedToLoadReadStatus'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
pagination.page = page
|
||||
load()
|
||||
}
|
||||
|
||||
function handlePageSizeChange(pageSize: number) {
|
||||
pagination.page_size = pageSize
|
||||
pagination.page = 1
|
||||
load()
|
||||
}
|
||||
|
||||
let searchDebounceTimer: number | null = null
|
||||
function handleSearch() {
|
||||
if (searchDebounceTimer) window.clearTimeout(searchDebounceTimer)
|
||||
searchDebounceTimer = window.setTimeout(() => {
|
||||
pagination.page = 1
|
||||
load()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(v) => {
|
||||
if (!v) return
|
||||
pagination.page = 1
|
||||
load()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.announcementId,
|
||||
() => {
|
||||
if (!props.show) return
|
||||
pagination.page = 1
|
||||
load()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
// noop
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div class="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-dark-700 dark:bg-dark-800/50">
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.announcements.form.targetingMode') }}
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-gray-500 dark:text-dark-400">
|
||||
{{ mode === 'all' ? t('admin.announcements.form.targetingAll') : t('admin.announcements.form.targetingCustom') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="announcement-targeting-mode"
|
||||
value="all"
|
||||
:checked="mode === 'all'"
|
||||
@change="setMode('all')"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
{{ t('admin.announcements.form.targetingAll') }}
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
<input
|
||||
type="radio"
|
||||
name="announcement-targeting-mode"
|
||||
value="custom"
|
||||
:checked="mode === 'custom'"
|
||||
@change="setMode('custom')"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
{{ t('admin.announcements.form.targetingCustom') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'custom'" class="mt-4 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
OR
|
||||
<span class="ml-1 text-xs font-normal text-gray-500 dark:text-dark-400">
|
||||
({{ anyOf.length }}/50)
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
:disabled="anyOf.length >= 50"
|
||||
@click="addOrGroup"
|
||||
>
|
||||
<Icon name="plus" size="sm" class="mr-1" />
|
||||
{{ t('admin.announcements.form.addOrGroup') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="anyOf.length === 0" class="rounded-xl border border-dashed border-gray-300 p-4 text-sm text-gray-500 dark:border-dark-600 dark:text-dark-400">
|
||||
{{ t('admin.announcements.form.targetingCustom') }}: {{ t('admin.announcements.form.addOrGroup') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(group, groupIndex) in anyOf"
|
||||
:key="groupIndex"
|
||||
class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-dark-700 dark:bg-dark-800"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.announcements.form.targetingCustom') }} #{{ groupIndex + 1 }}
|
||||
<span class="ml-2 text-xs font-normal text-gray-500 dark:text-dark-400">AND ({{ (group.all_of?.length || 0) }}/50)</span>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-gray-500 dark:text-dark-400">
|
||||
{{ t('admin.announcements.form.addAndCondition') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="removeOrGroup(groupIndex)"
|
||||
>
|
||||
<Icon name="trash" size="sm" class="mr-1" />
|
||||
{{ t('common.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-3">
|
||||
<div
|
||||
v-for="(cond, condIndex) in (group.all_of || [])"
|
||||
:key="condIndex"
|
||||
class="rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-dark-700 dark:bg-dark-900/30"
|
||||
>
|
||||
<div class="flex flex-col gap-3 md:flex-row md:items-end">
|
||||
<div class="w-full md:w-52">
|
||||
<label class="input-label">{{ t('admin.announcements.form.conditionType') }}</label>
|
||||
<Select
|
||||
:model-value="cond.type"
|
||||
:options="conditionTypeOptions"
|
||||
@update:model-value="(v) => setConditionType(groupIndex, condIndex, v as any)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="cond.type === 'subscription'" class="flex-1">
|
||||
<label class="input-label">{{ t('admin.announcements.form.selectPackages') }}</label>
|
||||
<GroupSelector
|
||||
v-model="subscriptionSelections[groupIndex][condIndex]"
|
||||
:groups="groups"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-1 flex-col gap-3 sm:flex-row">
|
||||
<div class="w-full sm:w-44">
|
||||
<label class="input-label">{{ t('admin.announcements.form.operator') }}</label>
|
||||
<Select
|
||||
:model-value="cond.operator"
|
||||
:options="balanceOperatorOptions"
|
||||
@update:model-value="(v) => setOperator(groupIndex, condIndex, v as any)"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:flex-1">
|
||||
<label class="input-label">{{ t('admin.announcements.form.balanceValue') }}</label>
|
||||
<input
|
||||
:value="String(cond.value ?? '')"
|
||||
type="number"
|
||||
step="any"
|
||||
class="input"
|
||||
@input="(e) => setBalanceValue(groupIndex, condIndex, (e.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
@click="removeAndCondition(groupIndex, condIndex)"
|
||||
>
|
||||
<Icon name="trash" size="sm" class="mr-1" />
|
||||
{{ t('common.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
:disabled="(group.all_of?.length || 0) >= 50"
|
||||
@click="addAndCondition(groupIndex)"
|
||||
>
|
||||
<Icon name="plus" size="sm" class="mr-1" />
|
||||
{{ t('admin.announcements.form.addAndCondition') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="validationError" class="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-900/30 dark:bg-red-900/10 dark:text-red-300">
|
||||
{{ validationError }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type {
|
||||
AdminGroup,
|
||||
AnnouncementTargeting,
|
||||
AnnouncementCondition,
|
||||
AnnouncementConditionGroup,
|
||||
AnnouncementConditionType,
|
||||
AnnouncementOperator
|
||||
} from '@/types'
|
||||
|
||||
import Select from '@/components/common/Select.vue'
|
||||
import GroupSelector from '@/components/common/GroupSelector.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: AnnouncementTargeting
|
||||
groups: AdminGroup[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: AnnouncementTargeting): void
|
||||
}>()
|
||||
|
||||
const anyOf = computed(() => props.modelValue?.any_of ?? [])
|
||||
|
||||
type Mode = 'all' | 'custom'
|
||||
const mode = computed<Mode>(() => (anyOf.value.length === 0 ? 'all' : 'custom'))
|
||||
|
||||
const conditionTypeOptions = computed(() => [
|
||||
{ value: 'subscription', label: t('admin.announcements.form.conditionSubscription') },
|
||||
{ value: 'balance', label: t('admin.announcements.form.conditionBalance') }
|
||||
])
|
||||
|
||||
const balanceOperatorOptions = computed(() => [
|
||||
{ value: 'gt', label: t('admin.announcements.operators.gt') },
|
||||
{ value: 'gte', label: t('admin.announcements.operators.gte') },
|
||||
{ value: 'lt', label: t('admin.announcements.operators.lt') },
|
||||
{ value: 'lte', label: t('admin.announcements.operators.lte') },
|
||||
{ value: 'eq', label: t('admin.announcements.operators.eq') }
|
||||
])
|
||||
|
||||
function setMode(next: Mode) {
|
||||
if (next === 'all') {
|
||||
emit('update:modelValue', { any_of: [] })
|
||||
return
|
||||
}
|
||||
if (anyOf.value.length === 0) {
|
||||
emit('update:modelValue', { any_of: [{ all_of: [defaultSubscriptionCondition()] }] })
|
||||
}
|
||||
}
|
||||
|
||||
function defaultSubscriptionCondition(): AnnouncementCondition {
|
||||
return {
|
||||
type: 'subscription' as AnnouncementConditionType,
|
||||
operator: 'in' as AnnouncementOperator,
|
||||
group_ids: []
|
||||
}
|
||||
}
|
||||
|
||||
function defaultBalanceCondition(): AnnouncementCondition {
|
||||
return {
|
||||
type: 'balance' as AnnouncementConditionType,
|
||||
operator: 'gte' as AnnouncementOperator,
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
|
||||
type TargetingDraft = {
|
||||
any_of: AnnouncementConditionGroup[]
|
||||
}
|
||||
|
||||
function updateTargeting(mutator: (draft: TargetingDraft) => void) {
|
||||
const draft: TargetingDraft = JSON.parse(JSON.stringify(props.modelValue ?? { any_of: [] }))
|
||||
if (!draft.any_of) draft.any_of = []
|
||||
mutator(draft)
|
||||
emit('update:modelValue', draft)
|
||||
}
|
||||
|
||||
function addOrGroup() {
|
||||
updateTargeting((draft) => {
|
||||
if (draft.any_of.length >= 50) return
|
||||
draft.any_of.push({ all_of: [defaultSubscriptionCondition()] })
|
||||
})
|
||||
}
|
||||
|
||||
function removeOrGroup(groupIndex: number) {
|
||||
updateTargeting((draft) => {
|
||||
draft.any_of.splice(groupIndex, 1)
|
||||
})
|
||||
}
|
||||
|
||||
function addAndCondition(groupIndex: number) {
|
||||
updateTargeting((draft) => {
|
||||
const group = draft.any_of[groupIndex]
|
||||
if (!group.all_of) group.all_of = []
|
||||
if (group.all_of.length >= 50) return
|
||||
group.all_of.push(defaultSubscriptionCondition())
|
||||
})
|
||||
}
|
||||
|
||||
function removeAndCondition(groupIndex: number, condIndex: number) {
|
||||
updateTargeting((draft) => {
|
||||
const group = draft.any_of[groupIndex]
|
||||
if (!group?.all_of) return
|
||||
group.all_of.splice(condIndex, 1)
|
||||
})
|
||||
}
|
||||
|
||||
function setConditionType(groupIndex: number, condIndex: number, nextType: AnnouncementConditionType) {
|
||||
updateTargeting((draft) => {
|
||||
const group = draft.any_of[groupIndex]
|
||||
if (!group?.all_of) return
|
||||
|
||||
if (nextType === 'subscription') {
|
||||
group.all_of[condIndex] = defaultSubscriptionCondition()
|
||||
} else {
|
||||
group.all_of[condIndex] = defaultBalanceCondition()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function setOperator(groupIndex: number, condIndex: number, op: AnnouncementOperator) {
|
||||
updateTargeting((draft) => {
|
||||
const group = draft.any_of[groupIndex]
|
||||
if (!group?.all_of) return
|
||||
|
||||
const cond = group.all_of[condIndex]
|
||||
if (!cond) return
|
||||
|
||||
cond.operator = op
|
||||
})
|
||||
}
|
||||
|
||||
function setBalanceValue(groupIndex: number, condIndex: number, raw: string) {
|
||||
const n = raw === '' ? 0 : Number(raw)
|
||||
updateTargeting((draft) => {
|
||||
const group = draft.any_of[groupIndex]
|
||||
if (!group?.all_of) return
|
||||
|
||||
const cond = group.all_of[condIndex]
|
||||
if (!cond) return
|
||||
|
||||
cond.value = Number.isFinite(n) ? n : 0
|
||||
})
|
||||
}
|
||||
|
||||
// We keep group_ids selection in a parallel reactive map because GroupSelector is numeric list.
|
||||
// Then we mirror it back to targeting.group_ids via a watcher.
|
||||
const subscriptionSelections = reactive<Record<number, Record<number, number[]>>>({})
|
||||
|
||||
function ensureSelectionPath(groupIndex: number, condIndex: number) {
|
||||
if (!subscriptionSelections[groupIndex]) subscriptionSelections[groupIndex] = {}
|
||||
if (!subscriptionSelections[groupIndex][condIndex]) subscriptionSelections[groupIndex][condIndex] = []
|
||||
}
|
||||
|
||||
// Sync from modelValue to subscriptionSelections (one-way: model -> local state)
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(v) => {
|
||||
const groups = v?.any_of ?? []
|
||||
for (let gi = 0; gi < groups.length; gi++) {
|
||||
const allOf = groups[gi]?.all_of ?? []
|
||||
for (let ci = 0; ci < allOf.length; ci++) {
|
||||
const c = allOf[ci]
|
||||
if (c?.type === 'subscription') {
|
||||
ensureSelectionPath(gi, ci)
|
||||
// Only update if different to avoid triggering unnecessary updates
|
||||
const newIds = (c.group_ids ?? []).slice()
|
||||
const currentIds = subscriptionSelections[gi]?.[ci] ?? []
|
||||
if (JSON.stringify(newIds.sort()) !== JSON.stringify(currentIds.sort())) {
|
||||
subscriptionSelections[gi][ci] = newIds
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// Sync from subscriptionSelections to modelValue (one-way: local state -> model)
|
||||
// Use a debounced approach to avoid infinite loops
|
||||
let syncTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
watch(
|
||||
() => subscriptionSelections,
|
||||
() => {
|
||||
// Debounce the sync to avoid rapid fire updates
|
||||
if (syncTimeout) clearTimeout(syncTimeout)
|
||||
|
||||
syncTimeout = setTimeout(() => {
|
||||
// Build the new targeting state
|
||||
const newTargeting: TargetingDraft = JSON.parse(JSON.stringify(props.modelValue ?? { any_of: [] }))
|
||||
if (!newTargeting.any_of) newTargeting.any_of = []
|
||||
|
||||
const groups = newTargeting.any_of ?? []
|
||||
for (let gi = 0; gi < groups.length; gi++) {
|
||||
const allOf = groups[gi]?.all_of ?? []
|
||||
for (let ci = 0; ci < allOf.length; ci++) {
|
||||
const c = allOf[ci]
|
||||
if (c?.type === 'subscription') {
|
||||
ensureSelectionPath(gi, ci)
|
||||
c.operator = 'in' as AnnouncementOperator
|
||||
c.group_ids = (subscriptionSelections[gi]?.[ci] ?? []).slice()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only emit if there's an actual change (deep comparison)
|
||||
if (JSON.stringify(props.modelValue) !== JSON.stringify(newTargeting)) {
|
||||
emit('update:modelValue', newTargeting)
|
||||
}
|
||||
}, 0)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const validationError = computed(() => {
|
||||
if (mode.value !== 'custom') return ''
|
||||
|
||||
const groups = anyOf.value
|
||||
if (groups.length === 0) return t('admin.announcements.form.addOrGroup')
|
||||
|
||||
if (groups.length > 50) return 'any_of > 50'
|
||||
|
||||
for (const g of groups) {
|
||||
const allOf = g?.all_of ?? []
|
||||
if (allOf.length === 0) return t('admin.announcements.form.addAndCondition')
|
||||
if (allOf.length > 50) return 'all_of > 50'
|
||||
|
||||
for (const c of allOf) {
|
||||
if (c.type === 'subscription') {
|
||||
if (!c.group_ids || c.group_ids.length === 0) return t('admin.announcements.form.selectPackages')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,496 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="t('admin.groups.rateMultipliersTitle')" width="wide" @close="handleClose">
|
||||
<div v-if="group" class="space-y-4">
|
||||
<!-- 分组信息 -->
|
||||
<div class="flex flex-wrap items-center gap-3 rounded-lg bg-gray-50 px-4 py-2.5 text-sm dark:bg-dark-700">
|
||||
<span class="inline-flex items-center gap-1.5" :class="platformColorClass">
|
||||
<PlatformIcon :platform="group.platform" size="sm" />
|
||||
{{ t('admin.groups.platforms.' + group.platform) }}
|
||||
</span>
|
||||
<span class="text-gray-400">|</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ group.name }}</span>
|
||||
<span class="text-gray-400">|</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">
|
||||
{{ t('admin.groups.columns.rateMultiplier') }}: {{ group.rate_multiplier }}x
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 操作区 -->
|
||||
<div class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
|
||||
<!-- 添加用户 -->
|
||||
<h4 class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.groups.addUserRate') }}
|
||||
</h4>
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
class="input w-full"
|
||||
:placeholder="t('admin.groups.searchUserPlaceholder')"
|
||||
@input="handleSearchUsers"
|
||||
@focus="showDropdown = true"
|
||||
/>
|
||||
<div
|
||||
v-if="showDropdown && searchResults.length > 0"
|
||||
class="absolute left-0 right-0 top-full z-10 mt-1 max-h-48 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dark-500 dark:bg-dark-700"
|
||||
>
|
||||
<button
|
||||
v-for="user in searchResults"
|
||||
:key="user.id"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-gray-50 dark:hover:bg-dark-600"
|
||||
@click="selectUser(user)"
|
||||
>
|
||||
<span class="text-gray-400">#{{ user.id }}</span>
|
||||
<span class="text-gray-900 dark:text-white">{{ user.username || user.email }}</span>
|
||||
<span v-if="user.username" class="text-xs text-gray-400">{{ user.email }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-24">
|
||||
<input
|
||||
v-model.number="newRate"
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0"
|
||||
autocomplete="off"
|
||||
class="hide-spinner input w-full"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary shrink-0"
|
||||
:disabled="!selectedUser || !newRate"
|
||||
@click="handleAddLocal"
|
||||
>
|
||||
{{ t('common.add') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 批量调整 + 全部清空 -->
|
||||
<div v-if="localEntries.length > 0" class="mt-3 flex items-center gap-3 border-t border-gray-100 pt-3 dark:border-dark-600">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.groups.batchAdjust') }}</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-xs text-gray-400">×</span>
|
||||
<input
|
||||
v-model.number="batchFactor"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
autocomplete="off"
|
||||
class="hide-spinner w-20 rounded border border-gray-200 bg-white px-2 py-1 text-center text-sm transition-colors focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500/20 dark:border-dark-500 dark:bg-dark-700 dark:focus:border-primary-500"
|
||||
placeholder="0.5"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm shrink-0 px-2.5 py-1 text-xs"
|
||||
:disabled="!batchFactor || batchFactor <= 0"
|
||||
@click="applyBatchFactor"
|
||||
>
|
||||
{{ t('admin.groups.applyMultiplier') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400 dark:hover:bg-red-900/40"
|
||||
@click="clearAllLocal"
|
||||
>
|
||||
{{ t('admin.groups.clearAll') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="flex justify-center py-6">
|
||||
<svg class="h-6 w-6 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 已设置的用户列表 -->
|
||||
<div v-else>
|
||||
<h4 class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.groups.rateMultipliers') }} ({{ localEntries.length }})
|
||||
</h4>
|
||||
|
||||
<div v-if="localEntries.length === 0" class="py-6 text-center text-sm text-gray-400 dark:text-gray-500">
|
||||
{{ t('admin.groups.noRateMultipliers') }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- 表格 -->
|
||||
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600">
|
||||
<div class="max-h-[420px] overflow-y-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="sticky top-0 z-[1]">
|
||||
<tr class="border-b border-gray-200 bg-gray-50 dark:border-dark-600 dark:bg-dark-700">
|
||||
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.groups.columns.userEmail') }}</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">ID</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.groups.columns.userName') }}</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.groups.columns.userNotes') }}</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.groups.columns.userStatus') }}</th>
|
||||
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.groups.columns.rateMultiplier') }}</th>
|
||||
<th v-if="showFinalRate" class="px-3 py-2 text-left text-xs font-medium text-primary-600 dark:text-primary-400">{{ t('admin.groups.finalRate') }}</th>
|
||||
<th class="w-10 px-2 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-dark-600">
|
||||
<tr
|
||||
v-for="entry in paginatedLocalEntries"
|
||||
:key="entry.user_id"
|
||||
class="hover:bg-gray-50 dark:hover:bg-dark-700/50"
|
||||
>
|
||||
<td class="px-3 py-2 text-gray-600 dark:text-gray-400">{{ entry.user_email }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-2 text-gray-400 dark:text-gray-500">{{ entry.user_id }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-2 text-gray-900 dark:text-white">{{ entry.user_name || '-' }}</td>
|
||||
<td class="max-w-[160px] truncate px-3 py-2 text-gray-500 dark:text-gray-400" :title="entry.user_notes">{{ entry.user_notes || '-' }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-2">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
|
||||
entry.user_status === 'active'
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-dark-600 dark:text-gray-400'
|
||||
]"
|
||||
>
|
||||
{{ entry.user_status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-2">
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0"
|
||||
autocomplete="off"
|
||||
:value="entry.rate_multiplier"
|
||||
class="hide-spinner w-20 rounded border border-gray-200 bg-white px-2 py-1 text-center text-sm font-medium transition-colors focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500/20 dark:border-dark-500 dark:bg-dark-700 dark:focus:border-primary-500"
|
||||
@change="updateLocalRate(entry.user_id, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</td>
|
||||
<td v-if="showFinalRate" class="whitespace-nowrap px-3 py-2 font-medium text-primary-600 dark:text-primary-400">
|
||||
{{ computeFinalRate(entry.rate_multiplier) }}
|
||||
</td>
|
||||
<td class="px-2 py-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
|
||||
@click="removeLocal(entry.user_id)"
|
||||
>
|
||||
<Icon name="trash" size="sm" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="localEntries.length"
|
||||
:page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
@update:page="currentPage = $event"
|
||||
@update:pageSize="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="flex items-center gap-3 border-t border-gray-200 pt-4 dark:border-dark-600">
|
||||
<!-- 左侧：未保存提示 + 撤销 -->
|
||||
<template v-if="isDirty">
|
||||
<span class="text-xs text-amber-600 dark:text-amber-400">{{ t('admin.groups.unsavedChanges') }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
|
||||
@click="handleCancel"
|
||||
>
|
||||
{{ t('admin.groups.revertChanges') }}
|
||||
</button>
|
||||
</template>
|
||||
<!-- 右侧：关闭 / 保存 -->
|
||||
<div class="ml-auto flex items-center gap-3">
|
||||
<button type="button" class="btn btn-sm px-4 py-1.5" @click="handleClose">
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="isDirty"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm px-4 py-1.5"
|
||||
:disabled="saving"
|
||||
@click="handleSave"
|
||||
>
|
||||
<Icon v-if="saving" name="refresh" size="sm" class="mr-1 animate-spin" />
|
||||
{{ t('common.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { GroupRateMultiplierEntry } from '@/api/admin/groups'
|
||||
import type { AdminGroup, AdminUser } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Pagination from '@/components/common/Pagination.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import PlatformIcon from '@/components/common/PlatformIcon.vue'
|
||||
|
||||
interface LocalEntry extends GroupRateMultiplierEntry {}
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
group: AdminGroup | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
success: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const serverEntries = ref<GroupRateMultiplierEntry[]>([])
|
||||
const localEntries = ref<LocalEntry[]>([])
|
||||
const searchQuery = ref('')
|
||||
const searchResults = ref<AdminUser[]>([])
|
||||
const showDropdown = ref(false)
|
||||
const selectedUser = ref<AdminUser | null>(null)
|
||||
const newRate = ref<number | null>(null)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const batchFactor = ref<number | null>(null)
|
||||
|
||||
let searchTimeout: ReturnType<typeof setTimeout>
|
||||
|
||||
const platformColorClass = computed(() => {
|
||||
switch (props.group?.platform) {
|
||||
case 'anthropic': return 'text-orange-700 dark:text-orange-400'
|
||||
case 'openai': return 'text-emerald-700 dark:text-emerald-400'
|
||||
case 'antigravity': return 'text-purple-700 dark:text-purple-400'
|
||||
default: return 'text-blue-700 dark:text-blue-400'
|
||||
}
|
||||
})
|
||||
|
||||
// 是否显示"最终倍率"预览列
|
||||
const showFinalRate = computed(() => {
|
||||
return batchFactor.value != null && batchFactor.value > 0 && batchFactor.value !== 1
|
||||
})
|
||||
|
||||
// 计算最终倍率预览
|
||||
const computeFinalRate = (rate: number) => {
|
||||
if (!batchFactor.value) return rate
|
||||
return parseFloat((rate * batchFactor.value).toFixed(6))
|
||||
}
|
||||
|
||||
// 检测是否有未保存的修改
|
||||
const isDirty = computed(() => {
|
||||
if (localEntries.value.length !== serverEntries.value.length) return true
|
||||
const serverMap = new Map(serverEntries.value.map(e => [e.user_id, e.rate_multiplier]))
|
||||
return localEntries.value.some(e => {
|
||||
const serverRate = serverMap.get(e.user_id)
|
||||
return serverRate === undefined || serverRate !== e.rate_multiplier
|
||||
})
|
||||
})
|
||||
|
||||
const paginatedLocalEntries = computed(() => {
|
||||
const start = (currentPage.value - 1) * pageSize.value
|
||||
return localEntries.value.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
const cloneEntries = (entries: GroupRateMultiplierEntry[]): LocalEntry[] => {
|
||||
return entries.map(e => ({ ...e }))
|
||||
}
|
||||
|
||||
const loadEntries = async () => {
|
||||
if (!props.group) return
|
||||
loading.value = true
|
||||
try {
|
||||
serverEntries.value = await adminAPI.groups.getGroupRateMultipliers(props.group.id)
|
||||
localEntries.value = cloneEntries(serverEntries.value)
|
||||
adjustPage()
|
||||
} catch (error) {
|
||||
appStore.showError(t('admin.groups.failedToLoad'))
|
||||
console.error('Error loading group rate multipliers:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const adjustPage = () => {
|
||||
const totalPages = Math.max(1, Math.ceil(localEntries.value.length / pageSize.value))
|
||||
if (currentPage.value > totalPages) {
|
||||
currentPage.value = totalPages
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.show, (val) => {
|
||||
if (val && props.group) {
|
||||
currentPage.value = 1
|
||||
batchFactor.value = null
|
||||
searchQuery.value = ''
|
||||
searchResults.value = []
|
||||
selectedUser.value = null
|
||||
newRate.value = null
|
||||
loadEntries()
|
||||
}
|
||||
})
|
||||
|
||||
const handlePageSizeChange = (newSize: number) => {
|
||||
pageSize.value = newSize
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const handleSearchUsers = () => {
|
||||
clearTimeout(searchTimeout)
|
||||
selectedUser.value = null
|
||||
if (!searchQuery.value.trim()) {
|
||||
searchResults.value = []
|
||||
showDropdown.value = false
|
||||
return
|
||||
}
|
||||
searchTimeout = setTimeout(async () => {
|
||||
try {
|
||||
const res = await adminAPI.users.list(1, 10, { search: searchQuery.value.trim() })
|
||||
searchResults.value = res.items
|
||||
showDropdown.value = true
|
||||
} catch {
|
||||
searchResults.value = []
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const selectUser = (user: AdminUser) => {
|
||||
selectedUser.value = user
|
||||
searchQuery.value = user.email
|
||||
showDropdown.value = false
|
||||
searchResults.value = []
|
||||
}
|
||||
|
||||
// 本地添加（或覆盖已有用户）
|
||||
const handleAddLocal = () => {
|
||||
if (!selectedUser.value || !newRate.value) return
|
||||
const user = selectedUser.value
|
||||
const idx = localEntries.value.findIndex(e => e.user_id === user.id)
|
||||
const entry: LocalEntry = {
|
||||
user_id: user.id,
|
||||
user_name: user.username || '',
|
||||
user_email: user.email,
|
||||
user_notes: user.notes || '',
|
||||
user_status: user.status || 'active',
|
||||
rate_multiplier: newRate.value
|
||||
}
|
||||
if (idx >= 0) {
|
||||
localEntries.value[idx] = entry
|
||||
} else {
|
||||
localEntries.value.push(entry)
|
||||
}
|
||||
searchQuery.value = ''
|
||||
selectedUser.value = null
|
||||
newRate.value = null
|
||||
adjustPage()
|
||||
}
|
||||
|
||||
// 本地修改倍率
|
||||
const updateLocalRate = (userId: number, value: string) => {
|
||||
const num = parseFloat(value)
|
||||
if (isNaN(num)) return
|
||||
const entry = localEntries.value.find(e => e.user_id === userId)
|
||||
if (entry) {
|
||||
entry.rate_multiplier = num
|
||||
}
|
||||
}
|
||||
|
||||
// 本地删除
|
||||
const removeLocal = (userId: number) => {
|
||||
localEntries.value = localEntries.value.filter(e => e.user_id !== userId)
|
||||
adjustPage()
|
||||
}
|
||||
|
||||
// 批量乘数应用到本地
|
||||
const applyBatchFactor = () => {
|
||||
if (!batchFactor.value || batchFactor.value <= 0) return
|
||||
for (const entry of localEntries.value) {
|
||||
entry.rate_multiplier = parseFloat((entry.rate_multiplier * batchFactor.value).toFixed(6))
|
||||
}
|
||||
batchFactor.value = null
|
||||
}
|
||||
|
||||
// 本地清空
|
||||
const clearAllLocal = () => {
|
||||
localEntries.value = []
|
||||
}
|
||||
|
||||
// 取消：恢复到服务器数据
|
||||
const handleCancel = () => {
|
||||
localEntries.value = cloneEntries(serverEntries.value)
|
||||
batchFactor.value = null
|
||||
adjustPage()
|
||||
}
|
||||
|
||||
// 保存：一次性提交所有数据
|
||||
const handleSave = async () => {
|
||||
if (!props.group) return
|
||||
saving.value = true
|
||||
try {
|
||||
const entries = localEntries.value.map(e => ({
|
||||
user_id: e.user_id,
|
||||
rate_multiplier: e.rate_multiplier
|
||||
}))
|
||||
await adminAPI.groups.batchSetGroupRateMultipliers(props.group.id, entries)
|
||||
appStore.showSuccess(t('admin.groups.rateSaved'))
|
||||
emit('success')
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
appStore.showError(t('admin.groups.failedToSave'))
|
||||
console.error('Error saving rate multipliers:', error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭时如果有未保存修改，先恢复
|
||||
const handleClose = () => {
|
||||
if (isDirty.value) {
|
||||
localEntries.value = cloneEntries(serverEntries.value)
|
||||
}
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 点击外部关闭下拉
|
||||
const handleClickOutside = () => {
|
||||
showDropdown.value = false
|
||||
}
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hide-spinner::-webkit-outer-spin-button,
|
||||
.hide-spinner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.hide-spinner {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.proxies.dataImportTitle')"
|
||||
width="normal"
|
||||
close-on-click-outside
|
||||
@close="handleClose"
|
||||
>
|
||||
<form id="import-proxy-data-form" class="space-y-4" @submit.prevent="handleImport">
|
||||
<div class="text-sm text-gray-600 dark:text-dark-300">
|
||||
{{ t('admin.proxies.dataImportHint') }}
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-600 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-400"
|
||||
>
|
||||
{{ t('admin.proxies.dataImportWarning') }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.proxies.dataImportFile') }}</label>
|
||||
<div
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-3 dark:border-dark-600 dark:bg-dark-800"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="truncate text-sm text-gray-700 dark:text-dark-200">
|
||||
{{ fileName || t('admin.proxies.dataImportSelectFile') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-dark-400">JSON (.json)</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary shrink-0" @click="openFilePicker">
|
||||
{{ t('common.chooseFile') }}
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
class="hidden"
|
||||
accept="application/json,.json"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="result"
|
||||
class="space-y-2 rounded-xl border border-gray-200 p-4 dark:border-dark-700"
|
||||
>
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ t('admin.proxies.dataImportResult') }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 dark:text-dark-300">
|
||||
{{ t('admin.proxies.dataImportResultSummary', result) }}
|
||||
</div>
|
||||
|
||||
<div v-if="errorItems.length" class="mt-2">
|
||||
<div class="text-sm font-medium text-red-600 dark:text-red-400">
|
||||
{{ t('admin.proxies.dataImportErrors') }}
|
||||
</div>
|
||||
<div
|
||||
class="mt-2 max-h-48 overflow-auto rounded-lg bg-gray-50 p-3 font-mono text-xs dark:bg-dark-800"
|
||||
>
|
||||
<div v-for="(item, idx) in errorItems" :key="idx" class="whitespace-pre-wrap">
|
||||
{{ item.kind }} {{ item.name || item.proxy_key || '-' }} — {{ item.message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="btn btn-secondary" type="button" :disabled="importing" @click="handleClose">
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
form="import-proxy-data-form"
|
||||
:disabled="importing"
|
||||
>
|
||||
{{ importing ? t('admin.proxies.dataImporting') : t('admin.proxies.dataImportButton') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import type { AdminDataImportResult } from '@/types'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
(e: 'imported'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const importing = ref(false)
|
||||
const file = ref<File | null>(null)
|
||||
const result = ref<AdminDataImportResult | null>(null)
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const fileName = computed(() => file.value?.name || '')
|
||||
|
||||
const errorItems = computed(() => result.value?.errors || [])
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(open) => {
|
||||
if (open) {
|
||||
file.value = null
|
||||
result.value = null
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const openFilePicker = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleFileChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
file.value = target.files?.[0] || null
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
if (importing.value) return
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const readFileAsText = async (sourceFile: File): Promise<string> => {
|
||||
if (typeof sourceFile.text === 'function') {
|
||||
return sourceFile.text()
|
||||
}
|
||||
|
||||
if (typeof sourceFile.arrayBuffer === 'function') {
|
||||
const buffer = await sourceFile.arrayBuffer()
|
||||
return new TextDecoder().decode(buffer)
|
||||
}
|
||||
|
||||
return await new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(String(reader.result ?? ''))
|
||||
reader.onerror = () => reject(reader.error || new Error('Failed to read file'))
|
||||
reader.readAsText(sourceFile)
|
||||
})
|
||||
}
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!file.value) {
|
||||
appStore.showError(t('admin.proxies.dataImportSelectFile'))
|
||||
return
|
||||
}
|
||||
|
||||
importing.value = true
|
||||
try {
|
||||
const text = await readFileAsText(file.value)
|
||||
const dataPayload = JSON.parse(text)
|
||||
|
||||
const res = await adminAPI.proxies.importData({ data: dataPayload })
|
||||
|
||||
result.value = res
|
||||
|
||||
const msgParams: Record<string, unknown> = {
|
||||
proxy_created: res.proxy_created,
|
||||
proxy_reused: res.proxy_reused,
|
||||
proxy_failed: res.proxy_failed
|
||||
}
|
||||
|
||||
if (res.proxy_failed > 0) {
|
||||
appStore.showError(t('admin.proxies.dataImportCompletedWithErrors', msgParams))
|
||||
} else {
|
||||
appStore.showSuccess(t('admin.proxies.dataImportSuccess', msgParams))
|
||||
emit('imported')
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error instanceof SyntaxError) {
|
||||
appStore.showError(t('admin.proxies.dataImportParseFailed'))
|
||||
} else {
|
||||
appStore.showError(error?.message || t('admin.proxies.dataImportFailed'))
|
||||
}
|
||||
} finally {
|
||||
importing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="t('admin.usage.cleanup.title')" width="wide" @close="handleClose">
|
||||
<div class="space-y-4">
|
||||
<UsageFilters
|
||||
v-model="localFilters"
|
||||
v-model:startDate="localStartDate"
|
||||
v-model:endDate="localEndDate"
|
||||
:exporting="false"
|
||||
:show-actions="false"
|
||||
@change="noop"
|
||||
/>
|
||||
|
||||
<div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">
|
||||
{{ t('admin.usage.cleanup.warning') }}
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-gray-200 p-4 dark:border-dark-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-200">
|
||||
{{ t('admin.usage.cleanup.recentTasks') }}
|
||||
</h4>
|
||||
<button type="button" class="btn btn-ghost btn-sm" @click="loadTasks">
|
||||
{{ t('common.refresh') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 space-y-2">
|
||||
<div v-if="tasksLoading" class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.usage.cleanup.loadingTasks') }}
|
||||
</div>
|
||||
<div v-else-if="tasks.length === 0" class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.usage.cleanup.noTasks') }}
|
||||
</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
class="flex flex-col gap-2 rounded-lg border border-gray-100 px-3 py-2 text-sm text-gray-600 dark:border-dark-700 dark:text-gray-300"
|
||||
>
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span :class="statusClass(task.status)" class="rounded-full px-2 py-0.5 text-xs font-semibold">
|
||||
{{ statusLabel(task.status) }}
|
||||
</span>
|
||||
<span class="text-xs text-gray-400">#{{ task.id }}</span>
|
||||
<button
|
||||
v-if="canCancel(task)"
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs text-rose-600 hover:text-rose-700 dark:text-rose-300"
|
||||
@click="openCancelConfirm(task)"
|
||||
>
|
||||
{{ t('admin.usage.cleanup.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-xs text-gray-400">
|
||||
{{ formatDateTime(task.created_at) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>{{ t('admin.usage.cleanup.range') }}: {{ formatRange(task) }}</span>
|
||||
<span>{{ t('admin.usage.cleanup.deletedRows') }}: {{ task.deleted_rows.toLocaleString() }}</span>
|
||||
</div>
|
||||
<div v-if="task.error_message" class="text-xs text-rose-500">
|
||||
{{ task.error_message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
v-if="tasksTotal > tasksPageSize"
|
||||
class="mt-4"
|
||||
:total="tasksTotal"
|
||||
:page="tasksPage"
|
||||
:page-size="tasksPageSize"
|
||||
:page-size-options="[5]"
|
||||
:show-page-size-selector="false"
|
||||
:show-jump="true"
|
||||
@update:page="handleTaskPageChange"
|
||||
@update:pageSize="handleTaskPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button type="button" class="btn btn-secondary" @click="handleClose">
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" :disabled="submitting" @click="openConfirm">
|
||||
{{ submitting ? t('admin.usage.cleanup.submitting') : t('admin.usage.cleanup.submit') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
|
||||
<ConfirmDialog
|
||||
:show="confirmVisible"
|
||||
:title="t('admin.usage.cleanup.confirmTitle')"
|
||||
:message="t('admin.usage.cleanup.confirmMessage')"
|
||||
:confirm-text="t('admin.usage.cleanup.confirmSubmit')"
|
||||
danger
|
||||
@confirm="submitCleanup"
|
||||
@cancel="confirmVisible = false"
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
:show="cancelConfirmVisible"
|
||||
:title="t('admin.usage.cleanup.cancelConfirmTitle')"
|
||||
:message="t('admin.usage.cleanup.cancelConfirmMessage')"
|
||||
:confirm-text="t('admin.usage.cleanup.cancelConfirm')"
|
||||
danger
|
||||
@confirm="cancelTask"
|
||||
@cancel="cancelConfirmVisible = false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
|
||||
import Pagination from '@/components/common/Pagination.vue'
|
||||
import UsageFilters from '@/components/admin/usage/UsageFilters.vue'
|
||||
import { adminUsageAPI } from '@/api/admin/usage'
|
||||
import type { AdminUsageQueryParams, UsageCleanupTask, CreateUsageCleanupTaskRequest } from '@/api/admin/usage'
|
||||
import { requestTypeToLegacyStream } from '@/utils/usageRequestType'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
filters: AdminUsageQueryParams
|
||||
startDate: string
|
||||
endDate: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const localFilters = ref<AdminUsageQueryParams>({})
|
||||
const localStartDate = ref('')
|
||||
const localEndDate = ref('')
|
||||
|
||||
const tasks = ref<UsageCleanupTask[]>([])
|
||||
const tasksLoading = ref(false)
|
||||
const tasksPage = ref(1)
|
||||
const tasksPageSize = ref(5)
|
||||
const tasksTotal = ref(0)
|
||||
const submitting = ref(false)
|
||||
const confirmVisible = ref(false)
|
||||
const cancelConfirmVisible = ref(false)
|
||||
const canceling = ref(false)
|
||||
const cancelTarget = ref<UsageCleanupTask | null>(null)
|
||||
let pollTimer: number | null = null
|
||||
|
||||
const noop = () => {}
|
||||
|
||||
const resetFilters = () => {
|
||||
localFilters.value = { ...props.filters }
|
||||
localStartDate.value = props.startDate
|
||||
localEndDate.value = props.endDate
|
||||
localFilters.value.start_date = localStartDate.value
|
||||
localFilters.value.end_date = localEndDate.value
|
||||
tasksPage.value = 1
|
||||
tasksTotal.value = 0
|
||||
}
|
||||
|
||||
const startPolling = () => {
|
||||
stopPolling()
|
||||
pollTimer = window.setInterval(() => {
|
||||
loadTasks()
|
||||
}, 10000)
|
||||
}
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollTimer !== null) {
|
||||
window.clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
stopPolling()
|
||||
confirmVisible.value = false
|
||||
cancelConfirmVisible.value = false
|
||||
canceling.value = false
|
||||
cancelTarget.value = null
|
||||
submitting.value = false
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const statusLabel = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
pending: t('admin.usage.cleanup.status.pending'),
|
||||
running: t('admin.usage.cleanup.status.running'),
|
||||
succeeded: t('admin.usage.cleanup.status.succeeded'),
|
||||
failed: t('admin.usage.cleanup.status.failed'),
|
||||
canceled: t('admin.usage.cleanup.status.canceled')
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
const statusClass = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
pending: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
|
||||
running: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-200',
|
||||
succeeded: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200',
|
||||
failed: 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200',
|
||||
canceled: 'bg-gray-200 text-gray-600 dark:bg-dark-600 dark:text-gray-300'
|
||||
}
|
||||
return map[status] || 'bg-gray-100 text-gray-600'
|
||||
}
|
||||
|
||||
const formatDateTime = (value?: string | null) => {
|
||||
if (!value) return '--'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return value
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
const formatRange = (task: UsageCleanupTask) => {
|
||||
const start = formatDateTime(task.filters.start_time)
|
||||
const end = formatDateTime(task.filters.end_time)
|
||||
return `${start} ~ ${end}`
|
||||
}
|
||||
|
||||
const getUserTimezone = () => {
|
||||
try {
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
} catch {
|
||||
return 'UTC'
|
||||
}
|
||||
}
|
||||
|
||||
const loadTasks = async () => {
|
||||
if (!props.show) return
|
||||
tasksLoading.value = true
|
||||
try {
|
||||
const res = await adminUsageAPI.listCleanupTasks({
|
||||
page: tasksPage.value,
|
||||
page_size: tasksPageSize.value
|
||||
})
|
||||
tasks.value = res.items || []
|
||||
tasksTotal.value = res.total || 0
|
||||
if (res.page) {
|
||||
tasksPage.value = res.page
|
||||
}
|
||||
if (res.page_size) {
|
||||
tasksPageSize.value = res.page_size
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load cleanup tasks:', error)
|
||||
appStore.showError(t('admin.usage.cleanup.loadFailed'))
|
||||
} finally {
|
||||
tasksLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleTaskPageChange = (page: number) => {
|
||||
tasksPage.value = page
|
||||
loadTasks()
|
||||
}
|
||||
|
||||
const handleTaskPageSizeChange = (size: number) => {
|
||||
if (!Number.isFinite(size) || size <= 0) return
|
||||
tasksPageSize.value = size
|
||||
tasksPage.value = 1
|
||||
loadTasks()
|
||||
}
|
||||
|
||||
const openConfirm = () => {
|
||||
confirmVisible.value = true
|
||||
}
|
||||
|
||||
const canCancel = (task: UsageCleanupTask) => {
|
||||
return task.status === 'pending' || task.status === 'running'
|
||||
}
|
||||
|
||||
const openCancelConfirm = (task: UsageCleanupTask) => {
|
||||
cancelTarget.value = task
|
||||
cancelConfirmVisible.value = true
|
||||
}
|
||||
|
||||
const buildPayload = (): CreateUsageCleanupTaskRequest | null => {
|
||||
if (!localStartDate.value || !localEndDate.value) {
|
||||
appStore.showError(t('admin.usage.cleanup.missingRange'))
|
||||
return null
|
||||
}
|
||||
|
||||
const payload: CreateUsageCleanupTaskRequest = {
|
||||
start_date: localStartDate.value,
|
||||
end_date: localEndDate.value,
|
||||
timezone: getUserTimezone()
|
||||
}
|
||||
|
||||
if (localFilters.value.user_id && localFilters.value.user_id > 0) {
|
||||
payload.user_id = localFilters.value.user_id
|
||||
}
|
||||
if (localFilters.value.api_key_id && localFilters.value.api_key_id > 0) {
|
||||
payload.api_key_id = localFilters.value.api_key_id
|
||||
}
|
||||
if (localFilters.value.account_id && localFilters.value.account_id > 0) {
|
||||
payload.account_id = localFilters.value.account_id
|
||||
}
|
||||
if (localFilters.value.group_id && localFilters.value.group_id > 0) {
|
||||
payload.group_id = localFilters.value.group_id
|
||||
}
|
||||
if (localFilters.value.model) {
|
||||
payload.model = localFilters.value.model
|
||||
}
|
||||
if (localFilters.value.request_type) {
|
||||
payload.request_type = localFilters.value.request_type
|
||||
const legacyStream = requestTypeToLegacyStream(localFilters.value.request_type)
|
||||
if (legacyStream !== null && legacyStream !== undefined) {
|
||||
payload.stream = legacyStream
|
||||
}
|
||||
} else if (localFilters.value.stream !== null && localFilters.value.stream !== undefined) {
|
||||
payload.stream = localFilters.value.stream
|
||||
}
|
||||
if (localFilters.value.billing_type !== null && localFilters.value.billing_type !== undefined) {
|
||||
payload.billing_type = localFilters.value.billing_type
|
||||
}
|
||||
|
||||
return payload
|
||||
}
|
||||
|
||||
const submitCleanup = async () => {
|
||||
const payload = buildPayload()
|
||||
if (!payload) {
|
||||
confirmVisible.value = false
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
confirmVisible.value = false
|
||||
try {
|
||||
await adminUsageAPI.createCleanupTask(payload)
|
||||
appStore.showSuccess(t('admin.usage.cleanup.submitSuccess'))
|
||||
loadTasks()
|
||||
} catch (error) {
|
||||
console.error('Failed to create cleanup task:', error)
|
||||
appStore.showError(t('admin.usage.cleanup.submitFailed'))
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const cancelTask = async () => {
|
||||
const task = cancelTarget.value
|
||||
if (!task) {
|
||||
cancelConfirmVisible.value = false
|
||||
return
|
||||
}
|
||||
canceling.value = true
|
||||
cancelConfirmVisible.value = false
|
||||
try {
|
||||
await adminUsageAPI.cancelCleanupTask(task.id)
|
||||
appStore.showSuccess(t('admin.usage.cleanup.cancelSuccess'))
|
||||
loadTasks()
|
||||
} catch (error) {
|
||||
console.error('Failed to cancel cleanup task:', error)
|
||||
appStore.showError(t('admin.usage.cleanup.cancelFailed'))
|
||||
} finally {
|
||||
canceling.value = false
|
||||
cancelTarget.value = null
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(show) => {
|
||||
if (show) {
|
||||
resetFilters()
|
||||
loadTasks()
|
||||
startPolling()
|
||||
} else {
|
||||
stopPolling()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<ExportProgressDialog
|
||||
:show="show"
|
||||
:progress="progress"
|
||||
:current="current"
|
||||
:total="total"
|
||||
:estimated-time="estimatedTime"
|
||||
@cancel="$emit('cancel')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ExportProgressDialog from '@/components/common/ExportProgressDialog.vue'
|
||||
defineProps<{ show: boolean, progress: number, current: number, total: number, estimatedTime: string }>()
|
||||
defineEmits(['cancel'])
|
||||
</script>
|
||||
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<div class="card p-6">
|
||||
<!-- Toolbar: left filters (multi-line) + right actions -->
|
||||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||||
<!-- Left: filters (allowed to wrap to multiple rows) -->
|
||||
<div class="flex flex-1 flex-wrap items-end gap-4">
|
||||
<!-- User Search -->
|
||||
<div ref="userSearchRef" class="usage-filter-dropdown relative w-full sm:w-auto sm:min-w-[240px]">
|
||||
<label class="input-label">{{ t('admin.usage.userFilter') }}</label>
|
||||
<input
|
||||
v-model="userKeyword"
|
||||
type="text"
|
||||
class="input pr-8"
|
||||
:placeholder="t('admin.usage.searchUserPlaceholder')"
|
||||
@input="debounceUserSearch"
|
||||
@focus="showUserDropdown = true"
|
||||
/>
|
||||
<button
|
||||
v-if="filters.user_id"
|
||||
type="button"
|
||||
@click="clearUser"
|
||||
class="absolute right-2 top-9 text-gray-400"
|
||||
aria-label="Clear user filter"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div
|
||||
v-if="showUserDropdown && (userResults.length > 0 || userKeyword)"
|
||||
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
|
||||
>
|
||||
<button
|
||||
v-for="u in userResults"
|
||||
:key="u.id"
|
||||
type="button"
|
||||
@click="selectUser(u)"
|
||||
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span>{{ u.email }}</span>
|
||||
<span class="ml-2 text-xs text-gray-400">#{{ u.id }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API Key Search -->
|
||||
<div ref="apiKeySearchRef" class="usage-filter-dropdown relative w-full sm:w-auto sm:min-w-[240px]">
|
||||
<label class="input-label">{{ t('usage.apiKeyFilter') }}</label>
|
||||
<input
|
||||
v-model="apiKeyKeyword"
|
||||
type="text"
|
||||
class="input pr-8"
|
||||
:placeholder="t('admin.usage.searchApiKeyPlaceholder')"
|
||||
@input="debounceApiKeySearch"
|
||||
@focus="onApiKeyFocus"
|
||||
/>
|
||||
<button
|
||||
v-if="filters.api_key_id"
|
||||
type="button"
|
||||
@click="onClearApiKey"
|
||||
class="absolute right-2 top-9 text-gray-400"
|
||||
aria-label="Clear API key filter"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div
|
||||
v-if="showApiKeyDropdown && apiKeyResults.length > 0"
|
||||
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
|
||||
>
|
||||
<button
|
||||
v-for="k in apiKeyResults"
|
||||
:key="k.id"
|
||||
type="button"
|
||||
@click="selectApiKey(k)"
|
||||
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span class="truncate">{{ k.name || `#${k.id}` }}</span>
|
||||
<span class="ml-2 text-xs text-gray-400">#{{ k.id }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Filter -->
|
||||
<div class="w-full sm:w-auto sm:min-w-[220px]">
|
||||
<label class="input-label">{{ t('usage.model') }}</label>
|
||||
<Select v-model="filters.model" :options="modelOptions" searchable @change="emitChange" />
|
||||
</div>
|
||||
|
||||
<!-- Account Filter -->
|
||||
<div ref="accountSearchRef" class="usage-filter-dropdown relative w-full sm:w-auto sm:min-w-[220px]">
|
||||
<label class="input-label">{{ t('admin.usage.account') }}</label>
|
||||
<input
|
||||
v-model="accountKeyword"
|
||||
type="text"
|
||||
class="input pr-8"
|
||||
:placeholder="t('admin.usage.searchAccountPlaceholder')"
|
||||
@input="debounceAccountSearch"
|
||||
@focus="showAccountDropdown = true"
|
||||
/>
|
||||
<button
|
||||
v-if="filters.account_id"
|
||||
type="button"
|
||||
@click="clearAccount"
|
||||
class="absolute right-2 top-9 text-gray-400"
|
||||
aria-label="Clear account filter"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div
|
||||
v-if="showAccountDropdown && (accountResults.length > 0 || accountKeyword)"
|
||||
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
|
||||
>
|
||||
<button
|
||||
v-for="a in accountResults"
|
||||
:key="a.id"
|
||||
type="button"
|
||||
@click="selectAccount(a)"
|
||||
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<span class="truncate">{{ a.name }}</span>
|
||||
<span class="ml-2 text-xs text-gray-400">#{{ a.id }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Request Type Filter -->
|
||||
<div class="w-full sm:w-auto sm:min-w-[180px]">
|
||||
<label class="input-label">{{ t('usage.type') }}</label>
|
||||
<Select v-model="filters.request_type" :options="requestTypeOptions" @change="emitChange" />
|
||||
</div>
|
||||
|
||||
<!-- Billing Type Filter -->
|
||||
<div class="w-full sm:w-auto sm:min-w-[200px]">
|
||||
<label class="input-label">{{ t('admin.usage.billingType') }}</label>
|
||||
<Select v-model="filters.billing_type" :options="billingTypeOptions" @change="emitChange" />
|
||||
</div>
|
||||
|
||||
<!-- Group Filter -->
|
||||
<div class="w-full sm:w-auto sm:min-w-[200px]">
|
||||
<label class="input-label">{{ t('admin.usage.group') }}</label>
|
||||
<Select v-model="filters.group_id" :options="groupOptions" searchable @change="emitChange" />
|
||||
</div>
|
||||
|
||||
<!-- Date Range Filter -->
|
||||
<div class="w-full sm:w-auto [&_.date-picker-trigger]:w-full">
|
||||
<label class="input-label">{{ t('usage.timeRange') }}</label>
|
||||
<DateRangePicker
|
||||
:start-date="startDate"
|
||||
:end-date="endDate"
|
||||
@update:startDate="updateStartDate"
|
||||
@update:endDate="updateEndDate"
|
||||
@change="emitChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: actions -->
|
||||
<div v-if="showActions" class="flex w-full flex-wrap items-center justify-end gap-3 sm:w-auto">
|
||||
<button type="button" @click="$emit('refresh')" class="btn btn-secondary">
|
||||
{{ t('common.refresh') }}
|
||||
</button>
|
||||
<button type="button" @click="$emit('reset')" class="btn btn-secondary">
|
||||
{{ t('common.reset') }}
|
||||
</button>
|
||||
<slot name="after-reset" />
|
||||
<button type="button" @click="$emit('cleanup')" class="btn btn-danger">
|
||||
{{ t('admin.usage.cleanup.button') }}
|
||||
</button>
|
||||
<button type="button" @click="$emit('export')" :disabled="exporting" class="btn btn-primary">
|
||||
{{ t('usage.exportExcel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, toRef, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import Select, { type SelectOption } from '@/components/common/Select.vue'
|
||||
import DateRangePicker from '@/components/common/DateRangePicker.vue'
|
||||
import type { SimpleApiKey, SimpleUser } from '@/api/admin/usage'
|
||||
|
||||
type ModelValue = Record<string, any>
|
||||
|
||||
interface Props {
|
||||
modelValue: ModelValue
|
||||
exporting: boolean
|
||||
startDate: string
|
||||
endDate: string
|
||||
showActions?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showActions: true
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:modelValue',
|
||||
'update:startDate',
|
||||
'update:endDate',
|
||||
'change',
|
||||
'refresh',
|
||||
'reset',
|
||||
'export',
|
||||
'cleanup'
|
||||
])
|
||||
|
||||
const { t } = useI18n()
|
||||
const filters = toRef(props, 'modelValue')
|
||||
|
||||
const userSearchRef = ref<HTMLElement | null>(null)
|
||||
const apiKeySearchRef = ref<HTMLElement | null>(null)
|
||||
const accountSearchRef = ref<HTMLElement | null>(null)
|
||||
|
||||
const userKeyword = ref('')
|
||||
const userResults = ref<SimpleUser[]>([])
|
||||
const showUserDropdown = ref(false)
|
||||
let userSearchTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const apiKeyKeyword = ref('')
|
||||
const apiKeyResults = ref<SimpleApiKey[]>([])
|
||||
const showApiKeyDropdown = ref(false)
|
||||
let apiKeySearchTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
interface SimpleAccount {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
const accountKeyword = ref('')
|
||||
const accountResults = ref<SimpleAccount[]>([])
|
||||
const showAccountDropdown = ref(false)
|
||||
let accountSearchTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const modelOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allModels') }])
|
||||
const groupOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allGroups') }])
|
||||
|
||||
const requestTypeOptions = ref<SelectOption[]>([
|
||||
{ value: null, label: t('admin.usage.allTypes') },
|
||||
{ value: 'ws_v2', label: t('usage.ws') },
|
||||
{ value: 'stream', label: t('usage.stream') },
|
||||
{ value: 'sync', label: t('usage.sync') }
|
||||
])
|
||||
|
||||
const billingTypeOptions = ref<SelectOption[]>([
|
||||
{ value: null, label: t('admin.usage.allBillingTypes') },
|
||||
{ value: 0, label: t('admin.usage.billingTypeBalance') },
|
||||
{ value: 1, label: t('admin.usage.billingTypeSubscription') }
|
||||
])
|
||||
|
||||
const emitChange = () => emit('change')
|
||||
|
||||
const updateStartDate = (value: string) => {
|
||||
emit('update:startDate', value)
|
||||
filters.value.start_date = value
|
||||
}
|
||||
|
||||
const updateEndDate = (value: string) => {
|
||||
emit('update:endDate', value)
|
||||
filters.value.end_date = value
|
||||
}
|
||||
|
||||
const debounceUserSearch = () => {
|
||||
if (userSearchTimeout) clearTimeout(userSearchTimeout)
|
||||
userSearchTimeout = setTimeout(async () => {
|
||||
if (!userKeyword.value) {
|
||||
userResults.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
userResults.value = await adminAPI.usage.searchUsers(userKeyword.value)
|
||||
} catch {
|
||||
userResults.value = []
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const debounceApiKeySearch = () => {
|
||||
if (apiKeySearchTimeout) clearTimeout(apiKeySearchTimeout)
|
||||
apiKeySearchTimeout = setTimeout(async () => {
|
||||
try {
|
||||
apiKeyResults.value = await adminAPI.usage.searchApiKeys(
|
||||
filters.value.user_id,
|
||||
apiKeyKeyword.value || ''
|
||||
)
|
||||
} catch {
|
||||
apiKeyResults.value = []
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const selectUser = async (u: SimpleUser) => {
|
||||
userKeyword.value = u.email
|
||||
showUserDropdown.value = false
|
||||
filters.value.user_id = u.id
|
||||
clearApiKey()
|
||||
|
||||
// Auto-load API keys for this user
|
||||
try {
|
||||
apiKeyResults.value = await adminAPI.usage.searchApiKeys(u.id, '')
|
||||
} catch {
|
||||
apiKeyResults.value = []
|
||||
}
|
||||
|
||||
emitChange()
|
||||
}
|
||||
|
||||
const clearUser = () => {
|
||||
userKeyword.value = ''
|
||||
userResults.value = []
|
||||
showUserDropdown.value = false
|
||||
filters.value.user_id = undefined
|
||||
clearApiKey()
|
||||
emitChange()
|
||||
}
|
||||
|
||||
const selectApiKey = (k: SimpleApiKey) => {
|
||||
apiKeyKeyword.value = k.name || String(k.id)
|
||||
showApiKeyDropdown.value = false
|
||||
filters.value.api_key_id = k.id
|
||||
emitChange()
|
||||
}
|
||||
|
||||
const clearApiKey = () => {
|
||||
apiKeyKeyword.value = ''
|
||||
apiKeyResults.value = []
|
||||
showApiKeyDropdown.value = false
|
||||
filters.value.api_key_id = undefined
|
||||
}
|
||||
|
||||
const onClearApiKey = () => {
|
||||
clearApiKey()
|
||||
emitChange()
|
||||
}
|
||||
|
||||
const debounceAccountSearch = () => {
|
||||
if (accountSearchTimeout) clearTimeout(accountSearchTimeout)
|
||||
accountSearchTimeout = setTimeout(async () => {
|
||||
if (!accountKeyword.value) {
|
||||
accountResults.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await adminAPI.accounts.list(1, 20, { search: accountKeyword.value })
|
||||
accountResults.value = res.items.map((a) => ({ id: a.id, name: a.name }))
|
||||
} catch {
|
||||
accountResults.value = []
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const selectAccount = (a: SimpleAccount) => {
|
||||
accountKeyword.value = a.name
|
||||
showAccountDropdown.value = false
|
||||
filters.value.account_id = a.id
|
||||
emitChange()
|
||||
}
|
||||
|
||||
const clearAccount = () => {
|
||||
accountKeyword.value = ''
|
||||
accountResults.value = []
|
||||
showAccountDropdown.value = false
|
||||
filters.value.account_id = undefined
|
||||
emitChange()
|
||||
}
|
||||
|
||||
const onApiKeyFocus = () => {
|
||||
showApiKeyDropdown.value = true
|
||||
// Trigger search if no results yet
|
||||
if (apiKeyResults.value.length === 0) {
|
||||
debounceApiKeySearch()
|
||||
}
|
||||
}
|
||||
|
||||
const onDocumentClick = (e: MouseEvent) => {
|
||||
const target = e.target as Node | null
|
||||
if (!target) return
|
||||
|
||||
const clickedInsideUser = userSearchRef.value?.contains(target) ?? false
|
||||
const clickedInsideApiKey = apiKeySearchRef.value?.contains(target) ?? false
|
||||
const clickedInsideAccount = accountSearchRef.value?.contains(target) ?? false
|
||||
|
||||
if (!clickedInsideUser) showUserDropdown.value = false
|
||||
if (!clickedInsideApiKey) showApiKeyDropdown.value = false
|
||||
if (!clickedInsideAccount) showAccountDropdown.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.startDate,
|
||||
(value) => {
|
||||
filters.value.start_date = value
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.endDate,
|
||||
(value) => {
|
||||
filters.value.end_date = value
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => filters.value.user_id,
|
||||
(userId) => {
|
||||
if (!userId) {
|
||||
userKeyword.value = ''
|
||||
userResults.value = []
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => filters.value.api_key_id,
|
||||
(apiKeyId) => {
|
||||
if (!apiKeyId) {
|
||||
apiKeyKeyword.value = ''
|
||||
apiKeyResults.value = []
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => filters.value.account_id,
|
||||
(accountId) => {
|
||||
if (!accountId) {
|
||||
accountKeyword.value = ''
|
||||
accountResults.value = []
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
document.addEventListener('click', onDocumentClick)
|
||||
|
||||
try {
|
||||
const [gs, ms] = await Promise.all([
|
||||
adminAPI.groups.list(1, 1000),
|
||||
adminAPI.dashboard.getModelStats({ start_date: props.startDate, end_date: props.endDate })
|
||||
])
|
||||
|
||||
groupOptions.value.push(...gs.items.map((g: any) => ({ value: g.id, label: g.name })))
|
||||
|
||||
const uniqueModels = new Set<string>()
|
||||
ms.models?.forEach((s: any) => s.model && uniqueModels.add(s.model))
|
||||
modelOptions.value.push(
|
||||
...Array.from(uniqueModels)
|
||||
.sort()
|
||||
.map((m) => ({ value: m, label: m }))
|
||||
)
|
||||
} catch {
|
||||
// Ignore filter option loading errors (page still usable)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', onDocumentClick)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
|
||||
<div class="card p-4 flex items-center gap-3">
|
||||
<div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30 text-blue-600">
|
||||
<Icon name="document" size="md" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-500">{{ t('usage.totalRequests') }}</p>
|
||||
<p class="text-xl font-bold">{{ stats?.total_requests?.toLocaleString() || '0' }}</p>
|
||||
<p class="text-xs text-gray-400">{{ t('usage.inSelectedRange') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-4 flex items-center gap-3">
|
||||
<div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30 text-amber-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg></div>
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-500">{{ t('usage.totalTokens') }}</p>
|
||||
<p class="text-xl font-bold">{{ formatTokens(stats?.total_tokens || 0) }}</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
{{ t('usage.in') }}: {{ formatTokens(stats?.total_input_tokens || 0) }} /
|
||||
{{ t('usage.out') }}: {{ formatTokens(stats?.total_output_tokens || 0) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-4 flex items-center gap-3">
|
||||
<div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30 text-green-600">
|
||||
<Icon name="dollar" size="md" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-xs font-medium text-gray-500">{{ t('usage.totalCost') }}</p>
|
||||
<p class="text-xl font-bold text-green-600">
|
||||
${{ ((stats?.total_account_cost ?? stats?.total_actual_cost) || 0).toFixed(4) }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400" v-if="stats?.total_account_cost != null">
|
||||
{{ t('usage.userBilled') }}:
|
||||
<span class="text-gray-300">${{ (stats?.total_actual_cost || 0).toFixed(4) }}</span>
|
||||
· {{ t('usage.standardCost') }}:
|
||||
<span class="text-gray-300">${{ (stats?.total_cost || 0).toFixed(4) }}</span>
|
||||
</p>
|
||||
<p class="text-xs text-gray-400" v-else>
|
||||
{{ t('usage.standardCost') }}:
|
||||
<span class="line-through">${{ (stats?.total_cost || 0).toFixed(4) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-4 flex items-center gap-3">
|
||||
<div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30 text-purple-600">
|
||||
<Icon name="clock" size="md" />
|
||||
</div>
|
||||
<div><p class="text-xs font-medium text-gray-500">{{ t('usage.avgDuration') }}</p><p class="text-xl font-bold">{{ formatDuration(stats?.average_duration_ms || 0) }}</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { AdminUsageStatsResponse } from '@/api/admin/usage'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
defineProps<{ stats: AdminUsageStatsResponse | null }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const formatDuration = (ms: number) =>
|
||||
ms < 1000 ? `${ms.toFixed(0)}ms` : `${(ms / 1000).toFixed(2)}s`
|
||||
|
||||
const formatTokens = (value: number) => {
|
||||
if (value >= 1e9) return (value / 1e9).toFixed(2) + 'B'
|
||||
if (value >= 1e6) return (value / 1e6).toFixed(2) + 'M'
|
||||
if (value >= 1e3) return (value / 1e3).toFixed(2) + 'K'
|
||||
return value.toLocaleString()
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,390 @@
|
||||
<template>
|
||||
<div class="card overflow-hidden">
|
||||
<div class="overflow-auto">
|
||||
<DataTable :columns="columns" :data="data" :loading="loading">
|
||||
<template #cell-user="{ row }">
|
||||
<div class="text-sm">
|
||||
<button
|
||||
v-if="row.user?.email"
|
||||
class="font-medium text-primary-600 underline decoration-dashed underline-offset-2 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
|
||||
@click="$emit('userClick', row.user_id, row.user?.email)"
|
||||
:title="t('admin.usage.clickToViewBalance')"
|
||||
>
|
||||
{{ row.user.email }}
|
||||
</button>
|
||||
<span v-else class="font-medium text-gray-900 dark:text-white">-</span>
|
||||
<span class="ml-1 text-gray-500 dark:text-gray-400">#{{ row.user_id }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell-api_key="{ row }">
|
||||
<span class="text-sm text-gray-900 dark:text-white">{{ row.api_key?.name || '-' }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-account="{ row }">
|
||||
<span class="text-sm text-gray-900 dark:text-white">{{ row.account?.name || '-' }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-model="{ value }">
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-reasoning_effort="{ row }">
|
||||
<span class="text-sm text-gray-900 dark:text-white">
|
||||
{{ formatReasoningEffort(row.reasoning_effort) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #cell-endpoint="{ row }">
|
||||
<div class="max-w-[320px] space-y-1 text-xs">
|
||||
<div class="break-all text-gray-700 dark:text-gray-300">
|
||||
<span class="font-medium text-gray-500 dark:text-gray-400">{{ t('usage.inbound') }}:</span>
|
||||
<span class="ml-1">{{ row.inbound_endpoint?.trim() || '-' }}</span>
|
||||
</div>
|
||||
<div class="break-all text-gray-700 dark:text-gray-300">
|
||||
<span class="font-medium text-gray-500 dark:text-gray-400">{{ t('usage.upstream') }}:</span>
|
||||
<span class="ml-1">{{ row.upstream_endpoint?.trim() || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell-group="{ row }">
|
||||
<span v-if="row.group" class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
|
||||
{{ row.group.name }}
|
||||
</span>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
|
||||
</template>
|
||||
|
||||
<template #cell-stream="{ row }">
|
||||
<span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getRequestTypeBadgeClass(row)">
|
||||
{{ getRequestTypeLabel(row) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #cell-tokens="{ row }">
|
||||
<!-- 图片生成请求 -->
|
||||
<div v-if="row.image_count > 0" class="flex items-center gap-1.5">
|
||||
<svg class="h-4 w-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ row.image_count }}{{ t('usage.imageUnit') }}</span>
|
||||
<span class="text-gray-400">({{ row.image_size || '2K' }})</span>
|
||||
</div>
|
||||
<!-- Token 请求 -->
|
||||
<div v-else class="flex items-center gap-1.5">
|
||||
<div class="space-y-1 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="inline-flex items-center gap-1">
|
||||
<Icon name="arrowDown" size="sm" class="h-3.5 w-3.5 text-emerald-500" />
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens?.toLocaleString() || 0 }}</span>
|
||||
</div>
|
||||
<div class="inline-flex items-center gap-1">
|
||||
<Icon name="arrowUp" size="sm" class="h-3.5 w-3.5 text-violet-500" />
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens?.toLocaleString() || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
|
||||
<div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
|
||||
<svg class="h-3.5 w-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg>
|
||||
<span class="font-medium text-sky-600 dark:text-sky-400">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
|
||||
</div>
|
||||
<div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
|
||||
<svg class="h-3.5 w-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
|
||||
<span class="font-medium text-amber-600 dark:text-amber-400">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
|
||||
<span v-if="row.cache_creation_1h_tokens > 0" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-100 text-orange-600 ring-1 ring-inset ring-orange-200 dark:bg-orange-500/20 dark:text-orange-400 dark:ring-orange-500/30">1h</span>
|
||||
<span v-if="row.cache_ttl_overridden" :title="t('usage.cacheTtlOverriddenHint')" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-rose-100 text-rose-600 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/20 dark:text-rose-400 dark:ring-rose-500/30 cursor-help">R</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Token Detail Tooltip -->
|
||||
<div
|
||||
class="group relative"
|
||||
@mouseenter="showTokenTooltip($event, row)"
|
||||
@mouseleave="hideTokenTooltip"
|
||||
>
|
||||
<div class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50">
|
||||
<Icon name="infoCircle" size="xs" class="text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell-cost="{ row }">
|
||||
<div class="text-sm">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-medium text-green-600 dark:text-green-400">${{ row.actual_cost?.toFixed(6) || '0.000000' }}</span>
|
||||
<!-- Cost Detail Tooltip -->
|
||||
<div
|
||||
class="group relative"
|
||||
@mouseenter="showTooltip($event, row)"
|
||||
@mouseleave="hideTooltip"
|
||||
>
|
||||
<div class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50">
|
||||
<Icon name="infoCircle" size="xs" class="text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="row.account_rate_multiplier != null" class="mt-0.5 text-[11px] text-gray-400">
|
||||
A ${{ (row.total_cost * row.account_rate_multiplier).toFixed(6) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell-first_token="{ row }">
|
||||
<span v-if="row.first_token_ms != null" class="text-sm text-gray-600 dark:text-gray-400">{{ formatDuration(row.first_token_ms) }}</span>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
|
||||
</template>
|
||||
|
||||
<template #cell-duration="{ row }">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDuration(row.duration_ms) }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-created_at="{ value }">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">{{ formatDateTime(value) }}</span>
|
||||
</template>
|
||||
|
||||
<template #cell-user_agent="{ row }">
|
||||
<span v-if="row.user_agent" class="text-sm text-gray-600 dark:text-gray-400 block max-w-[320px] truncate" :title="row.user_agent">{{ formatUserAgent(row.user_agent) }}</span>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
|
||||
</template>
|
||||
|
||||
<template #cell-ip_address="{ row }">
|
||||
<span v-if="row.ip_address" class="text-sm font-mono text-gray-600 dark:text-gray-400">{{ row.ip_address }}</span>
|
||||
<span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
|
||||
</template>
|
||||
|
||||
<template #empty><EmptyState :message="t('usage.noRecords')" /></template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token Tooltip Portal -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="tokenTooltipVisible"
|
||||
class="fixed z-[9999] pointer-events-none -translate-y-1/2"
|
||||
:style="{
|
||||
left: tokenTooltipPosition.x + 'px',
|
||||
top: tokenTooltipPosition.y + 'px'
|
||||
}"
|
||||
>
|
||||
<div class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
|
||||
<div class="space-y-1.5">
|
||||
<div>
|
||||
<div class="text-xs font-semibold text-gray-300 mb-1">{{ t('usage.tokenDetails') }}</div>
|
||||
<div v-if="tokenTooltipData && tokenTooltipData.input_tokens > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.inputTokens') }}</span>
|
||||
<span class="font-medium text-white">{{ tokenTooltipData.input_tokens.toLocaleString() }}</span>
|
||||
</div>
|
||||
<div v-if="tokenTooltipData && tokenTooltipData.output_tokens > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.outputTokens') }}</span>
|
||||
<span class="font-medium text-white">{{ tokenTooltipData.output_tokens.toLocaleString() }}</span>
|
||||
</div>
|
||||
<div v-if="tokenTooltipData && tokenTooltipData.cache_creation_tokens > 0">
|
||||
<!-- 有 5m/1h 明细时，展开显示 -->
|
||||
<template v-if="tokenTooltipData.cache_creation_5m_tokens > 0 || tokenTooltipData.cache_creation_1h_tokens > 0">
|
||||
<div v-if="tokenTooltipData.cache_creation_5m_tokens > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400 flex items-center gap-1.5">
|
||||
{{ t('admin.usage.cacheCreation5mTokens') }}
|
||||
<span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-amber-500/20 text-amber-400 ring-1 ring-inset ring-amber-500/30">5m</span>
|
||||
</span>
|
||||
<span class="font-medium text-white">{{ tokenTooltipData.cache_creation_5m_tokens.toLocaleString() }}</span>
|
||||
</div>
|
||||
<div v-if="tokenTooltipData.cache_creation_1h_tokens > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400 flex items-center gap-1.5">
|
||||
{{ t('admin.usage.cacheCreation1hTokens') }}
|
||||
<span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-500/20 text-orange-400 ring-1 ring-inset ring-orange-500/30">1h</span>
|
||||
</span>
|
||||
<span class="font-medium text-white">{{ tokenTooltipData.cache_creation_1h_tokens.toLocaleString() }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 无明细时，只显示聚合值 -->
|
||||
<div v-else class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.cacheCreationTokens') }}</span>
|
||||
<span class="font-medium text-white">{{ tokenTooltipData.cache_creation_tokens.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tokenTooltipData && tokenTooltipData.cache_ttl_overridden" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400 flex items-center gap-1.5">
|
||||
{{ t('usage.cacheTtlOverriddenLabel') }}
|
||||
<span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-rose-500/20 text-rose-400 ring-1 ring-inset ring-rose-500/30">R-{{ tokenTooltipData.cache_creation_1h_tokens > 0 ? '5m' : '1H' }}</span>
|
||||
</span>
|
||||
<span class="font-medium text-rose-400">{{ tokenTooltipData.cache_creation_1h_tokens > 0 ? t('usage.cacheTtlOverridden1h') : t('usage.cacheTtlOverridden5m') }}</span>
|
||||
</div>
|
||||
<div v-if="tokenTooltipData && tokenTooltipData.cache_read_tokens > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.cacheReadTokens') }}</span>
|
||||
<span class="font-medium text-white">{{ tokenTooltipData.cache_read_tokens.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
|
||||
<span class="text-gray-400">{{ t('usage.totalTokens') }}</span>
|
||||
<span class="font-semibold text-blue-400">{{ ((tokenTooltipData?.input_tokens || 0) + (tokenTooltipData?.output_tokens || 0) + (tokenTooltipData?.cache_creation_tokens || 0) + (tokenTooltipData?.cache_read_tokens || 0)).toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- Cost Tooltip Portal -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="tooltipVisible"
|
||||
class="fixed z-[9999] pointer-events-none -translate-y-1/2"
|
||||
:style="{
|
||||
left: tooltipPosition.x + 'px',
|
||||
top: tooltipPosition.y + 'px'
|
||||
}"
|
||||
>
|
||||
<div class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
|
||||
<div class="space-y-1.5">
|
||||
<!-- Cost Breakdown -->
|
||||
<div class="mb-2 border-b border-gray-700 pb-1.5">
|
||||
<div class="text-xs font-semibold text-gray-300 mb-1">{{ t('usage.costDetails') }}</div>
|
||||
<div v-if="tooltipData && tooltipData.input_cost > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.inputCost') }}</span>
|
||||
<span class="font-medium text-white">${{ tooltipData.input_cost.toFixed(6) }}</span>
|
||||
</div>
|
||||
<div v-if="tooltipData && tooltipData.output_cost > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.outputCost') }}</span>
|
||||
<span class="font-medium text-white">${{ tooltipData.output_cost.toFixed(6) }}</span>
|
||||
</div>
|
||||
<div v-if="tooltipData && tooltipData.input_tokens > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('usage.inputTokenPrice') }}</span>
|
||||
<span class="font-medium text-sky-300">{{ formatTokenPricePerMillion(tooltipData.input_cost, tooltipData.input_tokens) }} {{ t('usage.perMillionTokens') }}</span>
|
||||
</div>
|
||||
<div v-if="tooltipData && tooltipData.output_tokens > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('usage.outputTokenPrice') }}</span>
|
||||
<span class="font-medium text-violet-300">{{ formatTokenPricePerMillion(tooltipData.output_cost, tooltipData.output_tokens) }} {{ t('usage.perMillionTokens') }}</span>
|
||||
</div>
|
||||
<div v-if="tooltipData && tooltipData.cache_creation_cost > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.cacheCreationCost') }}</span>
|
||||
<span class="font-medium text-white">${{ tooltipData.cache_creation_cost.toFixed(6) }}</span>
|
||||
</div>
|
||||
<div v-if="tooltipData && tooltipData.cache_read_cost > 0" class="flex items-center justify-between gap-4">
|
||||
<span class="text-gray-400">{{ t('admin.usage.cacheReadCost') }}</span>
|
||||
<span class="font-medium text-white">${{ tooltipData.cache_read_cost.toFixed(6) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rate and Summary -->
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<span class="text-gray-400">{{ t('usage.serviceTier') }}</span>
|
||||
<span class="font-semibold text-cyan-300">{{ getUsageServiceTierLabel(tooltipData?.service_tier, t) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<span class="text-gray-400">{{ t('usage.rate') }}</span>
|
||||
<span class="font-semibold text-blue-400">{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<span class="text-gray-400">{{ t('usage.accountMultiplier') }}</span>
|
||||
<span class="font-semibold text-blue-400">{{ (tooltipData?.account_rate_multiplier ?? 1).toFixed(2) }}x</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<span class="text-gray-400">{{ t('usage.original') }}</span>
|
||||
<span class="font-medium text-white">${{ tooltipData?.total_cost?.toFixed(6) || '0.000000' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<span class="text-gray-400">{{ t('usage.userBilled') }}</span>
|
||||
<span class="font-semibold text-green-400">${{ tooltipData?.actual_cost?.toFixed(6) || '0.000000' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
|
||||
<span class="text-gray-400">{{ t('usage.accountBilled') }}</span>
|
||||
<span class="font-semibold text-green-400">
|
||||
${{ (((tooltipData?.total_cost || 0) * (tooltipData?.account_rate_multiplier ?? 1)) || 0).toFixed(6) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { formatDateTime, formatReasoningEffort } from '@/utils/format'
|
||||
import { formatTokenPricePerMillion } from '@/utils/usagePricing'
|
||||
import { getUsageServiceTierLabel } from '@/utils/usageServiceTier'
|
||||
import { resolveUsageRequestType } from '@/utils/usageRequestType'
|
||||
import DataTable from '@/components/common/DataTable.vue'
|
||||
import EmptyState from '@/components/common/EmptyState.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import type { AdminUsageLog } from '@/types'
|
||||
|
||||
defineProps(['data', 'loading', 'columns'])
|
||||
defineEmits(['userClick'])
|
||||
const { t } = useI18n()
|
||||
|
||||
// Tooltip state - cost
|
||||
const tooltipVisible = ref(false)
|
||||
const tooltipPosition = ref({ x: 0, y: 0 })
|
||||
const tooltipData = ref<AdminUsageLog | null>(null)
|
||||
|
||||
// Tooltip state - token
|
||||
const tokenTooltipVisible = ref(false)
|
||||
const tokenTooltipPosition = ref({ x: 0, y: 0 })
|
||||
const tokenTooltipData = ref<AdminUsageLog | null>(null)
|
||||
|
||||
const getRequestTypeLabel = (row: AdminUsageLog): string => {
|
||||
const requestType = resolveUsageRequestType(row)
|
||||
if (requestType === 'ws_v2') return t('usage.ws')
|
||||
if (requestType === 'stream') return t('usage.stream')
|
||||
if (requestType === 'sync') return t('usage.sync')
|
||||
return t('usage.unknown')
|
||||
}
|
||||
|
||||
const getRequestTypeBadgeClass = (row: AdminUsageLog): string => {
|
||||
const requestType = resolveUsageRequestType(row)
|
||||
if (requestType === 'ws_v2') return 'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200'
|
||||
if (requestType === 'stream') return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
||||
if (requestType === 'sync') return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
|
||||
return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
|
||||
}
|
||||
|
||||
const formatCacheTokens = (tokens: number): string => {
|
||||
if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
|
||||
if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
|
||||
return tokens.toString()
|
||||
}
|
||||
|
||||
const formatUserAgent = (ua: string): string => {
|
||||
return ua
|
||||
}
|
||||
|
||||
const formatDuration = (ms: number | null | undefined): string => {
|
||||
if (ms == null) return '-'
|
||||
if (ms < 1000) return `${ms}ms`
|
||||
return `${(ms / 1000).toFixed(2)}s`
|
||||
}
|
||||
|
||||
// Cost tooltip functions
|
||||
const showTooltip = (event: MouseEvent, row: AdminUsageLog) => {
|
||||
const target = event.currentTarget as HTMLElement
|
||||
const rect = target.getBoundingClientRect()
|
||||
tooltipData.value = row
|
||||
tooltipPosition.value.x = rect.right + 8
|
||||
tooltipPosition.value.y = rect.top + rect.height / 2
|
||||
tooltipVisible.value = true
|
||||
}
|
||||
|
||||
const hideTooltip = () => {
|
||||
tooltipVisible.value = false
|
||||
tooltipData.value = null
|
||||
}
|
||||
|
||||
// Token tooltip functions
|
||||
const showTokenTooltip = (event: MouseEvent, row: AdminUsageLog) => {
|
||||
const target = event.currentTarget as HTMLElement
|
||||
const rect = target.getBoundingClientRect()
|
||||
tokenTooltipData.value = row
|
||||
tokenTooltipPosition.value.x = rect.right + 8
|
||||
tokenTooltipPosition.value.y = rect.top + rect.height / 2
|
||||
tokenTooltipVisible.value = true
|
||||
}
|
||||
|
||||
const hideTokenTooltip = () => {
|
||||
tokenTooltipVisible.value = false
|
||||
tokenTooltipData.value = null
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
import UsageTable from '../UsageTable.vue'
|
||||
|
||||
const messages: Record<string, string> = {
|
||||
'usage.costDetails': 'Cost Breakdown',
|
||||
'admin.usage.inputCost': 'Input Cost',
|
||||
'admin.usage.outputCost': 'Output Cost',
|
||||
'admin.usage.cacheCreationCost': 'Cache Creation Cost',
|
||||
'admin.usage.cacheReadCost': 'Cache Read Cost',
|
||||
'usage.inputTokenPrice': 'Input price',
|
||||
'usage.outputTokenPrice': 'Output price',
|
||||
'usage.perMillionTokens': '/ 1M tokens',
|
||||
'usage.serviceTier': 'Service tier',
|
||||
'usage.serviceTierPriority': 'Fast',
|
||||
'usage.serviceTierFlex': 'Flex',
|
||||
'usage.serviceTierStandard': 'Standard',
|
||||
'usage.rate': 'Rate',
|
||||
'usage.accountMultiplier': 'Account rate',
|
||||
'usage.original': 'Original',
|
||||
'usage.userBilled': 'User billed',
|
||||
'usage.accountBilled': 'Account billed',
|
||||
}
|
||||
|
||||
vi.mock('vue-i18n', async () => {
|
||||
const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string) => messages[key] ?? key,
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const DataTableStub = {
|
||||
props: ['data'],
|
||||
template: `
|
||||
<div>
|
||||
<div v-for="row in data" :key="row.request_id">
|
||||
<slot name="cell-cost" :row="row" />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
|
||||
describe('admin UsageTable tooltip', () => {
|
||||
beforeEach(() => {
|
||||
vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
|
||||
x: 0,
|
||||
y: 0,
|
||||
top: 20,
|
||||
left: 20,
|
||||
right: 120,
|
||||
bottom: 40,
|
||||
width: 100,
|
||||
height: 20,
|
||||
toJSON: () => ({}),
|
||||
} as DOMRect)
|
||||
})
|
||||
|
||||
it('shows service tier and billing breakdown in cost tooltip', async () => {
|
||||
const row = {
|
||||
request_id: 'req-admin-1',
|
||||
actual_cost: 0.092883,
|
||||
total_cost: 0.092883,
|
||||
account_rate_multiplier: 1,
|
||||
rate_multiplier: 1,
|
||||
service_tier: 'priority',
|
||||
input_cost: 0.020285,
|
||||
output_cost: 0.00303,
|
||||
cache_creation_cost: 0,
|
||||
cache_read_cost: 0.069568,
|
||||
input_tokens: 4057,
|
||||
output_tokens: 101,
|
||||
}
|
||||
|
||||
const wrapper = mount(UsageTable, {
|
||||
props: {
|
||||
data: [row],
|
||||
loading: false,
|
||||
columns: [],
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
DataTable: DataTableStub,
|
||||
EmptyState: true,
|
||||
Icon: true,
|
||||
Teleport: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
await wrapper.find('.group.relative').trigger('mouseenter')
|
||||
await nextTick()
|
||||
|
||||
const text = wrapper.text()
|
||||
expect(text).toContain('Service tier')
|
||||
expect(text).toContain('Fast')
|
||||
expect(text).toContain('Rate')
|
||||
expect(text).toContain('1.00x')
|
||||
expect(text).toContain('Account rate')
|
||||
expect(text).toContain('User billed')
|
||||
expect(text).toContain('Account billed')
|
||||
expect(text).toContain('$0.092883')
|
||||
expect(text).toContain('$5.0000 / 1M tokens')
|
||||
expect(text).toContain('$30.0000 / 1M tokens')
|
||||
expect(text).toContain('$0.069568')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="t('admin.users.groupConfig')" width="wide" @close="$emit('close')">
|
||||
<div v-if="user" class="space-y-6">
|
||||
<!-- 用户信息头部 -->
|
||||
<div class="flex items-center gap-4 rounded-2xl bg-gradient-to-r from-primary-50 to-primary-100 p-5 dark:from-primary-900/30 dark:to-primary-800/20">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-white shadow-sm dark:bg-dark-700">
|
||||
<span class="text-2xl font-semibold text-primary-600 dark:text-primary-400">{{ user.email.charAt(0).toUpperCase() }}</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-lg font-semibold text-gray-900 dark:text-white">{{ user.email }}</p>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ t('admin.users.groupConfigHint', { email: user.email }) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="flex justify-center py-12">
|
||||
<svg class="h-10 w-10 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<!-- 专属分组区域 -->
|
||||
<div v-if="exclusiveGroups.length > 0">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="h-1.5 w-1.5 rounded-full bg-purple-500"></div>
|
||||
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ t('admin.users.exclusiveGroups') }}</h4>
|
||||
<span class="text-xs text-gray-400">({{ exclusiveGroupConfigs.filter(c => c.isSelected).length }}/{{ exclusiveGroupConfigs.length }})</span>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<div
|
||||
v-for="config in exclusiveGroupConfigs"
|
||||
:key="config.groupId"
|
||||
class="group relative overflow-hidden rounded-xl border-2 p-4 transition-all duration-200"
|
||||
:class="config.isSelected
|
||||
? 'border-primary-400 bg-primary-50/50 shadow-sm dark:border-primary-500 dark:bg-primary-900/20'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300 dark:border-dark-600 dark:bg-dark-800 dark:hover:border-dark-500'"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- 复选框 -->
|
||||
<div class="flex-shrink-0">
|
||||
<label class="relative flex h-6 w-6 cursor-pointer items-center justify-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="config.isSelected"
|
||||
@change="toggleExclusiveGroup(config.groupId)"
|
||||
class="peer sr-only"
|
||||
/>
|
||||
<div class="h-5 w-5 rounded-md border-2 border-gray-300 transition-all peer-checked:border-primary-500 peer-checked:bg-primary-500 dark:border-dark-500 peer-checked:dark:border-primary-500">
|
||||
<svg v-if="config.isSelected" class="h-full w-full text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 分组信息 -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-900 dark:text-white">{{ config.groupName }}</span>
|
||||
<span class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
|
||||
{{ t('admin.groups.exclusive') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1.5 flex items-center gap-3 text-sm">
|
||||
<span class="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<PlatformIcon :platform="config.platform" size="xs" />
|
||||
<span>{{ config.platform }}</span>
|
||||
</span>
|
||||
<span class="text-gray-300 dark:text-dark-500">•</span>
|
||||
<span class="text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.users.defaultRate') }}: <span class="font-medium text-gray-700 dark:text-gray-300">{{ config.defaultRate }}x</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专属倍率输入 -->
|
||||
<div class="flex flex-shrink-0 items-center gap-3">
|
||||
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ t('admin.users.customRate') }}</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0"
|
||||
:value="config.customRate ?? ''"
|
||||
@input="updateCustomRate(config.groupId, ($event.target as HTMLInputElement).value)"
|
||||
:placeholder="String(config.defaultRate)"
|
||||
class="hide-spinner w-24 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-dark-500 dark:bg-dark-700 dark:focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公开分组区域 -->
|
||||
<div v-if="publicGroups.length > 0">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
|
||||
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ t('admin.users.publicGroups') }}</h4>
|
||||
<span class="text-xs text-gray-400">({{ publicGroupConfigs.length }})</span>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<div
|
||||
v-for="config in publicGroupConfigs"
|
||||
:key="config.groupId"
|
||||
class="relative overflow-hidden rounded-xl border-2 border-green-200 bg-green-50/50 p-4 dark:border-green-800/50 dark:bg-green-900/10"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- 复选框（禁用状态） -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex h-5 w-5 items-center justify-center rounded-md border-2 border-green-400 bg-green-500 dark:border-green-600 dark:bg-green-600">
|
||||
<svg class="h-full w-full text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组信息 -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-base font-semibold text-gray-900 dark:text-white">{{ config.groupName }}</span>
|
||||
</div>
|
||||
<div class="mt-1.5 flex items-center gap-3 text-sm">
|
||||
<span class="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<PlatformIcon :platform="config.platform" size="xs" />
|
||||
<span>{{ config.platform }}</span>
|
||||
</span>
|
||||
<span class="text-gray-300 dark:text-dark-500">•</span>
|
||||
<span class="text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.users.defaultRate') }}: <span class="font-medium text-gray-700 dark:text-gray-300">{{ config.defaultRate }}x</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专属倍率输入 -->
|
||||
<div class="flex flex-shrink-0 items-center gap-3">
|
||||
<label class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ t('admin.users.customRate') }}</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0"
|
||||
:value="config.customRate ?? ''"
|
||||
@input="updateCustomRate(config.groupId, ($event.target as HTMLInputElement).value)"
|
||||
:placeholder="String(config.defaultRate)"
|
||||
class="hide-spinner w-24 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium transition-colors focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-dark-500 dark:bg-dark-700 dark:focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无分组提示 -->
|
||||
<div v-if="groups.length === 0" class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-dark-700">
|
||||
<svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ t('common.noGroupsAvailable') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="$emit('close')" class="btn btn-secondary px-5">{{ t('common.cancel') }}</button>
|
||||
<button @click="handleSave" :disabled="submitting" class="btn btn-primary px-6">
|
||||
<svg v-if="submitting" class="-ml-1 mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
{{ submitting ? t('common.saving') : t('common.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { AdminUser, Group, GroupPlatform } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import PlatformIcon from '@/components/common/PlatformIcon.vue'
|
||||
|
||||
interface GroupRateConfig {
|
||||
groupId: number
|
||||
groupName: string
|
||||
platform: GroupPlatform
|
||||
isExclusive: boolean
|
||||
defaultRate: number
|
||||
customRate: number | null
|
||||
isSelected: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{ show: boolean; user: AdminUser | null }>()
|
||||
const emit = defineEmits(['close', 'success'])
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const groups = ref<Group[]>([])
|
||||
const groupConfigs = ref<GroupRateConfig[]>([])
|
||||
const originalGroupRates = ref<Record<number, number>>({}) // 记录原始专属倍率，用于检测删除
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
|
||||
// 分离专属分组和公开分组
|
||||
const exclusiveGroups = computed(() => groups.value.filter((g) => g.is_exclusive))
|
||||
const publicGroups = computed(() => groups.value.filter((g) => !g.is_exclusive))
|
||||
|
||||
const exclusiveGroupConfigs = computed(() => groupConfigs.value.filter((c) => c.isExclusive))
|
||||
const publicGroupConfigs = computed(() => groupConfigs.value.filter((c) => !c.isExclusive))
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(v) => {
|
||||
if (v && props.user) {
|
||||
load()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const load = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await adminAPI.groups.list(1, 1000)
|
||||
// 只显示标准类型且活跃的分组
|
||||
groups.value = res.items.filter((g) => g.subscription_type === 'standard' && g.status === 'active')
|
||||
|
||||
// 初始化配置
|
||||
const userAllowedGroups = props.user?.allowed_groups || []
|
||||
const userGroupRates = props.user?.group_rates || {}
|
||||
|
||||
// 保存原始专属倍率，用于检测删除操作
|
||||
originalGroupRates.value = { ...userGroupRates }
|
||||
|
||||
groupConfigs.value = groups.value.map((g) => ({
|
||||
groupId: g.id,
|
||||
groupName: g.name,
|
||||
platform: g.platform,
|
||||
isExclusive: g.is_exclusive,
|
||||
defaultRate: g.rate_multiplier,
|
||||
customRate: userGroupRates[g.id] ?? null,
|
||||
// 专属分组：检查是否在 allowed_groups 中
|
||||
// 公开分组：始终选中
|
||||
isSelected: g.is_exclusive ? userAllowedGroups.includes(g.id) : true,
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error('Failed to load groups:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleExclusiveGroup = (groupId: number) => {
|
||||
const config = groupConfigs.value.find((c) => c.groupId === groupId)
|
||||
if (config && config.isExclusive) {
|
||||
config.isSelected = !config.isSelected
|
||||
}
|
||||
}
|
||||
|
||||
const updateCustomRate = (groupId: number, value: string) => {
|
||||
const config = groupConfigs.value.find((c) => c.groupId === groupId)
|
||||
if (config) {
|
||||
if (value === '' || value === null || value === undefined) {
|
||||
config.customRate = null
|
||||
} else {
|
||||
const numValue = parseFloat(value)
|
||||
config.customRate = isNaN(numValue) ? null : numValue
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!props.user) return
|
||||
submitting.value = true
|
||||
|
||||
try {
|
||||
// 构建 allowed_groups（仅包含专属分组中被勾选的）
|
||||
const allowedGroups = groupConfigs.value.filter((c) => c.isExclusive && c.isSelected).map((c) => c.groupId)
|
||||
|
||||
// 构建 group_rates
|
||||
// - 有新专属倍率: 设置为该值
|
||||
// - 原本有专属倍率但现在被清空: 设置为 null（表示删除）
|
||||
const groupRates: Record<number, number | null> = {}
|
||||
for (const c of groupConfigs.value) {
|
||||
const hadOriginalRate = originalGroupRates.value[c.groupId] !== undefined
|
||||
|
||||
if (c.customRate !== null) {
|
||||
// 有专属倍率
|
||||
groupRates[c.groupId] = c.customRate
|
||||
} else if (hadOriginalRate) {
|
||||
// 原本有专属倍率，现在被清空，需要显式删除
|
||||
groupRates[c.groupId] = null
|
||||
}
|
||||
}
|
||||
|
||||
await adminAPI.users.update(props.user.id, {
|
||||
allowed_groups: allowedGroups,
|
||||
group_rates: Object.keys(groupRates).length > 0 ? groupRates : undefined,
|
||||
})
|
||||
|
||||
appStore.showSuccess(t('admin.users.groupConfigUpdated'))
|
||||
emit('success')
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
console.error('Failed to update user group config:', error)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 隐藏数字输入框的箭头按钮 */
|
||||
.hide-spinner::-webkit-outer-spin-button,
|
||||
.hide-spinner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.hide-spinner {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="t('admin.users.userApiKeys')" width="wide" @close="handleClose">
|
||||
<div v-if="user" class="space-y-4">
|
||||
<div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
|
||||
<span class="text-lg font-medium text-primary-700 dark:text-primary-300">{{ user.email.charAt(0).toUpperCase() }}</span>
|
||||
</div>
|
||||
<div><p class="font-medium text-gray-900 dark:text-white">{{ user.email }}</p><p class="text-sm text-gray-500 dark:text-dark-400">{{ user.username }}</p></div>
|
||||
</div>
|
||||
<div v-if="loading" class="flex justify-center py-8"><svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>
|
||||
<div v-else-if="apiKeys.length === 0" class="py-8 text-center"><p class="text-sm text-gray-500">{{ t('admin.users.noApiKeys') }}</p></div>
|
||||
<div v-else ref="scrollContainerRef" class="max-h-96 space-y-3 overflow-y-auto" @scroll="closeGroupSelector">
|
||||
<div v-for="key in apiKeys" :key="key.id" class="rounded-xl border border-gray-200 bg-white p-4 dark:border-dark-600 dark:bg-dark-800">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="mb-1 flex items-center gap-2"><span class="font-medium text-gray-900 dark:text-white">{{ key.name }}</span><span :class="['badge text-xs', key.status === 'active' ? 'badge-success' : 'badge-danger']">{{ key.status }}</span></div>
|
||||
<p class="truncate font-mono text-sm text-gray-500">{{ key.key.substring(0, 20) }}...{{ key.key.substring(key.key.length - 8) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-4 text-xs text-gray-500">
|
||||
<div class="flex items-center gap-1">
|
||||
<span>{{ t('admin.users.group') }}:</span>
|
||||
<button
|
||||
:ref="(el) => setGroupButtonRef(key.id, el)"
|
||||
@click="openGroupSelector(key)"
|
||||
class="-mx-1 -my-0.5 flex cursor-pointer items-center gap-1 rounded-md px-1 py-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
|
||||
:disabled="updatingKeyIds.has(key.id)"
|
||||
>
|
||||
<GroupBadge
|
||||
v-if="key.group_id && key.group"
|
||||
:name="key.group.name"
|
||||
:platform="key.group.platform"
|
||||
:subscription-type="key.group.subscription_type"
|
||||
:rate-multiplier="key.group.rate_multiplier"
|
||||
/>
|
||||
<span v-else class="text-gray-400 italic">{{ t('admin.users.none') }}</span>
|
||||
<svg v-if="updatingKeyIds.has(key.id)" class="h-3 w-3 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
||||
<svg v-else class="h-3 w-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-1"><span>{{ t('admin.users.columns.created') }}: {{ formatDateTime(key.created_at) }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Group Selector Dropdown -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="groupSelectorKeyId !== null && dropdownPosition"
|
||||
ref="dropdownRef"
|
||||
class="animate-in fade-in slide-in-from-top-2 fixed z-[100000020] w-64 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 duration-200 dark:bg-dark-800 dark:ring-white/10"
|
||||
:style="{ top: dropdownPosition.top + 'px', left: dropdownPosition.left + 'px' }"
|
||||
>
|
||||
<div class="max-h-64 overflow-y-auto p-1.5">
|
||||
<!-- Unbind option -->
|
||||
<button
|
||||
@click="changeGroup(selectedKeyForGroup!, null)"
|
||||
:class="[
|
||||
'flex w-full items-center rounded-lg px-3 py-2 text-sm transition-colors',
|
||||
!selectedKeyForGroup?.group_id
|
||||
? 'bg-primary-50 dark:bg-primary-900/20'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-dark-700'
|
||||
]"
|
||||
>
|
||||
<span class="text-gray-500 italic">{{ t('admin.users.none') }}</span>
|
||||
<svg
|
||||
v-if="!selectedKeyForGroup?.group_id"
|
||||
class="ml-auto h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"
|
||||
><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
</button>
|
||||
<!-- Group options -->
|
||||
<button
|
||||
v-for="group in allGroups"
|
||||
:key="group.id"
|
||||
@click="changeGroup(selectedKeyForGroup!, group.id)"
|
||||
:class="[
|
||||
'flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors',
|
||||
selectedKeyForGroup?.group_id === group.id
|
||||
? 'bg-primary-50 dark:bg-primary-900/20'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-dark-700'
|
||||
]"
|
||||
>
|
||||
<GroupOptionItem
|
||||
:name="group.name"
|
||||
:platform="group.platform"
|
||||
:subscription-type="group.subscription_type"
|
||||
:rate-multiplier="group.rate_multiplier"
|
||||
:description="group.description"
|
||||
:selected="selectedKeyForGroup?.group_id === group.id"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import type { AdminUser, AdminGroup, ApiKey } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import GroupBadge from '@/components/common/GroupBadge.vue'
|
||||
import GroupOptionItem from '@/components/common/GroupOptionItem.vue'
|
||||
|
||||
const props = defineProps<{ show: boolean; user: AdminUser | null }>()
|
||||
const emit = defineEmits(['close'])
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const apiKeys = ref<ApiKey[]>([])
|
||||
const allGroups = ref<AdminGroup[]>([])
|
||||
const loading = ref(false)
|
||||
const updatingKeyIds = ref(new Set<number>())
|
||||
const groupSelectorKeyId = ref<number | null>(null)
|
||||
const dropdownPosition = ref<{ top: number; left: number } | null>(null)
|
||||
const dropdownRef = ref<HTMLElement | null>(null)
|
||||
const scrollContainerRef = ref<HTMLElement | null>(null)
|
||||
const groupButtonRefs = ref<Map<number, HTMLElement>>(new Map())
|
||||
|
||||
const selectedKeyForGroup = computed(() => {
|
||||
if (groupSelectorKeyId.value === null) return null
|
||||
return apiKeys.value.find((k) => k.id === groupSelectorKeyId.value) || null
|
||||
})
|
||||
|
||||
const setGroupButtonRef = (keyId: number, el: Element | ComponentPublicInstance | null) => {
|
||||
if (el instanceof HTMLElement) {
|
||||
groupButtonRefs.value.set(keyId, el)
|
||||
} else {
|
||||
groupButtonRefs.value.delete(keyId)
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.show, (v) => {
|
||||
if (v && props.user) {
|
||||
load()
|
||||
loadGroups()
|
||||
} else {
|
||||
closeGroupSelector()
|
||||
}
|
||||
})
|
||||
|
||||
const load = async () => {
|
||||
if (!props.user) return
|
||||
loading.value = true
|
||||
groupButtonRefs.value.clear()
|
||||
try {
|
||||
const res = await adminAPI.users.getUserApiKeys(props.user.id)
|
||||
apiKeys.value = res.items || []
|
||||
} catch (error) {
|
||||
console.error('Failed to load API keys:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadGroups = async () => {
|
||||
try {
|
||||
const groups = await adminAPI.groups.getAll()
|
||||
allGroups.value = groups
|
||||
} catch (error) {
|
||||
console.error('Failed to load groups:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const DROPDOWN_HEIGHT = 272 // max-h-64 = 16rem = 256px + padding
|
||||
const DROPDOWN_GAP = 4
|
||||
|
||||
const openGroupSelector = (key: ApiKey) => {
|
||||
if (groupSelectorKeyId.value === key.id) {
|
||||
closeGroupSelector()
|
||||
} else {
|
||||
const buttonEl = groupButtonRefs.value.get(key.id)
|
||||
if (buttonEl) {
|
||||
const rect = buttonEl.getBoundingClientRect()
|
||||
const spaceBelow = window.innerHeight - rect.bottom
|
||||
const openUpward = spaceBelow < DROPDOWN_HEIGHT && rect.top > spaceBelow
|
||||
dropdownPosition.value = {
|
||||
top: openUpward ? rect.top - DROPDOWN_HEIGHT - DROPDOWN_GAP : rect.bottom + DROPDOWN_GAP,
|
||||
left: rect.left
|
||||
}
|
||||
}
|
||||
groupSelectorKeyId.value = key.id
|
||||
}
|
||||
}
|
||||
|
||||
const closeGroupSelector = () => {
|
||||
groupSelectorKeyId.value = null
|
||||
dropdownPosition.value = null
|
||||
}
|
||||
|
||||
const changeGroup = async (key: ApiKey, newGroupId: number | null) => {
|
||||
closeGroupSelector()
|
||||
if (key.group_id === newGroupId || (!key.group_id && newGroupId === null)) return
|
||||
|
||||
updatingKeyIds.value.add(key.id)
|
||||
try {
|
||||
const result = await adminAPI.apiKeys.updateApiKeyGroup(key.id, newGroupId)
|
||||
// Update local data
|
||||
const idx = apiKeys.value.findIndex((k) => k.id === key.id)
|
||||
if (idx !== -1) {
|
||||
apiKeys.value[idx] = result.api_key
|
||||
}
|
||||
if (result.auto_granted_group_access && result.granted_group_name) {
|
||||
appStore.showSuccess(t('admin.users.groupChangedWithGrant', { group: result.granted_group_name }))
|
||||
} else {
|
||||
appStore.showSuccess(t('admin.users.groupChangedSuccess'))
|
||||
}
|
||||
} catch (error: any) {
|
||||
appStore.showError(error?.message || t('admin.users.groupChangeFailed'))
|
||||
} finally {
|
||||
updatingKeyIds.value.delete(key.id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && groupSelectorKeyId.value !== null) {
|
||||
event.stopPropagation()
|
||||
closeGroupSelector()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(target)) {
|
||||
// Check if the click is on one of the group trigger buttons
|
||||
for (const el of groupButtonRefs.value.values()) {
|
||||
if (el.contains(target)) return
|
||||
}
|
||||
closeGroupSelector()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
closeGroupSelector()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
document.addEventListener('keydown', handleKeyDown, true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleKeyDown, true)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="t('admin.users.balanceHistoryTitle')" width="wide" :close-on-click-outside="true" :z-index="40" @close="$emit('close')">
|
||||
<div v-if="user" class="space-y-4">
|
||||
<!-- User header: two-row layout with full user info -->
|
||||
<div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
|
||||
<!-- Row 1: avatar + email/username/created_at (left) + current balance (right) -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
|
||||
<span class="text-lg font-medium text-primary-700 dark:text-primary-300">
|
||||
{{ user.email.charAt(0).toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="truncate font-medium text-gray-900 dark:text-white">{{ user.email }}</p>
|
||||
<span
|
||||
v-if="user.username"
|
||||
class="flex-shrink-0 rounded bg-primary-50 px-1.5 py-0.5 text-xs text-primary-600 dark:bg-primary-900/20 dark:text-primary-400"
|
||||
>
|
||||
{{ user.username }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 dark:text-dark-500">
|
||||
{{ t('admin.users.createdAt') }}: {{ formatDateTime(user.created_at) }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Current balance: prominent display on the right -->
|
||||
<div class="flex-shrink-0 text-right">
|
||||
<p class="text-xs text-gray-500 dark:text-dark-400">{{ t('admin.users.currentBalance') }}</p>
|
||||
<p class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
${{ user.balance?.toFixed(2) || '0.00' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 2: notes + total recharged -->
|
||||
<div class="mt-2.5 flex items-center justify-between border-t border-gray-200/60 pt-2.5 dark:border-dark-600/60">
|
||||
<p class="min-w-0 flex-1 truncate text-xs text-gray-500 dark:text-dark-400" :title="user.notes || ''">
|
||||
<template v-if="user.notes">{{ t('admin.users.notes') }}: {{ user.notes }}</template>
|
||||
<template v-else> </template>
|
||||
</p>
|
||||
<p class="ml-4 flex-shrink-0 text-xs text-gray-500 dark:text-dark-400">
|
||||
{{ t('admin.users.totalRecharged') }}: <span class="font-semibold text-emerald-600 dark:text-emerald-400">${{ totalRecharged.toFixed(2) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Type filter + Action buttons -->
|
||||
<div class="flex items-center gap-3">
|
||||
<Select
|
||||
v-model="typeFilter"
|
||||
:options="typeOptions"
|
||||
class="w-56"
|
||||
@change="loadHistory(1)"
|
||||
/>
|
||||
<!-- Deposit button - matches menu style -->
|
||||
<button
|
||||
v-if="!hideActions"
|
||||
@click="emit('deposit')"
|
||||
class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
|
||||
>
|
||||
<Icon name="plus" size="sm" class="text-emerald-500" :stroke-width="2" />
|
||||
{{ t('admin.users.deposit') }}
|
||||
</button>
|
||||
<!-- Withdraw button - matches menu style -->
|
||||
<button
|
||||
v-if="!hideActions"
|
||||
@click="emit('withdraw')"
|
||||
class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
|
||||
>
|
||||
<svg class="h-4 w-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
|
||||
</svg>
|
||||
{{ t('admin.users.withdraw') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="flex justify-center py-8">
|
||||
<svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="history.length === 0" class="py-8 text-center">
|
||||
<p class="text-sm text-gray-500">{{ t('admin.users.noBalanceHistory') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- History list -->
|
||||
<div v-else class="max-h-[28rem] space-y-3 overflow-y-auto">
|
||||
<div
|
||||
v-for="item in history"
|
||||
:key="item.id"
|
||||
class="rounded-xl border border-gray-200 bg-white p-4 dark:border-dark-600 dark:bg-dark-800"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<!-- Left: type icon + description -->
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
:class="[
|
||||
'flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg',
|
||||
getIconBg(item)
|
||||
]"
|
||||
>
|
||||
<Icon :name="getIconName(item)" size="sm" :class="getIconColor(item)" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ getItemTitle(item) }}
|
||||
</p>
|
||||
<!-- Notes (admin adjustment reason) -->
|
||||
<p
|
||||
v-if="item.notes"
|
||||
class="mt-0.5 text-xs text-gray-500 dark:text-dark-400"
|
||||
:title="item.notes"
|
||||
>
|
||||
{{ item.notes.length > 60 ? item.notes.substring(0, 55) + '...' : item.notes }}
|
||||
</p>
|
||||
<p class="mt-0.5 text-xs text-gray-400 dark:text-dark-500">
|
||||
{{ formatDateTime(item.used_at || item.created_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: value -->
|
||||
<div class="text-right">
|
||||
<p :class="['text-sm font-semibold', getValueColor(item)]">
|
||||
{{ formatValue(item) }}
|
||||
</p>
|
||||
<p
|
||||
v-if="isAdminType(item.type)"
|
||||
class="text-xs text-gray-400 dark:text-dark-500"
|
||||
>
|
||||
{{ t('redeem.adminAdjustment') }}
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="font-mono text-xs text-gray-400 dark:text-dark-500"
|
||||
>
|
||||
{{ item.code.slice(0, 8) }}...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="totalPages > 1" class="flex items-center justify-center gap-2 pt-2">
|
||||
<button
|
||||
:disabled="currentPage <= 1"
|
||||
class="btn btn-secondary px-3 py-1 text-sm"
|
||||
@click="loadHistory(currentPage - 1)"
|
||||
>
|
||||
{{ t('pagination.previous') }}
|
||||
</button>
|
||||
<span class="text-sm text-gray-500 dark:text-dark-400">
|
||||
{{ currentPage }} / {{ totalPages }}
|
||||
</span>
|
||||
<button
|
||||
:disabled="currentPage >= totalPages"
|
||||
class="btn btn-secondary px-3 py-1 text-sm"
|
||||
@click="loadHistory(currentPage + 1)"
|
||||
>
|
||||
{{ t('pagination.next') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { adminAPI, type BalanceHistoryItem } from '@/api/admin'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import type { AdminUser } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Select from '@/components/common/Select.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const props = defineProps<{ show: boolean; user: AdminUser | null; hideActions?: boolean }>()
|
||||
const emit = defineEmits(['close', 'deposit', 'withdraw'])
|
||||
const { t } = useI18n()
|
||||
|
||||
const history = ref<BalanceHistoryItem[]>([])
|
||||
const loading = ref(false)
|
||||
const currentPage = ref(1)
|
||||
const total = ref(0)
|
||||
const totalRecharged = ref(0)
|
||||
const pageSize = 15
|
||||
const typeFilter = ref('')
|
||||
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize) || 1)
|
||||
|
||||
// Type filter options
|
||||
const typeOptions = computed(() => [
|
||||
{ value: '', label: t('admin.users.allTypes') },
|
||||
{ value: 'balance', label: t('admin.users.typeBalance') },
|
||||
{ value: 'admin_balance', label: t('admin.users.typeAdminBalance') },
|
||||
{ value: 'concurrency', label: t('admin.users.typeConcurrency') },
|
||||
{ value: 'admin_concurrency', label: t('admin.users.typeAdminConcurrency') },
|
||||
{ value: 'subscription', label: t('admin.users.typeSubscription') }
|
||||
])
|
||||
|
||||
// Watch modal open
|
||||
watch(() => props.show, (v) => {
|
||||
if (v && props.user) {
|
||||
typeFilter.value = ''
|
||||
loadHistory(1)
|
||||
}
|
||||
})
|
||||
|
||||
const loadHistory = async (page: number) => {
|
||||
if (!props.user) return
|
||||
loading.value = true
|
||||
currentPage.value = page
|
||||
try {
|
||||
const res = await adminAPI.users.getUserBalanceHistory(
|
||||
props.user.id,
|
||||
page,
|
||||
pageSize,
|
||||
typeFilter.value || undefined
|
||||
)
|
||||
history.value = res.items || []
|
||||
total.value = res.total || 0
|
||||
totalRecharged.value = res.total_recharged || 0
|
||||
} catch (error) {
|
||||
console.error('Failed to load balance history:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Helper: check if admin type
|
||||
const isAdminType = (type: string) => type === 'admin_balance' || type === 'admin_concurrency'
|
||||
|
||||
// Helper: check if balance type (includes admin_balance)
|
||||
const isBalanceType = (type: string) => type === 'balance' || type === 'admin_balance'
|
||||
|
||||
// Helper: check if subscription type
|
||||
const isSubscriptionType = (type: string) => type === 'subscription'
|
||||
|
||||
// Icon name based on type
|
||||
const getIconName = (item: BalanceHistoryItem) => {
|
||||
if (isBalanceType(item.type)) return 'dollar'
|
||||
if (isSubscriptionType(item.type)) return 'badge'
|
||||
return 'bolt' // concurrency
|
||||
}
|
||||
|
||||
// Icon background color
|
||||
const getIconBg = (item: BalanceHistoryItem) => {
|
||||
if (isBalanceType(item.type)) {
|
||||
return item.value >= 0
|
||||
? 'bg-emerald-100 dark:bg-emerald-900/30'
|
||||
: 'bg-red-100 dark:bg-red-900/30'
|
||||
}
|
||||
if (isSubscriptionType(item.type)) return 'bg-purple-100 dark:bg-purple-900/30'
|
||||
return item.value >= 0
|
||||
? 'bg-blue-100 dark:bg-blue-900/30'
|
||||
: 'bg-orange-100 dark:bg-orange-900/30'
|
||||
}
|
||||
|
||||
// Icon text color
|
||||
const getIconColor = (item: BalanceHistoryItem) => {
|
||||
if (isBalanceType(item.type)) {
|
||||
return item.value >= 0
|
||||
? 'text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-red-600 dark:text-red-400'
|
||||
}
|
||||
if (isSubscriptionType(item.type)) return 'text-purple-600 dark:text-purple-400'
|
||||
return item.value >= 0
|
||||
? 'text-blue-600 dark:text-blue-400'
|
||||
: 'text-orange-600 dark:text-orange-400'
|
||||
}
|
||||
|
||||
// Value text color
|
||||
const getValueColor = (item: BalanceHistoryItem) => {
|
||||
if (isBalanceType(item.type)) {
|
||||
return item.value >= 0
|
||||
? 'text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-red-600 dark:text-red-400'
|
||||
}
|
||||
if (isSubscriptionType(item.type)) return 'text-purple-600 dark:text-purple-400'
|
||||
return item.value >= 0
|
||||
? 'text-blue-600 dark:text-blue-400'
|
||||
: 'text-orange-600 dark:text-orange-400'
|
||||
}
|
||||
|
||||
// Item title
|
||||
const getItemTitle = (item: BalanceHistoryItem) => {
|
||||
switch (item.type) {
|
||||
case 'balance':
|
||||
return t('redeem.balanceAddedRedeem')
|
||||
case 'admin_balance':
|
||||
return item.value >= 0 ? t('redeem.balanceAddedAdmin') : t('redeem.balanceDeductedAdmin')
|
||||
case 'concurrency':
|
||||
return t('redeem.concurrencyAddedRedeem')
|
||||
case 'admin_concurrency':
|
||||
return item.value >= 0 ? t('redeem.concurrencyAddedAdmin') : t('redeem.concurrencyReducedAdmin')
|
||||
case 'subscription':
|
||||
return t('redeem.subscriptionAssigned')
|
||||
default:
|
||||
return t('common.unknown')
|
||||
}
|
||||
}
|
||||
|
||||
// Format display value
|
||||
const formatValue = (item: BalanceHistoryItem) => {
|
||||
if (isBalanceType(item.type)) {
|
||||
const sign = item.value >= 0 ? '+' : ''
|
||||
return `${sign}$${item.value.toFixed(2)}`
|
||||
}
|
||||
if (isSubscriptionType(item.type)) {
|
||||
const days = item.validity_days || Math.round(item.value)
|
||||
const groupName = item.group?.name || ''
|
||||
return groupName ? `${days}d - ${groupName}` : `${days}d`
|
||||
}
|
||||
// concurrency types
|
||||
const sign = item.value >= 0 ? '+' : ''
|
||||
return `${sign}${item.value}`
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="operation === 'add' ? t('admin.users.deposit') : t('admin.users.withdraw')" width="narrow" @close="$emit('close')">
|
||||
<form v-if="user" id="balance-form" @submit.prevent="handleBalanceSubmit" class="space-y-5">
|
||||
<div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100"><span class="text-lg font-medium text-primary-700">{{ user.email.charAt(0).toUpperCase() }}</span></div>
|
||||
<div class="flex-1"><p class="font-medium text-gray-900">{{ user.email }}</p><p class="text-sm text-gray-500">{{ t('admin.users.currentBalance') }}: ${{ formatBalance(user.balance) }}</p></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ operation === 'add' ? t('admin.users.depositAmount') : t('admin.users.withdrawAmount') }}</label>
|
||||
<div class="relative flex gap-2">
|
||||
<div class="relative flex-1"><div class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-gray-500">$</div><input v-model.number="form.amount" type="number" step="any" min="0" required class="input pl-8" /></div>
|
||||
<button v-if="operation === 'subtract'" type="button" @click="fillAllBalance" class="btn btn-secondary whitespace-nowrap">{{ t('admin.users.withdrawAll') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div><label class="input-label">{{ t('admin.users.notes') }}</label><textarea v-model="form.notes" rows="3" class="input"></textarea></div>
|
||||
<div v-if="form.amount > 0" class="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950"><div class="flex items-center justify-between text-sm"><span class="text-gray-700 dark:text-gray-300">{{ t('admin.users.newBalance') }}:</span><span class="font-bold text-gray-900 dark:text-gray-100">${{ formatBalance(calculateNewBalance()) }}</span></div></div>
|
||||
</form>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="$emit('close')" class="btn btn-secondary">{{ t('common.cancel') }}</button>
|
||||
<button type="submit" form="balance-form" :disabled="submitting || !form.amount" class="btn" :class="operation === 'add' ? 'bg-emerald-600 text-white' : 'btn-danger'">{{ submitting ? t('common.saving') : t('common.confirm') }}</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { AdminUser } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
|
||||
const props = defineProps<{ show: boolean, user: AdminUser | null, operation: 'add' | 'subtract' }>()
|
||||
const emit = defineEmits(['close', 'success']); const { t } = useI18n(); const appStore = useAppStore()
|
||||
|
||||
const submitting = ref(false); const form = reactive({ amount: 0, notes: '' })
|
||||
watch(() => props.show, (v) => { if(v) { form.amount = 0; form.notes = '' } })
|
||||
|
||||
// 格式化余额：显示完整精度，去除尾部多余的0
|
||||
const formatBalance = (value: number) => {
|
||||
if (value === 0) return '0.00'
|
||||
// 最多保留8位小数，去除尾部的0
|
||||
const formatted = value.toFixed(8).replace(/\.?0+$/, '')
|
||||
// 确保至少有2位小数
|
||||
const parts = formatted.split('.')
|
||||
if (parts.length === 1) return formatted + '.00'
|
||||
if (parts[1].length === 1) return formatted + '0'
|
||||
return formatted
|
||||
}
|
||||
|
||||
// 填入全部余额
|
||||
const fillAllBalance = () => {
|
||||
if (props.user) {
|
||||
form.amount = props.user.balance
|
||||
}
|
||||
}
|
||||
|
||||
const calculateNewBalance = () => {
|
||||
if (!props.user) return 0
|
||||
const result = props.operation === 'add' ? props.user.balance + form.amount : props.user.balance - form.amount
|
||||
// 避免浮点数精度问题导致的 -0.00 显示
|
||||
return Math.abs(result) < 1e-10 ? 0 : result
|
||||
}
|
||||
const handleBalanceSubmit = async () => {
|
||||
if (!props.user) return
|
||||
if (!form.amount || form.amount <= 0) {
|
||||
appStore.showError(t('admin.users.amountRequired'))
|
||||
return
|
||||
}
|
||||
// 退款时验证金额不超过实际余额
|
||||
if (props.operation === 'subtract' && form.amount > props.user.balance) {
|
||||
appStore.showError(t('admin.users.insufficientBalance'))
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
await adminAPI.users.updateBalance(props.user.id, form.amount, props.operation, form.notes)
|
||||
appStore.showSuccess(t('common.success')); emit('success'); emit('close')
|
||||
} catch (e: any) {
|
||||
console.error('Failed to update balance:', e)
|
||||
appStore.showError(e.response?.data?.detail || t('common.error'))
|
||||
} finally { submitting.value = false }
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.users.createUser')"
|
||||
width="normal"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<form id="create-user-form" @submit.prevent="submit" class="space-y-5">
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.email') }}</label>
|
||||
<input v-model="form.email" type="email" required class="input" :placeholder="t('admin.users.enterEmail')" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.password') }}</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input v-model="form.password" type="text" required class="input pr-10" :placeholder="t('admin.users.enterPassword')" />
|
||||
</div>
|
||||
<button type="button" @click="generateRandomPassword" class="btn btn-secondary px-3">
|
||||
<Icon name="refresh" size="md" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.username') }}</label>
|
||||
<input v-model="form.username" type="text" class="input" :placeholder="t('admin.users.enterUsername')" />
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.columns.balance') }}</label>
|
||||
<input v-model.number="form.balance" type="number" step="any" class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
|
||||
<input v-model.number="form.concurrency" type="number" class="input" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="$emit('close')" type="button" class="btn btn-secondary">{{ t('common.cancel') }}</button>
|
||||
<button type="submit" form="create-user-form" :disabled="loading" class="btn btn-primary">
|
||||
{{ loading ? t('admin.users.creating') : t('common.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'; import { adminAPI } from '@/api/admin'
|
||||
import { useForm } from '@/composables/useForm'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const props = defineProps<{ show: boolean }>()
|
||||
const emit = defineEmits(['close', 'success']); const { t } = useI18n()
|
||||
|
||||
const form = reactive({ email: '', password: '', username: '', notes: '', balance: 0, concurrency: 1 })
|
||||
|
||||
const { loading, submit } = useForm({
|
||||
form,
|
||||
submitFn: async (data) => {
|
||||
await adminAPI.users.create(data)
|
||||
emit('success'); emit('close')
|
||||
},
|
||||
successMsg: t('admin.users.userCreated')
|
||||
})
|
||||
|
||||
watch(() => props.show, (v) => { if(v) Object.assign(form, { email: '', password: '', username: '', notes: '', balance: 0, concurrency: 1 }) })
|
||||
|
||||
const generateRandomPassword = () => {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%^&*'
|
||||
let p = ''; for (let i = 0; i < 16; i++) p += chars.charAt(Math.floor(Math.random() * chars.length))
|
||||
form.password = p
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<BaseDialog
|
||||
:show="show"
|
||||
:title="t('admin.users.editUser')"
|
||||
width="normal"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<form v-if="user" id="edit-user-form" @submit.prevent="handleUpdateUser" class="space-y-5">
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.email') }}</label>
|
||||
<input v-model="form.email" type="email" class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.password') }}</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input v-model="form.password" type="text" class="input pr-10" :placeholder="t('admin.users.enterNewPassword')" />
|
||||
<button v-if="form.password" type="button" @click="copyPassword" class="absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700" :class="passwordCopied ? 'text-green-500' : 'text-gray-400'">
|
||||
<svg v-if="passwordCopied" class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg v-else class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" @click="generatePassword" class="btn btn-secondary px-3">
|
||||
<Icon name="refresh" size="md" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.username') }}</label>
|
||||
<input v-model="form.username" type="text" class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.notes') }}</label>
|
||||
<textarea v-model="form.notes" rows="3" class="input"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
|
||||
<input v-model.number="form.concurrency" type="number" class="input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="input-label">{{ t('admin.users.soraStorageQuota') }}</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input v-model.number="form.sora_storage_quota_gb" type="number" min="0" step="0.1" class="input" placeholder="0" />
|
||||
<span class="shrink-0 text-sm text-gray-500">GB</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.users.soraStorageQuotaHint') }}</p>
|
||||
</div>
|
||||
<UserAttributeForm v-model="form.customAttributes" :user-id="user?.id" />
|
||||
</form>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="$emit('close')" type="button" class="btn btn-secondary">{{ t('common.cancel') }}</button>
|
||||
<button type="submit" form="edit-user-form" :disabled="submitting" class="btn btn-primary">
|
||||
{{ submitting ? t('admin.users.updating') : t('common.update') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useClipboard } from '@/composables/useClipboard'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import type { AdminUser, UserAttributeValuesMap } from '@/types'
|
||||
import BaseDialog from '@/components/common/BaseDialog.vue'
|
||||
import UserAttributeForm from '@/components/user/UserAttributeForm.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const props = defineProps<{ show: boolean, user: AdminUser | null }>()
|
||||
const emit = defineEmits(['close', 'success'])
|
||||
const { t } = useI18n(); const appStore = useAppStore(); const { copyToClipboard } = useClipboard()
|
||||
|
||||
const submitting = ref(false); const passwordCopied = ref(false)
|
||||
const form = reactive({ email: '', password: '', username: '', notes: '', concurrency: 1, sora_storage_quota_gb: 0, customAttributes: {} as UserAttributeValuesMap })
|
||||
|
||||
watch(() => props.user, (u) => {
|
||||
if (u) {
|
||||
Object.assign(form, { email: u.email, password: '', username: u.username || '', notes: u.notes || '', concurrency: u.concurrency, sora_storage_quota_gb: Number(((u.sora_storage_quota_bytes || 0) / (1024 * 1024 * 1024)).toFixed(2)), customAttributes: {} })
|
||||
passwordCopied.value = false
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
const generatePassword = () => {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%^&*'
|
||||
let p = ''; for (let i = 0; i < 16; i++) p += chars.charAt(Math.floor(Math.random() * chars.length))
|
||||
form.password = p
|
||||
}
|
||||
const copyPassword = async () => {
|
||||
if (form.password && await copyToClipboard(form.password, t('admin.users.passwordCopied'))) {
|
||||
passwordCopied.value = true; setTimeout(() => passwordCopied.value = false, 2000)
|
||||
}
|
||||
}
|
||||
const handleUpdateUser = async () => {
|
||||
if (!props.user) return
|
||||
if (!form.email.trim()) {
|
||||
appStore.showError(t('admin.users.emailRequired'))
|
||||
return
|
||||
}
|
||||
if (form.concurrency < 1) {
|
||||
appStore.showError(t('admin.users.concurrencyMin'))
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
const data: any = { email: form.email, username: form.username, notes: form.notes, concurrency: form.concurrency, sora_storage_quota_bytes: Math.round((form.sora_storage_quota_gb || 0) * 1024 * 1024 * 1024) }
|
||||
if (form.password.trim()) data.password = form.password.trim()
|
||||
await adminAPI.users.update(props.user.id, data)
|
||||
if (Object.keys(form.customAttributes).length > 0) await adminAPI.userAttributes.updateUserAttributeValues(props.user.id, form.customAttributes)
|
||||
appStore.showSuccess(t('admin.users.userUpdated'))
|
||||
emit('success'); emit('close')
|
||||
} catch (e: any) {
|
||||
appStore.showError(e.response?.data?.detail || t('admin.users.failedToUpdate'))
|
||||
} finally { submitting.value = false }
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<button type="button" :disabled="disabled" class="btn btn-secondary w-full" @click="startLogin">
|
||||
<svg
|
||||
class="icon mr-2"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
style="color: rgb(233, 84, 32); width: 20px; height: 20px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g id="linuxdo_icon" data-name="linuxdo_icon">
|
||||
<path
|
||||
d="m7.44,0s.09,0,.13,0c.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0q.12,0,.25,0t.26.08c.15.03.29.06.44.08,1.97.38,3.78,1.47,4.95,3.11.04.06.09.12.13.18.67.96,1.15,2.11,1.3,3.28q0,.19.09.26c0,.15,0,.29,0,.44,0,.04,0,.09,0,.13,0,.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0,.08,0,.17,0,.25q0,.19-.08.26c-.03.15-.06.29-.08.44-.38,1.97-1.47,3.78-3.11,4.95-.06.04-.12.09-.18.13-.96.67-2.11,1.15-3.28,1.3q-.19,0-.26.09c-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25,0q-.19,0-.26-.08c-.15-.03-.29-.06-.44-.08-1.97-.38-3.78-1.47-4.95-3.11q-.07-.09-.13-.18c-.67-.96-1.15-2.11-1.3-3.28q0-.19-.09-.26c0-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25q0-.19.08-.26c.03-.15.06-.29.08-.44.38-1.97,1.47-3.78,3.11-4.95.06-.04.12-.09.18-.13C4.42.73,5.57.26,6.74.1,7,.07,7.15,0,7.44,0Z"
|
||||
fill="#EFEFEF"
|
||||
></path>
|
||||
<path
|
||||
d="m1.27,11.33h13.45c-.94,1.89-2.51,3.21-4.51,3.88-1.99.59-3.96.37-5.8-.57-1.25-.7-2.67-1.9-3.14-3.3Z"
|
||||
fill="#FEB005"
|
||||
></path>
|
||||
<path
|
||||
d="m12.54,1.99c.87.7,1.82,1.59,2.18,2.68H1.27c.87-1.74,2.33-3.13,4.2-3.78,2.44-.79,5-.47,7.07,1.1Z"
|
||||
fill="#1D1D1F"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
{{ t('auth.linuxdo.signIn') }}
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
|
||||
<span class="text-xs text-gray-500 dark:text-dark-400">
|
||||
{{ t('auth.linuxdo.orContinue') }}
|
||||
</span>
|
||||
<div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
defineProps<{
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
|
||||
function startLogin(): void {
|
||||
const redirectTo = (route.query.redirect as string) || '/dashboard'
|
||||
const apiBase = (import.meta.env.VITE_API_BASE_URL as string | undefined) || '/api/v1'
|
||||
const normalized = apiBase.replace(/\/$/, '')
|
||||
const startURL = `${normalized}/auth/oauth/linuxdo/start?redirect=${encodeURIComponent(redirectTo)}`
|
||||
window.location.href = startURL
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div class="flex min-h-full items-center justify-center p-4">
|
||||
<div class="fixed inset-0 bg-black/50 transition-opacity"></div>
|
||||
|
||||
<div class="relative w-full max-w-md transform rounded-xl bg-white p-6 shadow-xl transition-all dark:bg-dark-800">
|
||||
<!-- Header -->
|
||||
<div class="mb-6 text-center">
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
|
||||
<svg class="h-6 w-6 text-primary-600 dark:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('profile.totp.loginTitle') }}
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('profile.totp.loginHint') }}
|
||||
</p>
|
||||
<p v-if="userEmailMasked" class="mt-1 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ userEmailMasked }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Code Input -->
|
||||
<div class="mb-6">
|
||||
<div class="flex justify-center gap-2">
|
||||
<input
|
||||
v-for="(_, index) in 6"
|
||||
:key="index"
|
||||
:ref="(el) => setInputRef(el, index)"
|
||||
type="text"
|
||||
maxlength="1"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]"
|
||||
class="h-12 w-10 rounded-lg border border-gray-300 text-center text-lg font-semibold focus:border-primary-500 focus:ring-primary-500 dark:border-dark-600 dark:bg-dark-700"
|
||||
:disabled="verifying"
|
||||
@input="handleCodeInput($event, index)"
|
||||
@keydown="handleKeydown($event, index)"
|
||||
@paste="handlePaste"
|
||||
/>
|
||||
</div>
|
||||
<!-- Loading indicator -->
|
||||
<div v-if="verifying" class="mt-3 flex items-center justify-center gap-2 text-sm text-gray-500">
|
||||
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-500"></div>
|
||||
{{ t('common.verifying') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-if="error" class="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-400">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Cancel button only -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary w-full"
|
||||
:disabled="verifying"
|
||||
@click="$emit('cancel')"
|
||||
>
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
defineProps<{
|
||||
tempToken: string
|
||||
userEmailMasked?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
verify: [code: string]
|
||||
cancel: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const verifying = ref(false)
|
||||
const error = ref('')
|
||||
const code = ref<string[]>(['', '', '', '', '', ''])
|
||||
const inputRefs = ref<(HTMLInputElement | null)[]>([])
|
||||
|
||||
// Watch for code changes and auto-submit when 6 digits are entered
|
||||
watch(
|
||||
() => code.value.join(''),
|
||||
(newCode) => {
|
||||
if (newCode.length === 6 && !verifying.value) {
|
||||
emit('verify', newCode)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
setVerifying: (value: boolean) => { verifying.value = value },
|
||||
setError: (message: string) => {
|
||||
error.value = message
|
||||
code.value = ['', '', '', '', '', '']
|
||||
// Clear input DOM values
|
||||
inputRefs.value.forEach(input => {
|
||||
if (input) input.value = ''
|
||||
})
|
||||
nextTick(() => {
|
||||
inputRefs.value[0]?.focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const setInputRef = (el: any, index: number) => {
|
||||
inputRefs.value[index] = el as HTMLInputElement | null
|
||||
}
|
||||
|
||||
const handleCodeInput = (event: Event, index: number) => {
|
||||
const input = event.target as HTMLInputElement
|
||||
const value = input.value.replace(/[^0-9]/g, '')
|
||||
code.value[index] = value
|
||||
|
||||
if (value && index < 5) {
|
||||
nextTick(() => {
|
||||
inputRefs.value[index + 1]?.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent, index: number) => {
|
||||
if (event.key === 'Backspace') {
|
||||
const input = event.target as HTMLInputElement
|
||||
// If current cell is empty and not the first, move to previous cell
|
||||
if (!input.value && index > 0) {
|
||||
event.preventDefault()
|
||||
inputRefs.value[index - 1]?.focus()
|
||||
}
|
||||
// Otherwise, let the browser handle the backspace naturally
|
||||
// The input event will sync code.value via handleCodeInput
|
||||
}
|
||||
}
|
||||
|
||||
const handlePaste = (event: ClipboardEvent) => {
|
||||
event.preventDefault()
|
||||
const pastedData = event.clipboardData?.getData('text') || ''
|
||||
const digits = pastedData.replace(/[^0-9]/g, '').slice(0, 6).split('')
|
||||
|
||||
// Update both the ref and the input elements
|
||||
digits.forEach((digit, index) => {
|
||||
code.value[index] = digit
|
||||
if (inputRefs.value[index]) {
|
||||
inputRefs.value[index]!.value = digit
|
||||
}
|
||||
})
|
||||
|
||||
// Clear remaining inputs if pasted less than 6 digits
|
||||
for (let i = digits.length; i < 6; i++) {
|
||||
code.value[i] = ''
|
||||
if (inputRefs.value[i]) {
|
||||
inputRefs.value[i]!.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const focusIndex = Math.min(digits.length, 5)
|
||||
nextTick(() => {
|
||||
inputRefs.value[focusIndex]?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
inputRefs.value[0]?.focus()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="card p-4">
|
||||
<div class="mb-4 flex items-start justify-between gap-3">
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ title || t('usage.endpointDistribution') }}
|
||||
</h3>
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<div
|
||||
v-if="showSourceToggle"
|
||||
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="source === 'inbound'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:source', 'inbound')"
|
||||
>
|
||||
{{ t('usage.inbound') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="source === 'upstream'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:source', 'upstream')"
|
||||
>
|
||||
{{ t('usage.upstream') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="source === 'path'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:source', 'path')"
|
||||
>
|
||||
{{ t('usage.path') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showMetricToggle"
|
||||
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="metric === 'tokens'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:metric', 'tokens')"
|
||||
>
|
||||
{{ t('admin.dashboard.metricTokens') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="metric === 'actual_cost'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:metric', 'actual_cost')"
|
||||
>
|
||||
{{ t('admin.dashboard.metricActualCost') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="flex h-48 items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div v-else-if="displayEndpointStats.length > 0 && chartData" class="flex items-center gap-6">
|
||||
<div class="h-48 w-48">
|
||||
<Doughnut :data="chartData" :options="doughnutOptions" />
|
||||
</div>
|
||||
<div class="max-h-48 flex-1 overflow-y-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="text-gray-500 dark:text-gray-400">
|
||||
<th class="pb-2 text-left">{{ t('usage.endpoint') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.requests') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.tokens') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.actual') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.standard') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in displayEndpointStats"
|
||||
:key="item.endpoint"
|
||||
class="border-t border-gray-100 dark:border-gray-700"
|
||||
>
|
||||
<td class="max-w-[180px] truncate py-1.5 font-medium text-gray-900 dark:text-white" :title="item.endpoint">
|
||||
{{ item.endpoint }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatNumber(item.requests) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatTokens(item.total_tokens) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-green-600 dark:text-green-400">
|
||||
${{ formatCost(item.actual_cost) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-400 dark:text-gray-500">
|
||||
${{ formatCost(item.cost) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex h-48 items-center justify-center text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.dashboard.noDataAvailable') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
|
||||
import type { EndpointStat } from '@/types'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
type DistributionMetric = 'tokens' | 'actual_cost'
|
||||
type EndpointSource = 'inbound' | 'upstream' | 'path'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
endpointStats: EndpointStat[]
|
||||
upstreamEndpointStats?: EndpointStat[]
|
||||
endpointPathStats?: EndpointStat[]
|
||||
loading?: boolean
|
||||
title?: string
|
||||
metric?: DistributionMetric
|
||||
source?: EndpointSource
|
||||
showMetricToggle?: boolean
|
||||
showSourceToggle?: boolean
|
||||
}>(),
|
||||
{
|
||||
upstreamEndpointStats: () => [],
|
||||
endpointPathStats: () => [],
|
||||
loading: false,
|
||||
title: '',
|
||||
metric: 'tokens',
|
||||
source: 'inbound',
|
||||
showMetricToggle: false,
|
||||
showSourceToggle: false
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:metric': [value: DistributionMetric]
|
||||
'update:source': [value: EndpointSource]
|
||||
}>()
|
||||
|
||||
const chartColors = [
|
||||
'#3b82f6',
|
||||
'#10b981',
|
||||
'#f59e0b',
|
||||
'#ef4444',
|
||||
'#8b5cf6',
|
||||
'#ec4899',
|
||||
'#14b8a6',
|
||||
'#f97316',
|
||||
'#6366f1',
|
||||
'#84cc16',
|
||||
'#06b6d4',
|
||||
'#a855f7'
|
||||
]
|
||||
|
||||
const displayEndpointStats = computed(() => {
|
||||
const sourceStats = props.source === 'upstream'
|
||||
? props.upstreamEndpointStats
|
||||
: props.source === 'path'
|
||||
? props.endpointPathStats
|
||||
: props.endpointStats
|
||||
if (!sourceStats?.length) return []
|
||||
|
||||
const metricKey = props.metric === 'actual_cost' ? 'actual_cost' : 'total_tokens'
|
||||
return [...sourceStats].sort((a, b) => b[metricKey] - a[metricKey])
|
||||
})
|
||||
|
||||
const chartData = computed(() => {
|
||||
if (!displayEndpointStats.value?.length) return null
|
||||
|
||||
return {
|
||||
labels: displayEndpointStats.value.map((item) => item.endpoint),
|
||||
datasets: [
|
||||
{
|
||||
data: displayEndpointStats.value.map((item) =>
|
||||
props.metric === 'actual_cost' ? item.actual_cost : item.total_tokens
|
||||
),
|
||||
backgroundColor: chartColors.slice(0, displayEndpointStats.value.length),
|
||||
borderWidth: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const doughnutOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: any) => {
|
||||
const value = context.raw as number
|
||||
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
|
||||
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0'
|
||||
const formattedValue = props.metric === 'actual_cost'
|
||||
? `$${formatCost(value)}`
|
||||
: formatTokens(value)
|
||||
return `${context.label}: ${formattedValue} (${percentage}%)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
const formatTokens = (value: number): string => {
|
||||
if (value >= 1_000_000_000) {
|
||||
return `${(value / 1_000_000_000).toFixed(2)}B`
|
||||
} else if (value >= 1_000_000) {
|
||||
return `${(value / 1_000_000).toFixed(2)}M`
|
||||
} else if (value >= 1_000) {
|
||||
return `${(value / 1_000).toFixed(2)}K`
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatNumber = (value: number): string => {
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatCost = (value: number): string => {
|
||||
if (value >= 1000) {
|
||||
return (value / 1000).toFixed(2) + 'K'
|
||||
} else if (value >= 1) {
|
||||
return value.toFixed(2)
|
||||
} else if (value >= 0.01) {
|
||||
return value.toFixed(3)
|
||||
}
|
||||
return value.toFixed(4)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="card p-4">
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('admin.dashboard.groupDistribution') }}
|
||||
</h3>
|
||||
<div
|
||||
v-if="showMetricToggle"
|
||||
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="metric === 'tokens'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:metric', 'tokens')"
|
||||
>
|
||||
{{ t('admin.dashboard.metricTokens') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="metric === 'actual_cost'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:metric', 'actual_cost')"
|
||||
>
|
||||
{{ t('admin.dashboard.metricActualCost') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="flex h-48 items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div v-else-if="displayGroupStats.length > 0 && chartData" class="flex items-center gap-6">
|
||||
<div class="h-48 w-48">
|
||||
<Doughnut :data="chartData" :options="doughnutOptions" />
|
||||
</div>
|
||||
<div class="max-h-48 flex-1 overflow-y-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="text-gray-500 dark:text-gray-400">
|
||||
<th class="pb-2 text-left">{{ t('admin.dashboard.group') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.requests') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.tokens') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.actual') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.standard') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="group in displayGroupStats"
|
||||
:key="group.group_id"
|
||||
class="border-t border-gray-100 dark:border-gray-700"
|
||||
>
|
||||
<td
|
||||
class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white"
|
||||
:title="group.group_name || String(group.group_id)"
|
||||
>
|
||||
{{ group.group_name || t('admin.dashboard.noGroup') }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatNumber(group.requests) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatTokens(group.total_tokens) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-green-600 dark:text-green-400">
|
||||
${{ formatCost(group.actual_cost) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-400 dark:text-gray-500">
|
||||
${{ formatCost(group.cost) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-48 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.dashboard.noDataAvailable') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
|
||||
import type { GroupStat } from '@/types'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
type DistributionMetric = 'tokens' | 'actual_cost'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
groupStats: GroupStat[]
|
||||
loading?: boolean
|
||||
metric?: DistributionMetric
|
||||
showMetricToggle?: boolean
|
||||
}>(), {
|
||||
loading: false,
|
||||
metric: 'tokens',
|
||||
showMetricToggle: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:metric': [value: DistributionMetric]
|
||||
}>()
|
||||
|
||||
const chartColors = [
|
||||
'#3b82f6',
|
||||
'#10b981',
|
||||
'#f59e0b',
|
||||
'#ef4444',
|
||||
'#8b5cf6',
|
||||
'#ec4899',
|
||||
'#14b8a6',
|
||||
'#f97316',
|
||||
'#6366f1',
|
||||
'#84cc16'
|
||||
]
|
||||
|
||||
const displayGroupStats = computed(() => {
|
||||
if (!props.groupStats?.length) return []
|
||||
|
||||
const metricKey = props.metric === 'actual_cost' ? 'actual_cost' : 'total_tokens'
|
||||
return [...props.groupStats].sort((a, b) => b[metricKey] - a[metricKey])
|
||||
})
|
||||
|
||||
const chartData = computed(() => {
|
||||
if (!props.groupStats?.length) return null
|
||||
|
||||
return {
|
||||
labels: displayGroupStats.value.map((g) => g.group_name || String(g.group_id)),
|
||||
datasets: [
|
||||
{
|
||||
data: displayGroupStats.value.map((g) => props.metric === 'actual_cost' ? g.actual_cost : g.total_tokens),
|
||||
backgroundColor: chartColors.slice(0, displayGroupStats.value.length),
|
||||
borderWidth: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const doughnutOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: any) => {
|
||||
const value = context.raw as number
|
||||
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
|
||||
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0'
|
||||
const formattedValue = props.metric === 'actual_cost'
|
||||
? `$${formatCost(value)}`
|
||||
: formatTokens(value)
|
||||
return `${context.label}: ${formattedValue} (${percentage}%)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
const formatTokens = (value: number): string => {
|
||||
if (value >= 1_000_000_000) {
|
||||
return `${(value / 1_000_000_000).toFixed(2)}B`
|
||||
} else if (value >= 1_000_000) {
|
||||
return `${(value / 1_000_000).toFixed(2)}M`
|
||||
} else if (value >= 1_000) {
|
||||
return `${(value / 1_000).toFixed(2)}K`
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatNumber = (value: number): string => {
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatCost = (value: number): string => {
|
||||
if (value >= 1000) {
|
||||
return (value / 1000).toFixed(2) + 'K'
|
||||
} else if (value >= 1) {
|
||||
return value.toFixed(2)
|
||||
} else if (value >= 0.01) {
|
||||
return value.toFixed(3)
|
||||
}
|
||||
return value.toFixed(4)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="card p-4">
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ !enableRankingView || activeView === 'model_distribution'
|
||||
? t('admin.dashboard.modelDistribution')
|
||||
: t('admin.dashboard.spendingRankingTitle') }}
|
||||
</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
v-if="showMetricToggle"
|
||||
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="metric === 'tokens'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:metric', 'tokens')"
|
||||
>
|
||||
{{ t('admin.dashboard.metricTokens') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="metric === 'actual_cost'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
|
||||
@click="emit('update:metric', 'actual_cost')"
|
||||
>
|
||||
{{ t('admin.dashboard.metricActualCost') }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="enableRankingView" class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-dark-800">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="
|
||||
activeView === 'model_distribution'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
|
||||
"
|
||||
@click="activeView = 'model_distribution'"
|
||||
>
|
||||
{{ t('admin.dashboard.viewModelDistribution') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
|
||||
:class="
|
||||
activeView === 'spending_ranking'
|
||||
? 'bg-white text-gray-900 shadow-sm dark:bg-dark-700 dark:text-white'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
|
||||
"
|
||||
@click="activeView = 'spending_ranking'"
|
||||
>
|
||||
{{ t('admin.dashboard.viewSpendingRanking') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeView === 'model_distribution' && loading" class="flex h-48 items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="activeView === 'model_distribution' && displayModelStats.length > 0 && chartData"
|
||||
class="flex items-center gap-6"
|
||||
>
|
||||
<div class="h-48 w-48">
|
||||
<Doughnut :data="chartData" :options="doughnutOptions" />
|
||||
</div>
|
||||
<div class="max-h-48 flex-1 overflow-y-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="text-gray-500 dark:text-gray-400">
|
||||
<th class="pb-2 text-left">{{ t('admin.dashboard.model') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.requests') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.tokens') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.actual') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.standard') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="model in displayModelStats"
|
||||
:key="model.model"
|
||||
class="border-t border-gray-100 dark:border-gray-700"
|
||||
>
|
||||
<td
|
||||
class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white"
|
||||
:title="model.model"
|
||||
>
|
||||
{{ model.model }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatNumber(model.requests) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatTokens(model.total_tokens) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-green-600 dark:text-green-400">
|
||||
${{ formatCost(model.actual_cost) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-400 dark:text-gray-500">
|
||||
${{ formatCost(model.cost) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="activeView === 'model_distribution'"
|
||||
class="flex h-48 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.dashboard.noDataAvailable') }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="rankingLoading" class="flex h-48 items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="rankingError"
|
||||
class="flex h-48 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.dashboard.failedToLoad') }}
|
||||
</div>
|
||||
<div v-else-if="rankingDisplayItems.length > 0 && rankingChartData" class="flex items-center gap-6">
|
||||
<div class="h-48 w-48">
|
||||
<Doughnut :data="rankingChartData" :options="rankingDoughnutOptions" />
|
||||
</div>
|
||||
<div class="max-h-48 flex-1 overflow-y-auto">
|
||||
<table class="w-full text-xs">
|
||||
<thead>
|
||||
<tr class="text-gray-500 dark:text-gray-400">
|
||||
<th class="pb-2 text-left">{{ t('admin.dashboard.spendingRankingUser') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.spendingRankingRequests') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.spendingRankingTokens') }}</th>
|
||||
<th class="pb-2 text-right">{{ t('admin.dashboard.spendingRankingSpend') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in rankingDisplayItems"
|
||||
:key="item.isOther ? 'others' : `${item.user_id}-${index}`"
|
||||
class="border-t border-gray-100 transition-colors dark:border-gray-700"
|
||||
:class="item.isOther
|
||||
? 'bg-gray-50/70 dark:bg-dark-700/20'
|
||||
: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40'"
|
||||
@click="item.isOther ? undefined : emit('ranking-click', item)"
|
||||
>
|
||||
<td class="py-1.5">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="shrink-0 text-[11px] font-semibold text-gray-500 dark:text-gray-400">
|
||||
{{ item.isOther ? 'Σ' : `#${index + 1}` }}
|
||||
</span>
|
||||
<span
|
||||
class="block max-w-[140px] truncate font-medium text-gray-900 dark:text-white"
|
||||
:title="getRankingRowLabel(item)"
|
||||
>
|
||||
{{ getRankingRowLabel(item) }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatNumber(item.requests) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
|
||||
{{ formatTokens(item.tokens) }}
|
||||
</td>
|
||||
<td class="py-1.5 text-right text-green-600 dark:text-green-400">
|
||||
${{ formatCost(item.actual_cost) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-48 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.dashboard.noDataAvailable') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
|
||||
import type { ModelStat, UserSpendingRankingItem } from '@/types'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
type DistributionMetric = 'tokens' | 'actual_cost'
|
||||
type RankingDisplayItem = UserSpendingRankingItem & { isOther?: boolean }
|
||||
const props = withDefaults(defineProps<{
|
||||
modelStats: ModelStat[]
|
||||
enableRankingView?: boolean
|
||||
rankingItems?: UserSpendingRankingItem[]
|
||||
rankingTotalActualCost?: number
|
||||
rankingTotalRequests?: number
|
||||
rankingTotalTokens?: number
|
||||
loading?: boolean
|
||||
metric?: DistributionMetric
|
||||
showMetricToggle?: boolean
|
||||
rankingLoading?: boolean
|
||||
rankingError?: boolean
|
||||
}>(), {
|
||||
enableRankingView: false,
|
||||
rankingItems: () => [],
|
||||
rankingTotalActualCost: 0,
|
||||
rankingTotalRequests: 0,
|
||||
rankingTotalTokens: 0,
|
||||
loading: false,
|
||||
metric: 'tokens',
|
||||
showMetricToggle: false,
|
||||
rankingLoading: false,
|
||||
rankingError: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:metric': [value: DistributionMetric]
|
||||
'ranking-click': [item: UserSpendingRankingItem]
|
||||
}>()
|
||||
|
||||
const enableRankingView = computed(() => props.enableRankingView)
|
||||
const activeView = ref<'model_distribution' | 'spending_ranking'>('model_distribution')
|
||||
|
||||
const chartColors = [
|
||||
'#3b82f6',
|
||||
'#10b981',
|
||||
'#f59e0b',
|
||||
'#ef4444',
|
||||
'#8b5cf6',
|
||||
'#ec4899',
|
||||
'#14b8a6',
|
||||
'#f97316',
|
||||
'#6366f1',
|
||||
'#84cc16',
|
||||
'#06b6d4',
|
||||
'#a855f7'
|
||||
]
|
||||
|
||||
const displayModelStats = computed(() => {
|
||||
if (!props.modelStats?.length) return []
|
||||
|
||||
const metricKey = props.metric === 'actual_cost' ? 'actual_cost' : 'total_tokens'
|
||||
return [...props.modelStats].sort((a, b) => b[metricKey] - a[metricKey])
|
||||
})
|
||||
|
||||
const chartData = computed(() => {
|
||||
if (!props.modelStats?.length) return null
|
||||
|
||||
return {
|
||||
labels: displayModelStats.value.map((m) => m.model),
|
||||
datasets: [
|
||||
{
|
||||
data: displayModelStats.value.map((m) => props.metric === 'actual_cost' ? m.actual_cost : m.total_tokens),
|
||||
backgroundColor: chartColors.slice(0, displayModelStats.value.length),
|
||||
borderWidth: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const rankingChartData = computed(() => {
|
||||
if (!props.rankingItems?.length) return null
|
||||
|
||||
const labels = props.rankingItems.map((item, index) => `#${index + 1} ${getRankingUserLabel(item)}`)
|
||||
const data = props.rankingItems.map((item) => item.actual_cost)
|
||||
const backgroundColor = chartColors.slice(0, props.rankingItems.length)
|
||||
|
||||
if (otherRankingItem.value) {
|
||||
labels.push(t('admin.dashboard.spendingRankingOther'))
|
||||
data.push(otherRankingItem.value.actual_cost)
|
||||
backgroundColor.push('#94a3b8')
|
||||
}
|
||||
|
||||
return {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
data,
|
||||
backgroundColor,
|
||||
borderWidth: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const otherRankingItem = computed<RankingDisplayItem | null>(() => {
|
||||
if (!props.rankingItems?.length) return null
|
||||
|
||||
const rankedActualCost = props.rankingItems.reduce((sum, item) => sum + item.actual_cost, 0)
|
||||
const rankedRequests = props.rankingItems.reduce((sum, item) => sum + item.requests, 0)
|
||||
const rankedTokens = props.rankingItems.reduce((sum, item) => sum + item.tokens, 0)
|
||||
|
||||
const otherActualCost = Math.max((props.rankingTotalActualCost || 0) - rankedActualCost, 0)
|
||||
const otherRequests = Math.max((props.rankingTotalRequests || 0) - rankedRequests, 0)
|
||||
const otherTokens = Math.max((props.rankingTotalTokens || 0) - rankedTokens, 0)
|
||||
|
||||
if (otherActualCost <= 0.000001 && otherRequests <= 0 && otherTokens <= 0) return null
|
||||
|
||||
return {
|
||||
user_id: 0,
|
||||
email: '',
|
||||
actual_cost: otherActualCost,
|
||||
requests: otherRequests,
|
||||
tokens: otherTokens,
|
||||
isOther: true
|
||||
}
|
||||
})
|
||||
|
||||
const rankingDisplayItems = computed<RankingDisplayItem[]>(() => {
|
||||
if (!props.rankingItems?.length) return []
|
||||
return otherRankingItem.value
|
||||
? [...props.rankingItems, otherRankingItem.value]
|
||||
: [...props.rankingItems]
|
||||
})
|
||||
|
||||
const doughnutOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: any) => {
|
||||
const value = context.raw as number
|
||||
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
|
||||
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0'
|
||||
const formattedValue = props.metric === 'actual_cost'
|
||||
? `$${formatCost(value)}`
|
||||
: formatTokens(value)
|
||||
return `${context.label}: ${formattedValue} (${percentage}%)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
const rankingDoughnutOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: any) => {
|
||||
const value = context.raw as number
|
||||
const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
|
||||
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0'
|
||||
return `${context.label}: $${formatCost(value)} (${percentage}%)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
const formatTokens = (value: number): string => {
|
||||
if (value >= 1_000_000_000) {
|
||||
return `${(value / 1_000_000_000).toFixed(2)}B`
|
||||
} else if (value >= 1_000_000) {
|
||||
return `${(value / 1_000_000).toFixed(2)}M`
|
||||
} else if (value >= 1_000) {
|
||||
return `${(value / 1_000).toFixed(2)}K`
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatNumber = (value: number): string => {
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const getRankingUserLabel = (item: UserSpendingRankingItem): string => {
|
||||
if (item.email) return item.email
|
||||
return t('admin.redeem.userPrefix', { id: item.user_id })
|
||||
}
|
||||
|
||||
const getRankingRowLabel = (item: RankingDisplayItem): string => {
|
||||
if (item.isOther) return t('admin.dashboard.spendingRankingOther')
|
||||
return getRankingUserLabel(item)
|
||||
}
|
||||
|
||||
const formatCost = (value: number): string => {
|
||||
if (value >= 1000) {
|
||||
return (value / 1000).toFixed(2) + 'K'
|
||||
} else if (value >= 1) {
|
||||
return value.toFixed(2)
|
||||
} else if (value >= 0.01) {
|
||||
return value.toFixed(3)
|
||||
}
|
||||
return value.toFixed(4)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="card p-4">
|
||||
<h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('admin.dashboard.tokenUsageTrend') }}
|
||||
</h3>
|
||||
<div v-if="loading" class="flex h-48 items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div v-else-if="trendData.length > 0 && chartData" class="h-48">
|
||||
<Line :data="chartData" :options="lineOptions" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-48 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('admin.dashboard.noDataAvailable') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
} from 'chart.js'
|
||||
import { Line } from 'vue-chartjs'
|
||||
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
|
||||
import type { TrendDataPoint } from '@/types'
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler
|
||||
)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
trendData: TrendDataPoint[]
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const isDarkMode = computed(() => {
|
||||
return document.documentElement.classList.contains('dark')
|
||||
})
|
||||
|
||||
const chartColors = computed(() => ({
|
||||
text: isDarkMode.value ? '#e5e7eb' : '#374151',
|
||||
grid: isDarkMode.value ? '#374151' : '#e5e7eb',
|
||||
input: '#3b82f6',
|
||||
output: '#10b981',
|
||||
cacheCreation: '#f59e0b',
|
||||
cacheRead: '#06b6d4'
|
||||
}))
|
||||
|
||||
const chartData = computed(() => {
|
||||
if (!props.trendData?.length) return null
|
||||
|
||||
return {
|
||||
labels: props.trendData.map((d) => d.date),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Input',
|
||||
data: props.trendData.map((d) => d.input_tokens),
|
||||
borderColor: chartColors.value.input,
|
||||
backgroundColor: `${chartColors.value.input}20`,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
},
|
||||
{
|
||||
label: 'Output',
|
||||
data: props.trendData.map((d) => d.output_tokens),
|
||||
borderColor: chartColors.value.output,
|
||||
backgroundColor: `${chartColors.value.output}20`,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
},
|
||||
{
|
||||
label: 'Cache Creation',
|
||||
data: props.trendData.map((d) => d.cache_creation_tokens),
|
||||
borderColor: chartColors.value.cacheCreation,
|
||||
backgroundColor: `${chartColors.value.cacheCreation}20`,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
},
|
||||
{
|
||||
label: 'Cache Read',
|
||||
data: props.trendData.map((d) => d.cache_read_tokens),
|
||||
borderColor: chartColors.value.cacheRead,
|
||||
backgroundColor: `${chartColors.value.cacheRead}20`,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const lineOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index' as const
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top' as const,
|
||||
labels: {
|
||||
color: chartColors.value.text,
|
||||
usePointStyle: true,
|
||||
pointStyle: 'circle',
|
||||
padding: 15,
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context: any) => {
|
||||
return `${context.dataset.label}: ${formatTokens(context.raw)}`
|
||||
},
|
||||
footer: (tooltipItems: any) => {
|
||||
const dataIndex = tooltipItems[0]?.dataIndex
|
||||
if (dataIndex !== undefined && props.trendData[dataIndex]) {
|
||||
const data = props.trendData[dataIndex]
|
||||
return `Actual: $${formatCost(data.actual_cost)} | Standard: $${formatCost(data.cost)}`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: chartColors.value.grid
|
||||
},
|
||||
ticks: {
|
||||
color: chartColors.value.text,
|
||||
font: {
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
color: chartColors.value.grid
|
||||
},
|
||||
ticks: {
|
||||
color: chartColors.value.text,
|
||||
font: {
|
||||
size: 10
|
||||
},
|
||||
callback: (value: string | number) => formatTokens(Number(value))
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
const formatTokens = (value: number): string => {
|
||||
if (value >= 1_000_000_000) {
|
||||
return `${(value / 1_000_000_000).toFixed(2)}B`
|
||||
} else if (value >= 1_000_000) {
|
||||
return `${(value / 1_000_000).toFixed(2)}M`
|
||||
} else if (value >= 1_000) {
|
||||
return `${(value / 1_000).toFixed(2)}K`
|
||||
}
|
||||
return value.toLocaleString()
|
||||
}
|
||||
|
||||
const formatCost = (value: number): string => {
|
||||
if (value >= 1000) {
|
||||
return (value / 1000).toFixed(2) + 'K'
|
||||
} else if (value >= 1) {
|
||||
return value.toFixed(2)
|
||||
} else if (value >= 0.01) {
|
||||
return value.toFixed(3)
|
||||
}
|
||||
return value.toFixed(4)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,114 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
|
||||
import GroupDistributionChart from '../GroupDistributionChart.vue'
|
||||
|
||||
const messages: Record<string, string> = {
|
||||
'admin.dashboard.groupDistribution': 'Group Distribution',
|
||||
'admin.dashboard.group': 'Group',
|
||||
'admin.dashboard.noGroup': 'No Group',
|
||||
'admin.dashboard.requests': 'Requests',
|
||||
'admin.dashboard.tokens': 'Tokens',
|
||||
'admin.dashboard.actual': 'Actual',
|
||||
'admin.dashboard.standard': 'Standard',
|
||||
'admin.dashboard.metricTokens': 'By Tokens',
|
||||
'admin.dashboard.metricActualCost': 'By Actual Cost',
|
||||
'admin.dashboard.noDataAvailable': 'No data available',
|
||||
}
|
||||
|
||||
vi.mock('vue-i18n', async () => {
|
||||
const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string) => messages[key] ?? key,
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('vue-chartjs', () => ({
|
||||
Doughnut: {
|
||||
props: ['data'],
|
||||
template: '<div class="chart-data">{{ JSON.stringify(data) }}</div>',
|
||||
},
|
||||
}))
|
||||
|
||||
describe('GroupDistributionChart', () => {
|
||||
const groupStats = [
|
||||
{
|
||||
group_id: 1,
|
||||
group_name: 'group-a',
|
||||
requests: 9,
|
||||
total_tokens: 1200,
|
||||
cost: 1.8,
|
||||
actual_cost: 0.1,
|
||||
},
|
||||
{
|
||||
group_id: 2,
|
||||
group_name: 'group-b',
|
||||
requests: 4,
|
||||
total_tokens: 600,
|
||||
cost: 0.7,
|
||||
actual_cost: 0.9,
|
||||
},
|
||||
]
|
||||
|
||||
it('uses total_tokens and token ordering by default', () => {
|
||||
const wrapper = mount(GroupDistributionChart, {
|
||||
props: {
|
||||
groupStats,
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
LoadingSpinner: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const chartData = JSON.parse(wrapper.find('.chart-data').text())
|
||||
expect(chartData.labels).toEqual(['group-a', 'group-b'])
|
||||
expect(chartData.datasets[0].data).toEqual([1200, 600])
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].text()).toContain('group-a')
|
||||
expect(rows[1].text()).toContain('group-b')
|
||||
|
||||
const options = (wrapper.vm as any).$?.setupState.doughnutOptions
|
||||
const label = options.plugins.tooltip.callbacks.label({
|
||||
label: 'group-a',
|
||||
raw: 1200,
|
||||
dataset: { data: [1200, 600] },
|
||||
})
|
||||
expect(label).toBe('group-a: 1.20K (66.7%)')
|
||||
})
|
||||
|
||||
it('uses actual_cost and reorders rows in actual cost mode', () => {
|
||||
const wrapper = mount(GroupDistributionChart, {
|
||||
props: {
|
||||
groupStats,
|
||||
metric: 'actual_cost',
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
LoadingSpinner: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const chartData = JSON.parse(wrapper.find('.chart-data').text())
|
||||
expect(chartData.labels).toEqual(['group-b', 'group-a'])
|
||||
expect(chartData.datasets[0].data).toEqual([0.9, 0.1])
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].text()).toContain('group-b')
|
||||
expect(rows[1].text()).toContain('group-a')
|
||||
|
||||
const options = (wrapper.vm as any).$?.setupState.doughnutOptions
|
||||
const label = options.plugins.tooltip.callbacks.label({
|
||||
label: 'group-b',
|
||||
raw: 0.9,
|
||||
dataset: { data: [0.9, 0.1] },
|
||||
})
|
||||
expect(label).toBe('group-b: $0.900 (90.0%)')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,171 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
|
||||
import ModelDistributionChart from '../ModelDistributionChart.vue'
|
||||
|
||||
const messages: Record<string, string> = {
|
||||
'admin.dashboard.modelDistribution': 'Model Distribution',
|
||||
'admin.dashboard.spendingRankingTitle': 'User Spending Ranking',
|
||||
'admin.dashboard.viewModelDistribution': 'Model Distribution',
|
||||
'admin.dashboard.viewSpendingRanking': 'User Spending Ranking',
|
||||
'admin.dashboard.spendingRankingUser': 'User',
|
||||
'admin.dashboard.spendingRankingRequests': 'Requests',
|
||||
'admin.dashboard.spendingRankingTokens': 'Tokens',
|
||||
'admin.dashboard.spendingRankingSpend': 'Spend',
|
||||
'admin.dashboard.spendingRankingOther': 'Others',
|
||||
'admin.dashboard.model': 'Model',
|
||||
'admin.dashboard.requests': 'Requests',
|
||||
'admin.dashboard.tokens': 'Tokens',
|
||||
'admin.dashboard.actual': 'Actual',
|
||||
'admin.dashboard.standard': 'Standard',
|
||||
'admin.dashboard.metricTokens': 'By Tokens',
|
||||
'admin.dashboard.metricActualCost': 'By Actual Cost',
|
||||
'admin.dashboard.noDataAvailable': 'No data available',
|
||||
'admin.redeem.userPrefix': 'User #{id}',
|
||||
}
|
||||
|
||||
vi.mock('vue-i18n', async () => {
|
||||
const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string) => messages[key] ?? key,
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('vue-chartjs', () => ({
|
||||
Doughnut: {
|
||||
props: ['data'],
|
||||
template: '<div class="chart-data">{{ JSON.stringify(data) }}</div>',
|
||||
},
|
||||
}))
|
||||
|
||||
describe('ModelDistributionChart', () => {
|
||||
const modelStats = [
|
||||
{
|
||||
model: 'model-a',
|
||||
requests: 8,
|
||||
input_tokens: 100,
|
||||
output_tokens: 50,
|
||||
cache_creation_tokens: 0,
|
||||
cache_read_tokens: 0,
|
||||
total_tokens: 1000,
|
||||
cost: 1.5,
|
||||
actual_cost: 0.2,
|
||||
},
|
||||
{
|
||||
model: 'model-b',
|
||||
requests: 3,
|
||||
input_tokens: 40,
|
||||
output_tokens: 20,
|
||||
cache_creation_tokens: 0,
|
||||
cache_read_tokens: 0,
|
||||
total_tokens: 500,
|
||||
cost: 0.5,
|
||||
actual_cost: 1.4,
|
||||
},
|
||||
]
|
||||
|
||||
it('uses total_tokens and token ordering by default', () => {
|
||||
const wrapper = mount(ModelDistributionChart, {
|
||||
props: {
|
||||
modelStats,
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
LoadingSpinner: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const chartData = JSON.parse(wrapper.find('.chart-data').text())
|
||||
expect(chartData.labels).toEqual(['model-a', 'model-b'])
|
||||
expect(chartData.datasets[0].data).toEqual([1000, 500])
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].text()).toContain('model-a')
|
||||
expect(rows[1].text()).toContain('model-b')
|
||||
|
||||
const options = (wrapper.vm as any).$?.setupState.doughnutOptions
|
||||
const label = options.plugins.tooltip.callbacks.label({
|
||||
label: 'model-a',
|
||||
raw: 1000,
|
||||
dataset: { data: [1000, 500] },
|
||||
})
|
||||
expect(label).toBe('model-a: 1.00K (66.7%)')
|
||||
})
|
||||
|
||||
it('uses actual_cost and reorders rows in actual cost mode', () => {
|
||||
const wrapper = mount(ModelDistributionChart, {
|
||||
props: {
|
||||
modelStats,
|
||||
metric: 'actual_cost',
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
LoadingSpinner: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const chartData = JSON.parse(wrapper.find('.chart-data').text())
|
||||
expect(chartData.labels).toEqual(['model-b', 'model-a'])
|
||||
expect(chartData.datasets[0].data).toEqual([1.4, 0.2])
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows[0].text()).toContain('model-b')
|
||||
expect(rows[1].text()).toContain('model-a')
|
||||
|
||||
const options = (wrapper.vm as any).$?.setupState.doughnutOptions
|
||||
const label = options.plugins.tooltip.callbacks.label({
|
||||
label: 'model-b',
|
||||
raw: 1.4,
|
||||
dataset: { data: [1.4, 0.2] },
|
||||
})
|
||||
expect(label).toBe('model-b: $1.40 (87.5%)')
|
||||
})
|
||||
|
||||
it('renders Others in the spending ranking table and uses a dedicated chart color', async () => {
|
||||
const wrapper = mount(ModelDistributionChart, {
|
||||
props: {
|
||||
modelStats: [],
|
||||
enableRankingView: true,
|
||||
rankingItems: [
|
||||
{ user_id: 1, email: 'alpha@example.com', actual_cost: 12, requests: 10, tokens: 1000 },
|
||||
{ user_id: 2, email: 'beta@example.com', actual_cost: 8, requests: 6, tokens: 600 },
|
||||
],
|
||||
rankingTotalActualCost: 30,
|
||||
rankingTotalRequests: 20,
|
||||
rankingTotalTokens: 2000,
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
LoadingSpinner: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const rankingButton = wrapper.findAll('button').find((button) => button.text() === 'User Spending Ranking')
|
||||
expect(rankingButton).toBeTruthy()
|
||||
await rankingButton!.trigger('click')
|
||||
|
||||
const chartData = JSON.parse(wrapper.find('.chart-data').text())
|
||||
expect(chartData.labels).toEqual([
|
||||
'#1 alpha@example.com',
|
||||
'#2 beta@example.com',
|
||||
'Others',
|
||||
])
|
||||
expect(chartData.datasets[0].data).toEqual([12, 8, 10])
|
||||
expect(chartData.datasets[0].backgroundColor[0]).toBe('#3b82f6')
|
||||
expect(chartData.datasets[0].backgroundColor[2]).toBe('#94a3b8')
|
||||
expect(chartData.datasets[0].backgroundColor[2]).not.toBe(chartData.datasets[0].backgroundColor[0])
|
||||
|
||||
const rows = wrapper.findAll('tbody tr')
|
||||
expect(rows).toHaveLength(3)
|
||||
expect(rows[2].text()).toContain('Others')
|
||||
expect(rows[2].text()).toContain('4')
|
||||
expect(rows[2].text()).toContain('400')
|
||||
expect(rows[2].text()).toContain('$10.00')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,590 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 铃铛按钮 -->
|
||||
<button
|
||||
@click="openModal"
|
||||
class="relative flex h-9 w-9 items-center justify-center rounded-lg text-gray-600 transition-all hover:bg-gray-100 hover:scale-105 dark:text-gray-400 dark:hover:bg-dark-800"
|
||||
:class="{ 'text-blue-600 dark:text-blue-400': unreadCount > 0 }"
|
||||
:aria-label="t('announcements.title')"
|
||||
>
|
||||
<Icon name="bell" size="md" />
|
||||
<!-- 未读红点 -->
|
||||
<span
|
||||
v-if="unreadCount > 0"
|
||||
class="absolute right-1 top-1 flex h-2 w-2"
|
||||
>
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"></span>
|
||||
<span class="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- 公告列表 Modal -->
|
||||
<Teleport to="body">
|
||||
<Transition name="modal-fade">
|
||||
<div
|
||||
v-if="isModalOpen"
|
||||
class="fixed inset-0 z-[100] flex items-start justify-center overflow-y-auto bg-gradient-to-br from-black/70 via-black/60 to-black/70 p-4 pt-[8vh] backdrop-blur-md"
|
||||
@click="closeModal"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-[620px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
|
||||
@click.stop
|
||||
>
|
||||
<!-- Header with Gradient -->
|
||||
<div class="relative overflow-hidden border-b border-gray-100/80 bg-gradient-to-br from-blue-50/50 to-indigo-50/30 px-6 py-5 dark:border-dark-700/50 dark:from-blue-900/10 dark:to-indigo-900/5">
|
||||
<div class="relative z-10 flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/30">
|
||||
<Icon name="bell" size="sm" />
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('announcements.title') }}
|
||||
</h2>
|
||||
</div>
|
||||
<p v-if="unreadCount > 0" class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<span class="font-medium text-blue-600 dark:text-blue-400">{{ unreadCount }}</span>
|
||||
{{ t('announcements.unread') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
v-if="unreadCount > 0"
|
||||
@click="markAllAsRead"
|
||||
:disabled="loading"
|
||||
class="rounded-lg bg-blue-600 px-4 py-2 text-xs font-medium text-white shadow-lg shadow-blue-500/30 transition-all hover:bg-blue-700 hover:shadow-xl disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
|
||||
>
|
||||
{{ t('announcements.markAllRead') }}
|
||||
</button>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/50 text-gray-500 backdrop-blur-sm transition-all hover:bg-white hover:text-gray-700 dark:bg-dark-700/50 dark:text-gray-400 dark:hover:bg-dark-700 dark:hover:text-gray-300"
|
||||
:aria-label="t('common.close')"
|
||||
>
|
||||
<Icon name="x" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative gradient -->
|
||||
<div class="absolute right-0 top-0 h-full w-48 bg-gradient-to-l from-indigo-100/20 to-transparent dark:from-indigo-900/10"></div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="max-h-[65vh] overflow-y-auto">
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-16">
|
||||
<div class="relative">
|
||||
<div class="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-dark-600 dark:border-t-blue-400"></div>
|
||||
<div class="absolute inset-0 h-12 w-12 animate-pulse rounded-full border-4 border-blue-400/30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Announcements List -->
|
||||
<div v-else-if="announcements.length > 0">
|
||||
<div
|
||||
v-for="item in announcements"
|
||||
:key="item.id"
|
||||
class="group relative flex items-center gap-4 border-b border-gray-100 px-6 py-4 transition-all hover:bg-gray-50 dark:border-dark-700 dark:hover:bg-dark-700/30"
|
||||
:class="{ 'bg-blue-50/30 dark:bg-blue-900/5': !item.read_at }"
|
||||
style="min-height: 72px"
|
||||
@click="openDetail(item)"
|
||||
>
|
||||
<!-- Status Indicator -->
|
||||
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center">
|
||||
<div
|
||||
v-if="!item.read_at"
|
||||
class="relative flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/30"
|
||||
>
|
||||
<!-- Pulse ring -->
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-xl bg-blue-400 opacity-75"></span>
|
||||
<!-- Icon -->
|
||||
<svg class="relative z-10 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-10 w-10 items-center justify-center rounded-xl bg-gray-100 text-gray-400 dark:bg-dark-700 dark:text-gray-600"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex min-w-0 flex-1 items-center justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h3 class="truncate text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<time class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ formatRelativeTime(item.created_at) }}
|
||||
</time>
|
||||
<span
|
||||
v-if="!item.read_at"
|
||||
class="inline-flex items-center gap-1 rounded-md bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
|
||||
>
|
||||
<span class="relative flex h-1.5 w-1.5">
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75"></span>
|
||||
<span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-600"></span>
|
||||
</span>
|
||||
{{ t('announcements.unread') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div class="flex-shrink-0">
|
||||
<svg
|
||||
class="h-5 w-5 text-gray-400 transition-transform group-hover:translate-x-1 dark:text-gray-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unread indicator bar -->
|
||||
<div
|
||||
v-if="!item.read_at"
|
||||
class="absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-blue-500 to-indigo-600"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="flex flex-col items-center justify-center py-16">
|
||||
<div class="relative mb-4">
|
||||
<div class="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-dark-700 dark:to-dark-600">
|
||||
<Icon name="inbox" size="xl" class="text-gray-400 dark:text-gray-500" />
|
||||
</div>
|
||||
<div class="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-white">
|
||||
<svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('announcements.empty') }}</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('announcements.emptyDescription') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<!-- 公告详情 Modal -->
|
||||
<Teleport to="body">
|
||||
<Transition name="modal-fade">
|
||||
<div
|
||||
v-if="detailModalOpen && selectedAnnouncement"
|
||||
class="fixed inset-0 z-[110] flex items-start justify-center overflow-y-auto bg-gradient-to-br from-black/70 via-black/60 to-black/70 p-4 pt-[6vh] backdrop-blur-md"
|
||||
@click="closeDetail"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-[780px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
|
||||
@click.stop
|
||||
>
|
||||
<!-- Header with Decorative Elements -->
|
||||
<div class="relative overflow-hidden border-b border-gray-100 bg-gradient-to-br from-blue-50/80 via-indigo-50/50 to-purple-50/30 px-8 py-6 dark:border-dark-700 dark:from-blue-900/20 dark:via-indigo-900/10 dark:to-purple-900/5">
|
||||
<!-- Decorative background elements -->
|
||||
<div class="absolute right-0 top-0 h-full w-64 bg-gradient-to-l from-indigo-100/30 to-transparent dark:from-indigo-900/20"></div>
|
||||
<div class="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-blue-400/20 to-indigo-500/20 blur-3xl"></div>
|
||||
<div class="absolute -left-4 -bottom-4 h-24 w-24 rounded-full bg-gradient-to-tr from-purple-400/20 to-pink-500/20 blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10 flex items-start justify-between gap-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Icon and Category -->
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/30">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded-lg bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
|
||||
{{ t('announcements.title') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!selectedAnnouncement.read_at"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 px-2.5 py-1 text-xs font-medium text-white shadow-lg shadow-blue-500/30"
|
||||
>
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
|
||||
<span class="relative inline-flex h-2 w-2 rounded-full bg-white"></span>
|
||||
</span>
|
||||
{{ t('announcements.unread') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h2 class="mb-3 text-2xl font-bold leading-tight text-gray-900 dark:text-white">
|
||||
{{ selectedAnnouncement.title }}
|
||||
</h2>
|
||||
|
||||
<!-- Meta Info -->
|
||||
<div class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<time>{{ formatRelativeWithDateTime(selectedAnnouncement.created_at) }}</time>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
<span>{{ selectedAnnouncement.read_at ? t('announcements.read') : t('announcements.unread') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Close button -->
|
||||
<button
|
||||
@click="closeDetail"
|
||||
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-white/50 text-gray-500 backdrop-blur-sm transition-all hover:bg-white hover:text-gray-700 hover:shadow-lg dark:bg-dark-700/50 dark:text-gray-400 dark:hover:bg-dark-700 dark:hover:text-gray-300"
|
||||
:aria-label="t('common.close')"
|
||||
>
|
||||
<Icon name="x" size="md" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body with Enhanced Markdown -->
|
||||
<div class="max-h-[60vh] overflow-y-auto bg-white px-8 py-8 dark:bg-dark-800">
|
||||
<!-- Content with decorative border -->
|
||||
<div class="relative">
|
||||
<!-- Decorative left border -->
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 rounded-full bg-gradient-to-b from-blue-500 via-indigo-500 to-purple-500"></div>
|
||||
|
||||
<div class="pl-6">
|
||||
<div
|
||||
class="markdown-body prose prose-sm max-w-none dark:prose-invert"
|
||||
v-html="renderMarkdown(selectedAnnouncement.content)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer with Actions -->
|
||||
<div class="border-t border-gray-100 bg-gray-50/50 px-8 py-5 dark:border-dark-700 dark:bg-dark-900/30">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>{{ selectedAnnouncement.read_at ? t('announcements.readStatus') : t('announcements.markReadHint') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="closeDetail"
|
||||
class="rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 hover:shadow dark:border-dark-600 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!selectedAnnouncement.read_at"
|
||||
@click="markAsReadAndClose(selectedAnnouncement.id)"
|
||||
class="rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-500/30 transition-all hover:shadow-xl hover:scale-105"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{{ t('announcements.markRead') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { marked } from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useAnnouncementStore } from '@/stores/announcements'
|
||||
import { formatRelativeTime, formatRelativeWithDateTime } from '@/utils/format'
|
||||
import type { UserAnnouncement } from '@/types'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const appStore = useAppStore()
|
||||
const announcementStore = useAnnouncementStore()
|
||||
|
||||
// Configure marked
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})
|
||||
|
||||
// Use store state (storeToRefs for reactivity)
|
||||
const { announcements, loading } = storeToRefs(announcementStore)
|
||||
const unreadCount = computed(() => announcementStore.unreadCount)
|
||||
|
||||
// Local modal state
|
||||
const isModalOpen = ref(false)
|
||||
const detailModalOpen = ref(false)
|
||||
const selectedAnnouncement = ref<UserAnnouncement | null>(null)
|
||||
|
||||
// Methods
|
||||
function renderMarkdown(content: string): string {
|
||||
if (!content) return ''
|
||||
const html = marked.parse(content) as string
|
||||
return DOMPurify.sanitize(html)
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
isModalOpen.value = false
|
||||
}
|
||||
|
||||
function openDetail(announcement: UserAnnouncement) {
|
||||
selectedAnnouncement.value = announcement
|
||||
detailModalOpen.value = true
|
||||
if (!announcement.read_at) {
|
||||
markAsRead(announcement.id)
|
||||
}
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
detailModalOpen.value = false
|
||||
selectedAnnouncement.value = null
|
||||
}
|
||||
|
||||
async function markAsRead(id: number) {
|
||||
try {
|
||||
await announcementStore.markAsRead(id)
|
||||
} catch (err: any) {
|
||||
appStore.showError(err?.message || t('common.unknownError'))
|
||||
}
|
||||
}
|
||||
|
||||
async function markAsReadAndClose(id: number) {
|
||||
await markAsRead(id)
|
||||
appStore.showSuccess(t('announcements.markedAsRead'))
|
||||
closeDetail()
|
||||
}
|
||||
|
||||
async function markAllAsRead() {
|
||||
try {
|
||||
await announcementStore.markAllAsRead()
|
||||
appStore.showSuccess(t('announcements.allMarkedAsRead'))
|
||||
} catch (err: any) {
|
||||
appStore.showError(err?.message || t('common.unknownError'))
|
||||
}
|
||||
}
|
||||
|
||||
function handleEscape(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
if (detailModalOpen.value) {
|
||||
closeDetail()
|
||||
} else if (isModalOpen.value) {
|
||||
closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
|
||||
watch(
|
||||
[isModalOpen, detailModalOpen, () => announcementStore.currentPopup],
|
||||
([modal, detail, popup]) => {
|
||||
document.body.style.overflow = (modal || detail || popup) ? 'hidden' : ''
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Modal Animations */
|
||||
.modal-fade-enter-active {
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.modal-fade-leave-active {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.modal-fade-enter-from,
|
||||
.modal-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-fade-enter-from > div {
|
||||
transform: scale(0.94) translateY(-12px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-fade-leave-to > div {
|
||||
transform: scale(0.96) translateY(-8px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
.overflow-y-auto::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom, #cbd5e1, #94a3b8);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark .overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom, #4b5563, #374151);
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(to bottom, #94a3b8, #64748b);
|
||||
}
|
||||
|
||||
.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(to bottom, #6b7280, #4b5563);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Enhanced Markdown Styles */
|
||||
.markdown-body {
|
||||
@apply text-[15px] leading-[1.75];
|
||||
@apply text-gray-700 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
@apply mb-6 mt-8 border-b border-gray-200 pb-3 text-3xl font-bold text-gray-900 dark:border-dark-600 dark:text-white;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
@apply mb-4 mt-7 border-b border-gray-100 pb-2 text-2xl font-bold text-gray-900 dark:border-dark-700 dark:text-white;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
@apply mb-3 mt-6 text-xl font-semibold text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
@apply mb-2 mt-5 text-lg font-semibold text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
@apply mb-4 leading-relaxed;
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
@apply font-medium text-blue-600 underline decoration-blue-600/30 decoration-2 underline-offset-2 transition-all hover:decoration-blue-600 dark:text-blue-400 dark:decoration-blue-400/30 dark:hover:decoration-blue-400;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
@apply mb-4 ml-6 space-y-2;
|
||||
}
|
||||
|
||||
.markdown-body ul {
|
||||
@apply list-disc;
|
||||
}
|
||||
|
||||
.markdown-body ol {
|
||||
@apply list-decimal;
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
@apply leading-relaxed;
|
||||
@apply pl-2;
|
||||
}
|
||||
|
||||
.markdown-body li::marker {
|
||||
@apply text-blue-600 dark:text-blue-400;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
@apply relative my-5 border-l-4 border-blue-500 bg-blue-50/50 py-3 pl-5 pr-4 italic text-gray-700 dark:border-blue-400 dark:bg-blue-900/10 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.markdown-body blockquote::before {
|
||||
content: '"';
|
||||
@apply absolute -left-1 top-0 text-5xl font-serif text-blue-500/20 dark:text-blue-400/20;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
@apply rounded-lg bg-gray-100 px-2 py-1 text-[13px] font-mono text-pink-600 dark:bg-dark-700 dark:text-pink-400;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
@apply my-5 overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 p-5 dark:border-dark-600 dark:bg-dark-900/50;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
@apply bg-transparent p-0 text-[13px] text-gray-800 dark:text-gray-200;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
@apply my-8 border-0 border-t-2 border-gray-200 dark:border-dark-700;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
@apply mb-5 w-full overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600;
|
||||
}
|
||||
|
||||
.markdown-body th,
|
||||
.markdown-body td {
|
||||
@apply border-r border-b border-gray-200 px-4 py-3 text-left dark:border-dark-600;
|
||||
}
|
||||
|
||||
.markdown-body th:last-child,
|
||||
.markdown-body td:last-child {
|
||||
@apply border-r-0;
|
||||
}
|
||||
|
||||
.markdown-body tr:last-child td {
|
||||
@apply border-b-0;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
@apply bg-gradient-to-br from-blue-50 to-indigo-50 font-semibold text-gray-900 dark:from-blue-900/20 dark:to-indigo-900/10 dark:text-white;
|
||||
}
|
||||
|
||||
.markdown-body tbody tr {
|
||||
@apply transition-colors hover:bg-gray-50 dark:hover:bg-dark-700/30;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
@apply my-5 max-w-full rounded-xl border border-gray-200 shadow-md dark:border-dark-600;
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
@apply font-semibold text-gray-900 dark:text-white;
|
||||
}
|
||||
|
||||
.markdown-body em {
|
||||
@apply italic text-gray-600 dark:text-gray-400;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="popup-fade">
|
||||
<div
|
||||
v-if="announcementStore.currentPopup"
|
||||
class="fixed inset-0 z-[120] flex items-start justify-center overflow-y-auto bg-gradient-to-br from-black/70 via-black/60 to-black/70 p-4 pt-[8vh] backdrop-blur-md"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-[680px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
|
||||
@click.stop
|
||||
>
|
||||
<!-- Header with warm gradient -->
|
||||
<div class="relative overflow-hidden border-b border-amber-100/80 bg-gradient-to-br from-amber-50/80 via-orange-50/50 to-yellow-50/30 px-8 py-6 dark:border-dark-700/50 dark:from-amber-900/20 dark:via-orange-900/10 dark:to-yellow-900/5">
|
||||
<!-- Decorative background -->
|
||||
<div class="absolute right-0 top-0 h-full w-64 bg-gradient-to-l from-orange-100/30 to-transparent dark:from-orange-900/20"></div>
|
||||
<div class="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-amber-400/20 to-orange-500/20 blur-3xl"></div>
|
||||
<div class="absolute -left-4 -bottom-4 h-24 w-24 rounded-full bg-gradient-to-tr from-yellow-400/20 to-amber-500/20 blur-2xl"></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- Icon and badge -->
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-lg shadow-amber-500/30">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="inline-flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-amber-500 to-orange-600 px-2.5 py-1 text-xs font-medium text-white shadow-lg shadow-amber-500/30">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
|
||||
<span class="relative inline-flex h-2 w-2 rounded-full bg-white"></span>
|
||||
</span>
|
||||
{{ t('announcements.unread') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h2 class="mb-2 text-2xl font-bold leading-tight text-gray-900 dark:text-white">
|
||||
{{ announcementStore.currentPopup.title }}
|
||||
</h2>
|
||||
|
||||
<!-- Time -->
|
||||
<div class="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<time>{{ formatRelativeWithDateTime(announcementStore.currentPopup.created_at) }}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="max-h-[50vh] overflow-y-auto bg-white px-8 py-8 dark:bg-dark-800">
|
||||
<div class="relative">
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 rounded-full bg-gradient-to-b from-amber-500 via-orange-500 to-yellow-500"></div>
|
||||
<div class="pl-6">
|
||||
<div
|
||||
class="markdown-body prose prose-sm max-w-none dark:prose-invert"
|
||||
v-html="renderedContent"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="border-t border-gray-100 bg-gray-50/50 px-8 py-5 dark:border-dark-700 dark:bg-dark-900/30">
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
@click="handleDismiss"
|
||||
class="rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-2.5 text-sm font-medium text-white shadow-lg shadow-amber-500/30 transition-all hover:shadow-xl hover:scale-105"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{{ t('announcements.markRead') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { marked } from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
import { useAnnouncementStore } from '@/stores/announcements'
|
||||
import { formatRelativeWithDateTime } from '@/utils/format'
|
||||
|
||||
const { t } = useI18n()
|
||||
const announcementStore = useAnnouncementStore()
|
||||
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
})
|
||||
|
||||
const renderedContent = computed(() => {
|
||||
const content = announcementStore.currentPopup?.content
|
||||
if (!content) return ''
|
||||
const html = marked.parse(content) as string
|
||||
return DOMPurify.sanitize(html)
|
||||
})
|
||||
|
||||
function handleDismiss() {
|
||||
announcementStore.dismissPopup()
|
||||
}
|
||||
|
||||
// Manage body overflow — only set, never unset (bell component handles restore)
|
||||
watch(
|
||||
() => announcementStore.currentPopup,
|
||||
(popup) => {
|
||||
if (popup) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.popup-fade-enter-active {
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.popup-fade-leave-active {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.popup-fade-enter-from,
|
||||
.popup-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.popup-fade-enter-from > div {
|
||||
transform: scale(0.94) translateY(-12px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.popup-fade-leave-to > div {
|
||||
transform: scale(0.96) translateY(-8px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
.overflow-y-auto::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom, #cbd5e1, #94a3b8);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark .overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom, #4b5563, #374151);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
<div
|
||||
v-if="show"
|
||||
class="modal-overlay"
|
||||
:style="zIndexStyle"
|
||||
:aria-labelledby="dialogId"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@click.self="handleClose"
|
||||
>
|
||||
<!-- Modal panel -->
|
||||
<div ref="dialogRef" :class="['modal-content', widthClasses]" @click.stop>
|
||||
<!-- Header -->
|
||||
<div class="modal-header">
|
||||
<h3 :id="dialogId" class="modal-title">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<button
|
||||
@click="emit('close')"
|
||||
class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<Icon name="x" size="md" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="modal-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div v-if="$slots.footer" class="modal-footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, watch, onMounted, onUnmounted, ref, nextTick } from 'vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
// 生成唯一ID以避免多个对话框时ID冲突
|
||||
let dialogIdCounter = 0
|
||||
const dialogId = `modal-title-${++dialogIdCounter}`
|
||||
|
||||
// 焦点管理
|
||||
const dialogRef = ref<HTMLElement | null>(null)
|
||||
let previousActiveElement: HTMLElement | null = null
|
||||
|
||||
type DialogWidth = 'narrow' | 'normal' | 'wide' | 'extra-wide' | 'full'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
title: string
|
||||
width?: DialogWidth
|
||||
closeOnEscape?: boolean
|
||||
closeOnClickOutside?: boolean
|
||||
zIndex?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: 'normal',
|
||||
closeOnEscape: true,
|
||||
closeOnClickOutside: false,
|
||||
zIndex: 50
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Custom z-index style (overrides the default z-50 from CSS)
|
||||
const zIndexStyle = computed(() => {
|
||||
return props.zIndex !== 50 ? { zIndex: props.zIndex } : undefined
|
||||
})
|
||||
|
||||
const widthClasses = computed(() => {
|
||||
// Width guidance: narrow=confirm/short prompts, normal=standard forms,
|
||||
// wide=multi-section forms or rich content, extra-wide=analytics/tables,
|
||||
// full=full-screen or very dense layouts.
|
||||
const widths: Record<DialogWidth, string> = {
|
||||
narrow: 'max-w-md',
|
||||
normal: 'max-w-lg',
|
||||
wide: 'w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl',
|
||||
'extra-wide': 'w-full sm:max-w-3xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl',
|
||||
full: 'w-full sm:max-w-4xl md:max-w-5xl lg:max-w-6xl xl:max-w-7xl'
|
||||
}
|
||||
return widths[props.width]
|
||||
})
|
||||
|
||||
const handleClose = () => {
|
||||
if (props.closeOnClickOutside) {
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (props.show && props.closeOnEscape && event.key === 'Escape') {
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent body scroll when modal is open and manage focus
|
||||
watch(
|
||||
() => props.show,
|
||||
async (isOpen) => {
|
||||
if (isOpen) {
|
||||
// 保存当前焦点元素
|
||||
previousActiveElement = document.activeElement as HTMLElement
|
||||
// 使用CSS类而不是直接操作style,更易于管理多个对话框
|
||||
document.body.classList.add('modal-open')
|
||||
|
||||
// 等待DOM更新后设置焦点到对话框
|
||||
await nextTick()
|
||||
if (dialogRef.value) {
|
||||
const firstFocusable = dialogRef.value.querySelector<HTMLElement>(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
)
|
||||
firstFocusable?.focus()
|
||||
}
|
||||
} else {
|
||||
document.body.classList.remove('modal-open')
|
||||
// 恢复之前的焦点
|
||||
if (previousActiveElement && typeof previousActiveElement.focus === 'function') {
|
||||
previousActiveElement.focus()
|
||||
}
|
||||
previousActiveElement = null
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
// 确保组件卸载时移除滚动锁定
|
||||
document.body.classList.remove('modal-open')
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="title" width="narrow" @close="handleCancel">
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">{{ message }}</p>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button
|
||||
@click="handleCancel"
|
||||
type="button"
|
||||
class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200 dark:hover:bg-dark-600 dark:focus:ring-offset-dark-800"
|
||||
>
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
<button
|
||||
@click="handleConfirm"
|
||||
type="button"
|
||||
:class="[
|
||||
'rounded-md px-4 py-2 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-dark-800',
|
||||
danger
|
||||
? 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
|
||||
: 'bg-primary-600 hover:bg-primary-700 focus:ring-primary-500'
|
||||
]"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from './BaseDialog.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
title: string
|
||||
message: string
|
||||
confirmText?: string
|
||||
cancelText?: string
|
||||
danger?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'confirm'): void
|
||||
(e: 'cancel'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
danger: false
|
||||
})
|
||||
|
||||
const confirmText = computed(() => props.confirmText || t('common.confirm'))
|
||||
const cancelText = computed(() => props.cancelText || t('common.cancel'))
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const handleConfirm = () => {
|
||||
emit('confirm')
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,737 @@
|
||||
<template>
|
||||
<div class="md:hidden space-y-3">
|
||||
<template v-if="loading">
|
||||
<div v-for="i in 5" :key="i" class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900">
|
||||
<div class="space-y-3">
|
||||
<div v-for="column in dataColumns" :key="column.key" class="flex justify-between">
|
||||
<div class="h-4 w-20 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
|
||||
<div class="h-4 w-32 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
|
||||
</div>
|
||||
<div v-if="hasActionsColumn" class="border-t border-gray-200 pt-3 dark:border-dark-700">
|
||||
<div class="h-8 w-full animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="!data || data.length === 0">
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-12 text-center dark:border-dark-700 dark:bg-dark-900">
|
||||
<slot name="empty">
|
||||
<div class="flex flex-col items-center">
|
||||
<Icon
|
||||
name="inbox"
|
||||
size="xl"
|
||||
class="mb-4 h-12 w-12 text-gray-400 dark:text-dark-500"
|
||||
/>
|
||||
<p class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ t('empty.noData') }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(row, index) in sortedData"
|
||||
:key="resolveRowKey(row, index)"
|
||||
class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="column in dataColumns"
|
||||
:key="column.key"
|
||||
class="flex items-start justify-between gap-4"
|
||||
>
|
||||
<span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400">
|
||||
{{ column.label }}
|
||||
</span>
|
||||
<div class="text-right text-sm text-gray-900 dark:text-gray-100">
|
||||
<slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]" :expanded="actionsExpanded">
|
||||
{{ column.formatter ? column.formatter(row[column.key], row) : row[column.key] }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasActionsColumn" class="border-t border-gray-200 pt-3 dark:border-dark-700">
|
||||
<slot name="cell-actions" :row="row" :value="row['actions']" :expanded="actionsExpanded"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="tableWrapperRef"
|
||||
class="table-wrapper hidden md:block"
|
||||
:class="{
|
||||
'actions-expanded': actionsExpanded,
|
||||
'is-scrollable': isScrollable
|
||||
}"
|
||||
>
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
|
||||
<thead class="table-header bg-gray-50 dark:bg-dark-800">
|
||||
<tr>
|
||||
<th
|
||||
v-for="(column, index) in columns"
|
||||
:key="column.key"
|
||||
scope="col"
|
||||
:class="[
|
||||
'sticky-header-cell py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400',
|
||||
getAdaptivePaddingClass(),
|
||||
{ 'cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-700': column.sortable },
|
||||
getStickyColumnClass(column, index)
|
||||
]"
|
||||
@click="column.sortable && handleSort(column.key)"
|
||||
>
|
||||
<slot
|
||||
:name="`header-${column.key}`"
|
||||
:column="column"
|
||||
:sort-key="sortKey"
|
||||
:sort-order="sortOrder"
|
||||
>
|
||||
<div class="flex items-center space-x-1">
|
||||
<span>{{ column.label }}</span>
|
||||
<span v-if="column.sortable" class="text-gray-400 dark:text-dark-500">
|
||||
<svg
|
||||
v-if="sortKey === column.key"
|
||||
class="h-4 w-4"
|
||||
:class="{ 'rotate-180 transform': sortOrder === 'desc' }"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</slot>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-body divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-900">
|
||||
<!-- Loading skeleton -->
|
||||
<tr v-if="loading" v-for="i in 5" :key="i">
|
||||
<td v-for="column in columns" :key="column.key" :class="['whitespace-nowrap py-4', getAdaptivePaddingClass()]">
|
||||
<div class="animate-pulse">
|
||||
<div class="h-4 w-3/4 rounded bg-gray-200 dark:bg-dark-700"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Empty state -->
|
||||
<tr v-else-if="!data || data.length === 0">
|
||||
<td
|
||||
:colspan="columns.length"
|
||||
:class="['py-12 text-center text-gray-500 dark:text-dark-400', getAdaptivePaddingClass()]"
|
||||
>
|
||||
<slot name="empty">
|
||||
<div class="flex flex-col items-center">
|
||||
<Icon
|
||||
name="inbox"
|
||||
size="xl"
|
||||
class="mb-4 h-12 w-12 text-gray-400 dark:text-dark-500"
|
||||
/>
|
||||
<p class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ t('empty.noData') }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Data rows -->
|
||||
<tr
|
||||
v-else
|
||||
v-for="(row, index) in sortedData"
|
||||
:key="resolveRowKey(row, index)"
|
||||
:data-row-id="resolveRowKey(row, index)"
|
||||
class="hover:bg-gray-50 dark:hover:bg-dark-800"
|
||||
>
|
||||
<td
|
||||
v-for="(column, colIndex) in columns"
|
||||
:key="column.key"
|
||||
:class="[
|
||||
'whitespace-nowrap py-4 text-sm text-gray-900 dark:text-gray-100',
|
||||
getAdaptivePaddingClass(),
|
||||
getStickyColumnClass(column, colIndex)
|
||||
]"
|
||||
>
|
||||
<slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]" :expanded="actionsExpanded">
|
||||
{{ column.formatter ? column.formatter(row[column.key], row) : row[column.key] }}
|
||||
</slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Column } from './types'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits<{
|
||||
sort: [key: string, order: 'asc' | 'desc']
|
||||
}>()
|
||||
|
||||
// 表格容器引用
|
||||
const tableWrapperRef = ref<HTMLElement | null>(null)
|
||||
const isScrollable = ref(false)
|
||||
const actionsColumnNeedsExpanding = ref(false)
|
||||
|
||||
// 检查是否可滚动
|
||||
const checkScrollable = () => {
|
||||
if (tableWrapperRef.value) {
|
||||
isScrollable.value = tableWrapperRef.value.scrollWidth > tableWrapperRef.value.clientWidth
|
||||
}
|
||||
}
|
||||
|
||||
// 检查操作列是否需要展开
|
||||
const checkActionsColumnWidth = () => {
|
||||
if (!tableWrapperRef.value) return
|
||||
|
||||
// 查找第一行的操作列单元格
|
||||
const firstActionCell = tableWrapperRef.value.querySelector('tbody tr:first-child td:last-child')
|
||||
if (!firstActionCell) return
|
||||
|
||||
// 查找操作列内容的容器div
|
||||
const actionsContainer = firstActionCell.querySelector('div')
|
||||
if (!actionsContainer) return
|
||||
|
||||
// 临时展开以测量完整宽度
|
||||
const wasExpanded = actionsExpanded.value
|
||||
actionsExpanded.value = true
|
||||
|
||||
// 等待DOM更新
|
||||
nextTick(() => {
|
||||
// 测量所有按钮的总宽度
|
||||
const actionItems = actionsContainer.querySelectorAll('button, a, [role="button"]')
|
||||
if (actionItems.length <= 2) {
|
||||
actionsColumnNeedsExpanding.value = false
|
||||
actionsExpanded.value = wasExpanded
|
||||
return
|
||||
}
|
||||
|
||||
// 计算所有按钮的总宽度（包括gap）
|
||||
let totalWidth = 0
|
||||
actionItems.forEach((item, index) => {
|
||||
totalWidth += (item as HTMLElement).offsetWidth
|
||||
if (index < actionItems.length - 1) {
|
||||
totalWidth += 4 // gap-1 = 4px
|
||||
}
|
||||
})
|
||||
|
||||
// 获取单元格可用宽度（减去padding）
|
||||
const cellWidth = (firstActionCell as HTMLElement).clientWidth - 32 // 减去左右padding
|
||||
|
||||
// 如果总宽度超过可用宽度，需要展开功能
|
||||
actionsColumnNeedsExpanding.value = totalWidth > cellWidth
|
||||
|
||||
// 恢复原来的展开状态
|
||||
actionsExpanded.value = wasExpanded
|
||||
})
|
||||
}
|
||||
|
||||
// 监听尺寸变化
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
let resizeHandler: (() => void) | null = null
|
||||
|
||||
onMounted(() => {
|
||||
checkScrollable()
|
||||
checkActionsColumnWidth()
|
||||
if (tableWrapperRef.value && typeof ResizeObserver !== 'undefined') {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
checkScrollable()
|
||||
checkActionsColumnWidth()
|
||||
})
|
||||
resizeObserver.observe(tableWrapperRef.value)
|
||||
} else {
|
||||
// 降级方案：不支持 ResizeObserver 时使用 window resize
|
||||
resizeHandler = () => {
|
||||
checkScrollable()
|
||||
checkActionsColumnWidth()
|
||||
}
|
||||
window.addEventListener('resize', resizeHandler)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
resizeObserver?.disconnect()
|
||||
if (resizeHandler) {
|
||||
window.removeEventListener('resize', resizeHandler)
|
||||
resizeHandler = null
|
||||
}
|
||||
})
|
||||
|
||||
interface Props {
|
||||
columns: Column[]
|
||||
data: any[]
|
||||
loading?: boolean
|
||||
stickyFirstColumn?: boolean
|
||||
stickyActionsColumn?: boolean
|
||||
expandableActions?: boolean
|
||||
actionsCount?: number // 操作按钮总数，用于判断是否需要展开功能
|
||||
rowKey?: string | ((row: any) => string | number)
|
||||
/**
|
||||
* Default sort configuration (only applied when there is no persisted sort state)
|
||||
*/
|
||||
defaultSortKey?: string
|
||||
defaultSortOrder?: 'asc' | 'desc'
|
||||
/**
|
||||
* Persist sort state (key + order) to localStorage using this key.
|
||||
* If provided, DataTable will load the stored sort state on mount.
|
||||
*/
|
||||
sortStorageKey?: string
|
||||
/**
|
||||
* Enable server-side sorting mode. When true, clicking sort headers
|
||||
* will emit 'sort' events instead of performing client-side sorting.
|
||||
*/
|
||||
serverSideSort?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
stickyFirstColumn: true,
|
||||
stickyActionsColumn: true,
|
||||
expandableActions: true,
|
||||
defaultSortOrder: 'asc',
|
||||
serverSideSort: false
|
||||
})
|
||||
|
||||
const sortKey = ref<string>('')
|
||||
const sortOrder = ref<'asc' | 'desc'>('asc')
|
||||
const actionsExpanded = ref(false)
|
||||
|
||||
type PersistedSortState = {
|
||||
key: string
|
||||
order: 'asc' | 'desc'
|
||||
}
|
||||
|
||||
const collator = new Intl.Collator(undefined, {
|
||||
numeric: true,
|
||||
sensitivity: 'base'
|
||||
})
|
||||
|
||||
const getSortableKeys = () => {
|
||||
const keys = new Set<string>()
|
||||
for (const col of props.columns) {
|
||||
if (col.sortable) keys.add(col.key)
|
||||
}
|
||||
return keys
|
||||
}
|
||||
|
||||
const normalizeSortKey = (candidate: string) => {
|
||||
if (!candidate) return ''
|
||||
const sortableKeys = getSortableKeys()
|
||||
return sortableKeys.has(candidate) ? candidate : ''
|
||||
}
|
||||
|
||||
const normalizeSortOrder = (candidate: any): 'asc' | 'desc' => {
|
||||
return candidate === 'desc' ? 'desc' : 'asc'
|
||||
}
|
||||
|
||||
const readPersistedSortState = (): PersistedSortState | null => {
|
||||
if (!props.sortStorageKey) return null
|
||||
try {
|
||||
const raw = localStorage.getItem(props.sortStorageKey)
|
||||
if (!raw) return null
|
||||
const parsed = JSON.parse(raw) as Partial<PersistedSortState>
|
||||
const key = normalizeSortKey(typeof parsed.key === 'string' ? parsed.key : '')
|
||||
if (!key) return null
|
||||
return { key, order: normalizeSortOrder(parsed.order) }
|
||||
} catch (e) {
|
||||
console.error('[DataTable] Failed to read persisted sort state:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const writePersistedSortState = (state: PersistedSortState) => {
|
||||
if (!props.sortStorageKey) return
|
||||
try {
|
||||
localStorage.setItem(props.sortStorageKey, JSON.stringify(state))
|
||||
} catch (e) {
|
||||
console.error('[DataTable] Failed to persist sort state:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const resolveInitialSortState = (): PersistedSortState | null => {
|
||||
const persisted = readPersistedSortState()
|
||||
if (persisted) return persisted
|
||||
|
||||
const key = normalizeSortKey(props.defaultSortKey || '')
|
||||
if (!key) return null
|
||||
return { key, order: normalizeSortOrder(props.defaultSortOrder) }
|
||||
}
|
||||
|
||||
const applySortState = (state: PersistedSortState | null) => {
|
||||
if (!state) return
|
||||
sortKey.value = state.key
|
||||
sortOrder.value = state.order
|
||||
}
|
||||
|
||||
const isNullishOrEmpty = (value: any) => value === null || value === undefined || value === ''
|
||||
|
||||
const toFiniteNumberOrNull = (value: any): number | null => {
|
||||
if (typeof value === 'number') return Number.isFinite(value) ? value : null
|
||||
if (typeof value === 'boolean') return value ? 1 : 0
|
||||
if (typeof value === 'string') {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return null
|
||||
const n = Number(trimmed)
|
||||
return Number.isFinite(n) ? n : null
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const toSortableString = (value: any): string => {
|
||||
if (value === null || value === undefined) return ''
|
||||
if (typeof value === 'string') return value
|
||||
if (typeof value === 'number' || typeof value === 'boolean') return String(value)
|
||||
if (value instanceof Date) return value.toISOString()
|
||||
try {
|
||||
return JSON.stringify(value)
|
||||
} catch {
|
||||
return String(value)
|
||||
}
|
||||
}
|
||||
|
||||
const compareSortValues = (a: any, b: any): number => {
|
||||
const aEmpty = isNullishOrEmpty(a)
|
||||
const bEmpty = isNullishOrEmpty(b)
|
||||
if (aEmpty && bEmpty) return 0
|
||||
if (aEmpty) return 1
|
||||
if (bEmpty) return -1
|
||||
|
||||
const aNum = toFiniteNumberOrNull(a)
|
||||
const bNum = toFiniteNumberOrNull(b)
|
||||
if (aNum !== null && bNum !== null) {
|
||||
if (aNum === bNum) return 0
|
||||
return aNum < bNum ? -1 : 1
|
||||
}
|
||||
|
||||
const aStr = toSortableString(a)
|
||||
const bStr = toSortableString(b)
|
||||
const res = collator.compare(aStr, bStr)
|
||||
if (res === 0) return 0
|
||||
return res < 0 ? -1 : 1
|
||||
}
|
||||
const resolveRowKey = (row: any, index: number) => {
|
||||
if (typeof props.rowKey === 'function') {
|
||||
const key = props.rowKey(row)
|
||||
return key ?? index
|
||||
}
|
||||
if (typeof props.rowKey === 'string' && props.rowKey) {
|
||||
const key = row?.[props.rowKey]
|
||||
return key ?? index
|
||||
}
|
||||
const key = row?.id
|
||||
return key ?? index
|
||||
}
|
||||
|
||||
const dataColumns = computed(() => props.columns.filter((column) => column.key !== 'actions'))
|
||||
const columnsSignature = computed(() =>
|
||||
props.columns.map((column) => `${column.key}:${column.sortable ? '1' : '0'}`).join('|')
|
||||
)
|
||||
|
||||
// 数据/列变化时重新检查滚动状态
|
||||
// 注意：不能监听 actionsExpanded，因为 checkActionsColumnWidth 会临时修改它，会导致无限循环
|
||||
watch(
|
||||
[() => props.data.length, columnsSignature],
|
||||
async () => {
|
||||
await nextTick()
|
||||
checkScrollable()
|
||||
checkActionsColumnWidth()
|
||||
},
|
||||
{ flush: 'post' }
|
||||
)
|
||||
|
||||
// 单独监听展开状态变化，只更新滚动状态
|
||||
watch(actionsExpanded, async () => {
|
||||
await nextTick()
|
||||
checkScrollable()
|
||||
})
|
||||
|
||||
const handleSort = (key: string) => {
|
||||
let newOrder: 'asc' | 'desc' = 'asc'
|
||||
if (sortKey.value === key) {
|
||||
newOrder = sortOrder.value === 'asc' ? 'desc' : 'asc'
|
||||
}
|
||||
|
||||
if (props.serverSideSort) {
|
||||
// Server-side sort mode: emit event and update internal state for UI feedback
|
||||
sortKey.value = key
|
||||
sortOrder.value = newOrder
|
||||
emit('sort', key, newOrder)
|
||||
} else {
|
||||
// Client-side sort mode: just update internal state
|
||||
sortKey.value = key
|
||||
sortOrder.value = newOrder
|
||||
}
|
||||
}
|
||||
|
||||
const sortedData = computed(() => {
|
||||
// Server-side sort mode: return data as-is (server handles sorting)
|
||||
if (props.serverSideSort || !sortKey.value || !props.data) return props.data
|
||||
|
||||
const key = sortKey.value
|
||||
const order = sortOrder.value
|
||||
|
||||
// Stable sort (tie-break with original index) to avoid jitter when values are equal.
|
||||
return props.data
|
||||
.map((row, index) => ({ row, index }))
|
||||
.sort((a, b) => {
|
||||
const cmp = compareSortValues(a.row?.[key], b.row?.[key])
|
||||
if (cmp !== 0) return order === 'asc' ? cmp : -cmp
|
||||
return a.index - b.index
|
||||
})
|
||||
.map(item => item.row)
|
||||
})
|
||||
|
||||
const hasActionsColumn = computed(() => {
|
||||
return props.columns.some(column => column.key === 'actions')
|
||||
})
|
||||
|
||||
const hasSelectColumn = computed(() => {
|
||||
return props.columns.length > 0 && props.columns[0].key === 'select'
|
||||
})
|
||||
|
||||
// 生成固定列的 CSS 类
|
||||
const getStickyColumnClass = (column: Column, index: number) => {
|
||||
const classes: string[] = []
|
||||
|
||||
if (props.stickyFirstColumn) {
|
||||
// 如果第一列是勾选列，固定前两列（勾选+名称）
|
||||
if (hasSelectColumn.value) {
|
||||
if (index === 0) {
|
||||
classes.push('sticky-col sticky-col-left-first')
|
||||
} else if (index === 1) {
|
||||
classes.push('sticky-col sticky-col-left-second')
|
||||
}
|
||||
} else {
|
||||
// 否则只固定第一列
|
||||
if (index === 0) {
|
||||
classes.push('sticky-col sticky-col-left')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 操作列固定（最后一列）
|
||||
if (props.stickyActionsColumn && column.key === 'actions') {
|
||||
classes.push('sticky-col sticky-col-right')
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
// 根据列数自适应调整内边距
|
||||
const getAdaptivePaddingClass = () => {
|
||||
const columnCount = props.columns.length
|
||||
|
||||
// 列数越多，内边距越小
|
||||
if (columnCount >= 10) {
|
||||
return 'px-2' // 8px
|
||||
} else if (columnCount >= 7) {
|
||||
return 'px-3' // 12px
|
||||
} else if (columnCount >= 5) {
|
||||
return 'px-4' // 16px
|
||||
} else {
|
||||
return 'px-6' // 24px (原始值)
|
||||
}
|
||||
}
|
||||
|
||||
// Init + keep persisted sort state consistent with current columns
|
||||
const didInitSort = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
const initial = resolveInitialSortState()
|
||||
applySortState(initial)
|
||||
didInitSort.value = true
|
||||
})
|
||||
|
||||
watch(
|
||||
columnsSignature,
|
||||
() => {
|
||||
// If current sort key is no longer sortable/visible, fall back to default/persisted.
|
||||
const normalized = normalizeSortKey(sortKey.value)
|
||||
if (!sortKey.value) {
|
||||
const initial = resolveInitialSortState()
|
||||
applySortState(initial)
|
||||
return
|
||||
}
|
||||
|
||||
if (!normalized) {
|
||||
const fallback = resolveInitialSortState()
|
||||
if (fallback) {
|
||||
applySortState(fallback)
|
||||
} else {
|
||||
sortKey.value = ''
|
||||
sortOrder.value = 'asc'
|
||||
}
|
||||
}
|
||||
},
|
||||
{ flush: 'post' }
|
||||
)
|
||||
|
||||
watch(
|
||||
[sortKey, sortOrder],
|
||||
([nextKey, nextOrder]) => {
|
||||
if (!didInitSort.value) return
|
||||
if (!props.sortStorageKey) return
|
||||
const key = normalizeSortKey(nextKey)
|
||||
if (!key) return
|
||||
writePersistedSortState({ key, order: normalizeSortOrder(nextOrder) })
|
||||
},
|
||||
{ flush: 'post' }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 表格横向滚动 */
|
||||
.table-wrapper {
|
||||
--select-col-width: 52px; /* 勾选列宽度：px-6 (24px*2) + checkbox (16px) */
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* 表头容器，确保在滚动时覆盖表体内容 */
|
||||
.table-wrapper .table-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 200;
|
||||
background-color: rgb(249 250 251);
|
||||
}
|
||||
|
||||
.dark .table-wrapper .table-header {
|
||||
background-color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
/* 表体保持在表头下方 */
|
||||
.table-body {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 所有表头单元格固定在顶部 */
|
||||
.sticky-header-cell {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 210; /* 必须高于所有表体内容 */
|
||||
background-color: rgb(249 250 251);
|
||||
}
|
||||
|
||||
.dark .sticky-header-cell {
|
||||
background-color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
/* Sticky 列基础样式 */
|
||||
.sticky-col {
|
||||
position: sticky;
|
||||
z-index: 20; /* 表体固定列 */
|
||||
}
|
||||
|
||||
/* 单列固定（无勾选列时） */
|
||||
.sticky-col-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 双列固定（有勾选列时）：第一列（勾选） */
|
||||
.sticky-col-left-first {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 双列固定（有勾选列时）：第二列（名称） */
|
||||
.sticky-col-left-second {
|
||||
left: var(--select-col-width);
|
||||
}
|
||||
|
||||
/* 操作列固定 */
|
||||
.sticky-col-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* 表头 sticky 列 - 需要比普通表头单元格更高的 z-index */
|
||||
.sticky-header-cell.sticky-col {
|
||||
z-index: 220; /* 高于普通表头单元格和表体固定列 */
|
||||
}
|
||||
|
||||
/* 表体 sticky 列背景 */
|
||||
tbody .sticky-col {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.dark tbody .sticky-col {
|
||||
background-color: rgb(17 24 39);
|
||||
}
|
||||
|
||||
/* hover 状态保持 */
|
||||
tbody tr:hover .sticky-col {
|
||||
background-color: rgb(249 250 251);
|
||||
}
|
||||
|
||||
.dark tbody tr:hover .sticky-col {
|
||||
background-color: rgb(31 41 55);
|
||||
}
|
||||
|
||||
/* 阴影只在可滚动时显示 */
|
||||
/* 单列固定右侧阴影 */
|
||||
.is-scrollable .sticky-col-left::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 10px;
|
||||
transform: translateX(100%);
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 双列固定：只在第二列显示阴影 */
|
||||
.is-scrollable .sticky-col-left-second::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 10px;
|
||||
transform: translateX(100%);
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 操作列左侧阴影 */
|
||||
.is-scrollable .sticky-col-right::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 10px;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 暗色模式阴影 */
|
||||
.dark .is-scrollable .sticky-col-left::after,
|
||||
.dark .is-scrollable .sticky-col-left-second::after {
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
|
||||
}
|
||||
|
||||
.dark .is-scrollable .sticky-col-right::before {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<div class="relative" ref="containerRef">
|
||||
<button
|
||||
type="button"
|
||||
@click="toggle"
|
||||
:class="['date-picker-trigger', isOpen && 'date-picker-trigger-open']"
|
||||
>
|
||||
<span class="date-picker-icon">
|
||||
<Icon name="calendar" size="sm" />
|
||||
</span>
|
||||
<span class="date-picker-value">
|
||||
{{ displayValue }}
|
||||
</span>
|
||||
<span class="date-picker-chevron">
|
||||
<Icon
|
||||
name="chevronDown"
|
||||
size="sm"
|
||||
:class="['transition-transform duration-200', isOpen && 'rotate-180']"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<Transition name="date-picker-dropdown">
|
||||
<div v-if="isOpen" class="date-picker-dropdown">
|
||||
<!-- Quick presets -->
|
||||
<div class="date-picker-presets">
|
||||
<button
|
||||
v-for="preset in presets"
|
||||
:key="preset.value"
|
||||
@click="selectPreset(preset)"
|
||||
:class="['date-picker-preset', isPresetActive(preset) && 'date-picker-preset-active']"
|
||||
>
|
||||
{{ t(preset.labelKey) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="date-picker-divider"></div>
|
||||
|
||||
<!-- Custom date range inputs -->
|
||||
<div class="date-picker-custom">
|
||||
<div class="date-picker-field">
|
||||
<label class="date-picker-label">{{ t('dates.startDate') }}</label>
|
||||
<input
|
||||
type="date"
|
||||
v-model="localStartDate"
|
||||
:max="localEndDate || tomorrow"
|
||||
class="date-picker-input"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="date-picker-separator">
|
||||
<Icon name="arrowRight" size="sm" class="text-gray-400" />
|
||||
</div>
|
||||
<div class="date-picker-field">
|
||||
<label class="date-picker-label">{{ t('dates.endDate') }}</label>
|
||||
<input
|
||||
type="date"
|
||||
v-model="localEndDate"
|
||||
:min="localStartDate"
|
||||
:max="tomorrow"
|
||||
class="date-picker-input"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Apply button -->
|
||||
<div class="date-picker-actions">
|
||||
<button @click="apply" class="date-picker-apply">
|
||||
{{ t('dates.apply') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
interface DatePreset {
|
||||
labelKey: string
|
||||
value: string
|
||||
getRange: () => { start: string; end: string }
|
||||
}
|
||||
|
||||
interface Props {
|
||||
startDate: string
|
||||
endDate: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:startDate', value: string): void
|
||||
(e: 'update:endDate', value: string): void
|
||||
(e: 'change', range: { startDate: string; endDate: string; preset: string | null }): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const localStartDate = ref(props.startDate)
|
||||
const localEndDate = ref(props.endDate)
|
||||
const activePreset = ref<string | null>('7days')
|
||||
|
||||
const today = computed(() => {
|
||||
// Use local timezone to avoid UTC timezone issues
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
})
|
||||
|
||||
// Tomorrow's date - used for max date to handle timezone differences
|
||||
// When user is in a timezone behind the server, "today" on server might be "tomorrow" locally
|
||||
const tomorrow = computed(() => {
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() + 1)
|
||||
return formatDateToString(d)
|
||||
})
|
||||
|
||||
// Helper function to format date to YYYY-MM-DD using local timezone
|
||||
const formatDateToString = (date: Date): string => {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
const presets: DatePreset[] = [
|
||||
{
|
||||
labelKey: 'dates.today',
|
||||
value: 'today',
|
||||
getRange: () => {
|
||||
const t = today.value
|
||||
return { start: t, end: t }
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'dates.yesterday',
|
||||
value: 'yesterday',
|
||||
getRange: () => {
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() - 1)
|
||||
const yesterday = formatDateToString(d)
|
||||
return { start: yesterday, end: yesterday }
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'dates.last7Days',
|
||||
value: '7days',
|
||||
getRange: () => {
|
||||
const end = today.value
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() - 6)
|
||||
const start = formatDateToString(d)
|
||||
return { start, end }
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'dates.last14Days',
|
||||
value: '14days',
|
||||
getRange: () => {
|
||||
const end = today.value
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() - 13)
|
||||
const start = formatDateToString(d)
|
||||
return { start, end }
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'dates.last30Days',
|
||||
value: '30days',
|
||||
getRange: () => {
|
||||
const end = today.value
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() - 29)
|
||||
const start = formatDateToString(d)
|
||||
return { start, end }
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'dates.thisMonth',
|
||||
value: 'thisMonth',
|
||||
getRange: () => {
|
||||
const now = new Date()
|
||||
const start = formatDateToString(new Date(now.getFullYear(), now.getMonth(), 1))
|
||||
return { start, end: today.value }
|
||||
}
|
||||
},
|
||||
{
|
||||
labelKey: 'dates.lastMonth',
|
||||
value: 'lastMonth',
|
||||
getRange: () => {
|
||||
const now = new Date()
|
||||
const start = formatDateToString(new Date(now.getFullYear(), now.getMonth() - 1, 1))
|
||||
const end = formatDateToString(new Date(now.getFullYear(), now.getMonth(), 0))
|
||||
return { start, end }
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const displayValue = computed(() => {
|
||||
if (activePreset.value) {
|
||||
const preset = presets.find((p) => p.value === activePreset.value)
|
||||
if (preset) return t(preset.labelKey)
|
||||
}
|
||||
|
||||
if (localStartDate.value && localEndDate.value) {
|
||||
if (localStartDate.value === localEndDate.value) {
|
||||
return formatDate(localStartDate.value)
|
||||
}
|
||||
return `${formatDate(localStartDate.value)} - ${formatDate(localEndDate.value)}`
|
||||
}
|
||||
|
||||
return t('dates.selectDateRange')
|
||||
})
|
||||
|
||||
const formatDate = (dateStr: string): string => {
|
||||
const date = new Date(dateStr + 'T00:00:00')
|
||||
const dateLocale = locale.value === 'zh' ? 'zh-CN' : 'en-US'
|
||||
return date.toLocaleDateString(dateLocale, { month: 'short', day: 'numeric' })
|
||||
}
|
||||
|
||||
const isPresetActive = (preset: DatePreset): boolean => {
|
||||
return activePreset.value === preset.value
|
||||
}
|
||||
|
||||
const selectPreset = (preset: DatePreset) => {
|
||||
const range = preset.getRange()
|
||||
localStartDate.value = range.start
|
||||
localEndDate.value = range.end
|
||||
activePreset.value = preset.value
|
||||
}
|
||||
|
||||
const onDateChange = () => {
|
||||
// Check if current dates match any preset
|
||||
activePreset.value = null
|
||||
for (const preset of presets) {
|
||||
const range = preset.getRange()
|
||||
if (range.start === localStartDate.value && range.end === localEndDate.value) {
|
||||
activePreset.value = preset.value
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const toggle = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const apply = () => {
|
||||
emit('update:startDate', localStartDate.value)
|
||||
emit('update:endDate', localEndDate.value)
|
||||
emit('change', {
|
||||
startDate: localStartDate.value,
|
||||
endDate: localEndDate.value,
|
||||
preset: activePreset.value
|
||||
})
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen.value) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Sync local state with props
|
||||
watch(
|
||||
() => props.startDate,
|
||||
(val) => {
|
||||
localStartDate.value = val
|
||||
onDateChange()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.endDate,
|
||||
(val) => {
|
||||
localEndDate.value = val
|
||||
onDateChange()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
// Initialize active preset detection
|
||||
onDateChange()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.date-picker-trigger {
|
||||
@apply flex items-center gap-2;
|
||||
@apply rounded-lg px-3 py-2 text-sm;
|
||||
@apply bg-white dark:bg-dark-800;
|
||||
@apply border border-gray-200 dark:border-dark-600;
|
||||
@apply text-gray-700 dark:text-gray-300;
|
||||
@apply transition-all duration-200;
|
||||
@apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30;
|
||||
@apply hover:border-gray-300 dark:hover:border-dark-500;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.date-picker-trigger-open {
|
||||
@apply border-primary-500 ring-2 ring-primary-500/30;
|
||||
}
|
||||
|
||||
.date-picker-icon {
|
||||
@apply text-gray-400 dark:text-dark-400;
|
||||
}
|
||||
|
||||
.date-picker-value {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
.date-picker-chevron {
|
||||
@apply text-gray-400 dark:text-dark-400;
|
||||
}
|
||||
|
||||
.date-picker-dropdown {
|
||||
@apply absolute left-0 z-[100] mt-2;
|
||||
@apply bg-white dark:bg-dark-800;
|
||||
@apply rounded-xl;
|
||||
@apply border border-gray-200 dark:border-dark-700;
|
||||
@apply shadow-lg shadow-black/10 dark:shadow-black/30;
|
||||
@apply overflow-hidden;
|
||||
@apply min-w-[320px];
|
||||
}
|
||||
|
||||
.date-picker-presets {
|
||||
@apply grid grid-cols-2 gap-1 p-2;
|
||||
}
|
||||
|
||||
.date-picker-preset {
|
||||
@apply rounded-md px-3 py-1.5 text-xs font-medium;
|
||||
@apply text-gray-600 dark:text-gray-400;
|
||||
@apply hover:bg-gray-100 dark:hover:bg-dark-700;
|
||||
@apply transition-colors duration-150;
|
||||
}
|
||||
|
||||
.date-picker-preset-active {
|
||||
@apply bg-primary-100 dark:bg-primary-900/30;
|
||||
@apply text-primary-700 dark:text-primary-300;
|
||||
}
|
||||
|
||||
.date-picker-divider {
|
||||
@apply border-t border-gray-100 dark:border-dark-700;
|
||||
}
|
||||
|
||||
.date-picker-custom {
|
||||
@apply flex items-end gap-2 p-3;
|
||||
}
|
||||
|
||||
.date-picker-field {
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
.date-picker-label {
|
||||
@apply mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.date-picker-input {
|
||||
@apply w-full rounded-md px-2 py-1.5 text-sm;
|
||||
@apply bg-gray-50 dark:bg-dark-700;
|
||||
@apply border border-gray-200 dark:border-dark-600;
|
||||
@apply text-gray-900 dark:text-gray-100;
|
||||
@apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30;
|
||||
}
|
||||
|
||||
.date-picker-input::-webkit-calendar-picker-indicator {
|
||||
@apply cursor-pointer opacity-60 hover:opacity-100;
|
||||
filter: invert(0.5);
|
||||
}
|
||||
|
||||
.dark .date-picker-input::-webkit-calendar-picker-indicator {
|
||||
filter: invert(0.7);
|
||||
}
|
||||
|
||||
.date-picker-separator {
|
||||
@apply flex items-center justify-center pb-1;
|
||||
}
|
||||
|
||||
.date-picker-actions {
|
||||
@apply flex justify-end p-2 pt-0;
|
||||
}
|
||||
|
||||
.date-picker-apply {
|
||||
@apply rounded-lg px-4 py-1.5 text-sm font-medium;
|
||||
@apply bg-primary-600 text-white;
|
||||
@apply hover:bg-primary-700;
|
||||
@apply transition-colors duration-150;
|
||||
}
|
||||
|
||||
/* Dropdown animation */
|
||||
.date-picker-dropdown-enter-active,
|
||||
.date-picker-dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.date-picker-dropdown-enter-from,
|
||||
.date-picker-dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="empty-state">
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="mb-5 flex h-20 w-20 items-center justify-center rounded-2xl bg-gray-100 dark:bg-dark-800"
|
||||
>
|
||||
<slot name="icon">
|
||||
<component v-if="icon" :is="icon" class="empty-state-icon h-10 w-10" aria-hidden="true" />
|
||||
<svg
|
||||
v-else
|
||||
class="empty-state-icon h-10 w-10"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="empty-state-title">
|
||||
{{ displayTitle }}
|
||||
</h3>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="empty-state-description">
|
||||
{{ description }}
|
||||
</p>
|
||||
|
||||
<!-- Action -->
|
||||
<div v-if="actionText || $slots.action" class="mt-6">
|
||||
<slot name="action">
|
||||
<component
|
||||
:is="actionTo ? 'RouterLink' : 'button'"
|
||||
v-if="actionText"
|
||||
:to="actionTo"
|
||||
@click="!actionTo && $emit('action')"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<Icon v-if="actionIcon" name="plus" size="md" class="mr-2" />
|
||||
{{ actionText }}
|
||||
</component>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Component } from 'vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
icon?: Component | string
|
||||
title?: string
|
||||
description?: string
|
||||
actionText?: string
|
||||
actionTo?: string | object
|
||||
actionIcon?: boolean
|
||||
message?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
description: '',
|
||||
actionIcon: true
|
||||
})
|
||||
|
||||
const displayTitle = computed(() => props.title || t('common.noData'))
|
||||
|
||||
defineEmits(['action'])
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<BaseDialog :show="show" :title="t('usage.exporting')" width="narrow" @close="handleCancel">
|
||||
<div class="space-y-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ t('usage.exportingProgress') }}
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm text-gray-700 dark:text-gray-300">
|
||||
<span>{{ t('usage.exportedCount', { current, total }) }}</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">{{ normalizedProgress }}%</span>
|
||||
</div>
|
||||
<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-dark-700">
|
||||
<div
|
||||
role="progressbar"
|
||||
:aria-valuenow="normalizedProgress"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
:aria-label="`${t('usage.exportingProgress')}: ${normalizedProgress}%`"
|
||||
class="h-2 rounded-full bg-primary-600 transition-all"
|
||||
:style="{ width: `${normalizedProgress}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<div v-if="estimatedTime" class="text-xs text-gray-500 dark:text-gray-400" aria-live="polite" aria-atomic="true">
|
||||
{{ t('usage.estimatedTime', { time: estimatedTime }) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<button
|
||||
@click="handleCancel"
|
||||
type="button"
|
||||
class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200 dark:hover:bg-dark-600 dark:focus:ring-offset-dark-800"
|
||||
>
|
||||
{{ t('usage.cancelExport') }}
|
||||
</button>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import BaseDialog from './BaseDialog.vue'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
progress: number
|
||||
current: number
|
||||
total: number
|
||||
estimatedTime: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'cancel'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
const { t } = useI18n()
|
||||
|
||||
const normalizedProgress = computed(() => {
|
||||
const value = Number.isFinite(props.progress) ? props.progress : 0
|
||||
return Math.min(100, Math.max(0, Math.round(value)))
|
||||
})
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition-colors',
|
||||
badgeClass
|
||||
]"
|
||||
>
|
||||
<!-- Platform logo -->
|
||||
<PlatformIcon v-if="platform" :platform="platform" size="sm" />
|
||||
<!-- Group name -->
|
||||
<span class="truncate">{{ name }}</span>
|
||||
<!-- Right side label -->
|
||||
<span v-if="showLabel" :class="labelClass">
|
||||
<template v-if="hasCustomRate">
|
||||
<!-- 原倍率删除线 + 专属倍率高亮 -->
|
||||
<span class="line-through opacity-50 mr-0.5">{{ rateMultiplier }}x</span>
|
||||
<span class="font-bold">{{ userRateMultiplier }}x</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ labelText }}
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { SubscriptionType, GroupPlatform } from '@/types'
|
||||
import PlatformIcon from './PlatformIcon.vue'
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
platform?: GroupPlatform
|
||||
subscriptionType?: SubscriptionType
|
||||
rateMultiplier?: number
|
||||
userRateMultiplier?: number | null // 用户专属倍率
|
||||
showRate?: boolean
|
||||
daysRemaining?: number | null // 剩余天数（订阅类型时使用）
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
subscriptionType: 'standard',
|
||||
showRate: true,
|
||||
daysRemaining: null,
|
||||
userRateMultiplier: null
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const isSubscription = computed(() => props.subscriptionType === 'subscription')
|
||||
|
||||
// 是否有专属倍率（且与默认倍率不同）
|
||||
const hasCustomRate = computed(() => {
|
||||
return (
|
||||
props.userRateMultiplier !== null &&
|
||||
props.userRateMultiplier !== undefined &&
|
||||
props.rateMultiplier !== undefined &&
|
||||
props.userRateMultiplier !== props.rateMultiplier
|
||||
)
|
||||
})
|
||||
|
||||
// 是否显示右侧标签
|
||||
const showLabel = computed(() => {
|
||||
if (!props.showRate) return false
|
||||
// 订阅类型：显示天数或"订阅"
|
||||
if (isSubscription.value) return true
|
||||
// 标准类型：显示倍率（包括专属倍率）
|
||||
return props.rateMultiplier !== undefined || hasCustomRate.value
|
||||
})
|
||||
|
||||
// Label text
|
||||
const labelText = computed(() => {
|
||||
if (isSubscription.value) {
|
||||
// 如果有剩余天数，显示天数
|
||||
if (props.daysRemaining !== null && props.daysRemaining !== undefined) {
|
||||
if (props.daysRemaining <= 0) {
|
||||
return t('admin.users.expired')
|
||||
}
|
||||
return t('admin.users.daysRemaining', { days: props.daysRemaining })
|
||||
}
|
||||
// 否则显示"订阅"
|
||||
return t('groups.subscription')
|
||||
}
|
||||
return props.rateMultiplier !== undefined ? `${props.rateMultiplier}x` : ''
|
||||
})
|
||||
|
||||
// Label style based on type and days remaining
|
||||
const labelClass = computed(() => {
|
||||
const base = 'px-1.5 py-0.5 rounded text-[10px] font-semibold'
|
||||
|
||||
if (!isSubscription.value) {
|
||||
// Standard: subtle background (不再为专属倍率使用不同的背景色)
|
||||
return `${base} bg-black/10 dark:bg-white/10`
|
||||
}
|
||||
|
||||
// 订阅类型：根据剩余天数显示不同颜色
|
||||
if (props.daysRemaining !== null && props.daysRemaining !== undefined) {
|
||||
if (props.daysRemaining <= 0 || props.daysRemaining <= 3) {
|
||||
// 已过期或紧急（<=3天）：红色
|
||||
return `${base} bg-red-200/80 text-red-800 dark:bg-red-800/50 dark:text-red-300`
|
||||
}
|
||||
if (props.daysRemaining <= 7) {
|
||||
// 警告（<=7天）：橙色
|
||||
return `${base} bg-amber-200/80 text-amber-800 dark:bg-amber-800/50 dark:text-amber-300`
|
||||
}
|
||||
}
|
||||
|
||||
// 正常状态或无天数：根据平台显示主题色
|
||||
if (props.platform === 'anthropic') {
|
||||
return `${base} bg-orange-200/60 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300`
|
||||
}
|
||||
if (props.platform === 'openai') {
|
||||
return `${base} bg-emerald-200/60 text-emerald-800 dark:bg-emerald-800/40 dark:text-emerald-300`
|
||||
}
|
||||
if (props.platform === 'gemini') {
|
||||
return `${base} bg-blue-200/60 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300`
|
||||
}
|
||||
if (props.platform === 'sora') {
|
||||
return `${base} bg-rose-200/60 text-rose-800 dark:bg-rose-800/40 dark:text-rose-300`
|
||||
}
|
||||
return `${base} bg-violet-200/60 text-violet-800 dark:bg-violet-800/40 dark:text-violet-300`
|
||||
})
|
||||
|
||||
// Badge color based on platform and subscription type
|
||||
const badgeClass = computed(() => {
|
||||
if (props.platform === 'anthropic') {
|
||||
// Claude: orange theme
|
||||
return isSubscription.value
|
||||
? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
: 'bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400'
|
||||
} else if (props.platform === 'openai') {
|
||||
// OpenAI: green theme
|
||||
return isSubscription.value
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
: 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400'
|
||||
}
|
||||
if (props.platform === 'gemini') {
|
||||
return isSubscription.value
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
: 'bg-sky-50 text-sky-700 dark:bg-sky-900/20 dark:text-sky-400'
|
||||
}
|
||||
if (props.platform === 'sora') {
|
||||
return isSubscription.value
|
||||
? 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400'
|
||||
: 'bg-rose-50 text-rose-700 dark:bg-rose-900/20 dark:text-rose-400'
|
||||
}
|
||||
// Fallback: original colors
|
||||
return isSubscription.value
|
||||
? 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
|
||||
: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="flex min-w-0 flex-1 items-start justify-between gap-3">
|
||||
<!-- Left: name + description -->
|
||||
<div
|
||||
class="flex min-w-0 flex-1 flex-col items-start"
|
||||
:title="description || undefined"
|
||||
>
|
||||
<!-- Row 1: platform badge (name bold) -->
|
||||
<GroupBadge
|
||||
:name="name"
|
||||
:platform="platform"
|
||||
:subscription-type="subscriptionType"
|
||||
:show-rate="false"
|
||||
class="groupOptionItemBadge"
|
||||
/>
|
||||
<!-- Row 2: description with top spacing -->
|
||||
<span
|
||||
v-if="description"
|
||||
class="mt-1.5 w-full text-left text-xs leading-relaxed text-gray-500 dark:text-gray-400 line-clamp-2"
|
||||
>
|
||||
{{ description }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Right: rate pill + checkmark (vertically centered to first row) -->
|
||||
<div class="flex shrink-0 items-center gap-2 pt-0.5">
|
||||
<!-- Rate pill (platform color) -->
|
||||
<span v-if="rateMultiplier !== undefined" :class="['inline-flex items-center whitespace-nowrap rounded-full px-3 py-1 text-xs font-semibold', ratePillClass]">
|
||||
<template v-if="hasCustomRate">
|
||||
<span class="mr-1 line-through opacity-50">{{ rateMultiplier }}x</span>
|
||||
<span class="font-bold">{{ userRateMultiplier }}x</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ rateMultiplier }}x 倍率
|
||||
</template>
|
||||
</span>
|
||||
<!-- Checkmark -->
|
||||
<svg
|
||||
v-if="showCheckmark && selected"
|
||||
class="h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import GroupBadge from './GroupBadge.vue'
|
||||
import type { SubscriptionType, GroupPlatform } from '@/types'
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
platform: GroupPlatform
|
||||
subscriptionType?: SubscriptionType
|
||||
rateMultiplier?: number
|
||||
userRateMultiplier?: number | null
|
||||
description?: string | null
|
||||
selected?: boolean
|
||||
showCheckmark?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
subscriptionType: 'standard',
|
||||
selected: false,
|
||||
showCheckmark: true,
|
||||
userRateMultiplier: null
|
||||
})
|
||||
|
||||
// Whether user has a custom rate different from default
|
||||
const hasCustomRate = computed(() => {
|
||||
return (
|
||||
props.userRateMultiplier !== null &&
|
||||
props.userRateMultiplier !== undefined &&
|
||||
props.rateMultiplier !== undefined &&
|
||||
props.userRateMultiplier !== props.rateMultiplier
|
||||
)
|
||||
})
|
||||
|
||||
// Rate pill color matches platform badge color
|
||||
const ratePillClass = computed(() => {
|
||||
switch (props.platform) {
|
||||
case 'anthropic':
|
||||
return 'bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400'
|
||||
case 'openai':
|
||||
return 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400'
|
||||
case 'gemini':
|
||||
return 'bg-sky-50 text-sky-700 dark:bg-sky-900/20 dark:text-sky-400'
|
||||
case 'sora':
|
||||
return 'bg-rose-50 text-rose-700 dark:bg-rose-900/20 dark:text-rose-400'
|
||||
default: // antigravity and others
|
||||
return 'bg-violet-50 text-violet-700 dark:bg-violet-900/20 dark:text-violet-400'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Bold the group name inside GroupBadge when used in dropdown option */
|
||||
.groupOptionItemBadge :deep(span.truncate) {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<label class="input-label">
|
||||
{{ t('admin.users.groups') }}
|
||||
<span class="font-normal text-gray-400">{{ t('common.selectedCount', { count: modelValue.length }) }}</span>
|
||||
</label>
|
||||
<div
|
||||
class="grid max-h-32 grid-cols-2 gap-1 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-2 dark:border-dark-600 dark:bg-dark-800"
|
||||
>
|
||||
<label
|
||||
v-for="group in filteredGroups"
|
||||
:key="group.id"
|
||||
class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-white dark:hover:bg-dark-700"
|
||||
:title="t('admin.groups.rateAndAccounts', { rate: group.rate_multiplier, count: group.account_count || 0 })"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="group.id"
|
||||
:checked="modelValue.includes(group.id)"
|
||||
@change="handleChange(group.id, ($event.target as HTMLInputElement).checked)"
|
||||
class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-500 focus:ring-primary-500 dark:border-dark-500"
|
||||
/>
|
||||
<GroupBadge
|
||||
:name="group.name"
|
||||
:platform="group.platform"
|
||||
:subscription-type="group.subscription_type"
|
||||
:rate-multiplier="group.rate_multiplier"
|
||||
class="min-w-0 flex-1"
|
||||
/>
|
||||
<span class="shrink-0 text-xs text-gray-400">{{ group.account_count || 0 }}</span>
|
||||
</label>
|
||||
<div
|
||||
v-if="filteredGroups.length === 0"
|
||||
class="col-span-2 py-2 text-center text-sm text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('common.noGroupsAvailable') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GroupBadge from './GroupBadge.vue'
|
||||
import type { AdminGroup, GroupPlatform } from '@/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
modelValue: number[]
|
||||
groups: AdminGroup[]
|
||||
platform?: GroupPlatform // Optional platform filter
|
||||
mixedScheduling?: boolean // For antigravity accounts: allow anthropic/gemini groups
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number[]]
|
||||
}>()
|
||||
|
||||
// Filter groups by platform if specified
|
||||
const filteredGroups = computed(() => {
|
||||
if (!props.platform) {
|
||||
return props.groups
|
||||
}
|
||||
// antigravity 账户启用混合调度后，可选择 anthropic/gemini 分组
|
||||
if (props.platform === 'antigravity' && props.mixedScheduling) {
|
||||
return props.groups.filter(
|
||||
(g) => g.platform === 'antigravity' || g.platform === 'anthropic' || g.platform === 'gemini'
|
||||
)
|
||||
}
|
||||
// 默认：只能选择同 platform 的分组
|
||||
return props.groups.filter((g) => g.platform === props.platform)
|
||||
})
|
||||
|
||||
const handleChange = (groupId: number, checked: boolean) => {
|
||||
const newValue = checked
|
||||
? [...props.modelValue, groupId]
|
||||
: props.modelValue.filter((id) => id !== groupId)
|
||||
emit('update:modelValue', newValue)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, useTemplateRef, nextTick } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
content?: string
|
||||
}>()
|
||||
|
||||
const show = ref(false)
|
||||
const triggerRef = useTemplateRef<HTMLElement>('trigger')
|
||||
const tooltipStyle = ref({ top: '0px', left: '0px' })
|
||||
|
||||
function onEnter() {
|
||||
show.value = true
|
||||
nextTick(updatePosition)
|
||||
}
|
||||
|
||||
function onLeave() {
|
||||
show.value = false
|
||||
}
|
||||
|
||||
function updatePosition() {
|
||||
const el = triggerRef.value
|
||||
if (!el) return
|
||||
const rect = el.getBoundingClientRect()
|
||||
tooltipStyle.value = {
|
||||
top: `${rect.top + window.scrollY}px`,
|
||||
left: `${rect.left + rect.width / 2 + window.scrollX}px`,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="trigger"
|
||||
class="group relative ml-1 inline-flex items-center align-middle"
|
||||
@mouseenter="onEnter"
|
||||
@mouseleave="onLeave"
|
||||
>
|
||||
<!-- Trigger Icon -->
|
||||
<slot name="trigger">
|
||||
<svg
|
||||
class="h-4 w-4 cursor-help text-gray-400 transition-colors hover:text-primary-600 dark:text-gray-500 dark:hover:text-primary-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</slot>
|
||||
|
||||
<!-- Teleport to body to escape modal overflow clipping -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-show="show"
|
||||
class="fixed z-[99999] w-64 -translate-x-1/2 -translate-y-full rounded-lg bg-gray-900 p-3 text-xs leading-relaxed text-white shadow-xl ring-1 ring-white/10 dark:bg-gray-800"
|
||||
:style="{ top: `calc(${tooltipStyle.top} - 8px)`, left: tooltipStyle.left }"
|
||||
>
|
||||
<slot>{{ content }}</slot>
|
||||
<div class="absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-gray-900 dark:bg-gray-800"></div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- Preview Box -->
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="flex items-center justify-center overflow-hidden rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 dark:border-dark-600 dark:bg-dark-800"
|
||||
:class="[previewSizeClass, { 'border-solid': !!modelValue }]"
|
||||
>
|
||||
<!-- SVG mode: render inline -->
|
||||
<span
|
||||
v-if="mode === 'svg' && modelValue"
|
||||
class="text-gray-600 dark:text-gray-300 [&>svg]:h-full [&>svg]:w-full"
|
||||
:class="innerSizeClass"
|
||||
v-html="sanitizedValue"
|
||||
></span>
|
||||
<!-- Image mode: show as img -->
|
||||
<img
|
||||
v-else-if="mode === 'image' && modelValue"
|
||||
:src="modelValue"
|
||||
alt=""
|
||||
class="h-full w-full object-contain"
|
||||
/>
|
||||
<!-- Empty placeholder -->
|
||||
<svg
|
||||
v-else
|
||||
class="text-gray-400 dark:text-dark-500"
|
||||
:class="placeholderSizeClass"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="btn btn-secondary btn-sm cursor-pointer">
|
||||
<input
|
||||
type="file"
|
||||
:accept="acceptTypes"
|
||||
class="hidden"
|
||||
@change="handleUpload"
|
||||
/>
|
||||
<Icon name="upload" size="sm" class="mr-1.5" :stroke-width="2" />
|
||||
{{ uploadLabel }}
|
||||
</label>
|
||||
<button
|
||||
v-if="modelValue"
|
||||
type="button"
|
||||
class="btn btn-secondary btn-sm text-red-600 hover:text-red-700 dark:text-red-400"
|
||||
@click="$emit('update:modelValue', '')"
|
||||
>
|
||||
<Icon name="trash" size="sm" class="mr-1.5" :stroke-width="2" />
|
||||
{{ removeLabel }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="hint" class="text-xs text-gray-500 dark:text-gray-400">{{ hint }}</p>
|
||||
<p v-if="error" class="text-xs text-red-500">{{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { sanitizeSvg } from '@/utils/sanitize'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: string
|
||||
mode?: 'image' | 'svg'
|
||||
size?: 'sm' | 'md'
|
||||
uploadLabel?: string
|
||||
removeLabel?: string
|
||||
hint?: string
|
||||
maxSize?: number // bytes
|
||||
}>(), {
|
||||
mode: 'image',
|
||||
size: 'md',
|
||||
uploadLabel: 'Upload',
|
||||
removeLabel: 'Remove',
|
||||
hint: '',
|
||||
maxSize: 300 * 1024,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
|
||||
const error = ref('')
|
||||
|
||||
const acceptTypes = computed(() => props.mode === 'svg' ? '.svg' : 'image/*')
|
||||
|
||||
const sanitizedValue = computed(() =>
|
||||
props.mode === 'svg' ? sanitizeSvg(props.modelValue ?? '') : ''
|
||||
)
|
||||
|
||||
const previewSizeClass = computed(() => props.size === 'sm' ? 'h-14 w-14' : 'h-20 w-20')
|
||||
const innerSizeClass = computed(() => props.size === 'sm' ? 'h-7 w-7' : 'h-12 w-12')
|
||||
const placeholderSizeClass = computed(() => props.size === 'sm' ? 'h-5 w-5' : 'h-8 w-8')
|
||||
|
||||
function handleUpload(event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0]
|
||||
error.value = ''
|
||||
|
||||
if (!file) return
|
||||
|
||||
if (props.maxSize && file.size > props.maxSize) {
|
||||
error.value = `File too large (${(file.size / 1024).toFixed(1)} KB), max ${(props.maxSize / 1024).toFixed(0)} KB`
|
||||
input.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
if (props.mode === 'svg') {
|
||||
reader.onload = (e) => {
|
||||
const text = e.target?.result as string
|
||||
if (text) emit('update:modelValue', text.trim())
|
||||
}
|
||||
reader.readAsText(file)
|
||||
} else {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
error.value = 'Please select an image file'
|
||||
input.value = ''
|
||||
return
|
||||
}
|
||||
reader.onload = (e) => {
|
||||
emit('update:modelValue', e.target?.result as string)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
reader.onerror = () => {
|
||||
error.value = 'Failed to read file'
|
||||
}
|
||||
input.value = ''
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<label v-if="label" :for="id" class="input-label mb-1.5 block">
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<!-- Prefix Icon Slot -->
|
||||
<div
|
||||
v-if="$slots.prefix"
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-gray-400 dark:text-dark-400"
|
||||
>
|
||||
<slot name="prefix"></slot>
|
||||
</div>
|
||||
|
||||
<input
|
||||
:id="id"
|
||||
ref="inputRef"
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:placeholder="placeholderText"
|
||||
:autocomplete="autocomplete"
|
||||
:readonly="readonly"
|
||||
:class="[
|
||||
'input w-full transition-all duration-200',
|
||||
$slots.prefix ? 'pl-11' : '',
|
||||
$slots.suffix ? 'pr-11' : '',
|
||||
error ? 'input-error ring-2 ring-red-500/20' : '',
|
||||
disabled ? 'cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900' : ''
|
||||
]"
|
||||
@input="onInput"
|
||||
@change="$emit('change', ($event.target as HTMLInputElement).value)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@keyup.enter="$emit('enter', $event)"
|
||||
/>
|
||||
|
||||
<!-- Suffix Slot (e.g. Password Toggle or Clear Button) -->
|
||||
<div
|
||||
v-if="$slots.suffix"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 dark:text-dark-400"
|
||||
>
|
||||
<slot name="suffix"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hint / Error Text -->
|
||||
<p v-if="error" class="input-error-text mt-1.5">
|
||||
{{ error }}
|
||||
</p>
|
||||
<p v-else-if="hint" class="input-hint mt-1.5">
|
||||
{{ hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: string | number | null | undefined
|
||||
type?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
required?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
hint?: string
|
||||
id?: string
|
||||
autocomplete?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'text',
|
||||
disabled: false,
|
||||
required: false,
|
||||
readonly: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: string): void
|
||||
(e: 'blur', event: FocusEvent): void
|
||||
(e: 'focus', event: FocusEvent): void
|
||||
(e: 'enter', event: KeyboardEvent): void
|
||||
}>()
|
||||
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
const placeholderText = computed(() => props.placeholder || '')
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const value = (event.target as HTMLInputElement).value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Expose focus method
|
||||
defineExpose({
|
||||
focus: () => inputRef.value?.focus(),
|
||||
select: () => inputRef.value?.select()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div
|
||||
:class="['spinner', sizeClasses, colorClass]"
|
||||
role="status"
|
||||
:aria-label="t('common.loading')"
|
||||
>
|
||||
<span class="sr-only">{{ t('common.loading') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
|
||||
type SpinnerColor = 'primary' | 'secondary' | 'white' | 'gray'
|
||||
|
||||
interface Props {
|
||||
size?: SpinnerSize
|
||||
color?: SpinnerColor
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 'md',
|
||||
color: 'primary'
|
||||
})
|
||||
|
||||
const sizeClasses = computed(() => {
|
||||
const sizes: Record<SpinnerSize, string> = {
|
||||
sm: 'w-4 h-4 border-2',
|
||||
md: 'w-8 h-8 border-2',
|
||||
lg: 'w-12 h-12 border-[3px]',
|
||||
xl: 'w-16 h-16 border-4'
|
||||
}
|
||||
return sizes[props.size]
|
||||
})
|
||||
|
||||
const colorClass = computed(() => {
|
||||
const colors: Record<SpinnerColor, string> = {
|
||||
primary: 'text-primary-500',
|
||||
secondary: 'text-gray-500 dark:text-dark-400',
|
||||
white: 'text-white',
|
||||
gray: 'text-gray-400 dark:text-dark-500'
|
||||
}
|
||||
return colors[props.color]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.spinner {
|
||||
@apply inline-block rounded-full border-solid border-current border-r-transparent;
|
||||
animation: spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="relative" ref="dropdownRef">
|
||||
<button
|
||||
@click="toggleDropdown"
|
||||
:disabled="switching"
|
||||
class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
|
||||
:title="currentLocale?.name"
|
||||
>
|
||||
<span class="text-base">{{ currentLocale?.flag }}</span>
|
||||
<span class="hidden sm:inline">{{ currentLocale?.code.toUpperCase() }}</span>
|
||||
<Icon
|
||||
name="chevronDown"
|
||||
size="xs"
|
||||
class="text-gray-400 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': isOpen }"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="absolute right-0 z-50 mt-1 w-32 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dark-700 dark:bg-dark-800"
|
||||
>
|
||||
<button
|
||||
v-for="locale in availableLocales"
|
||||
:key="locale.code"
|
||||
:disabled="switching"
|
||||
@click="selectLocale(locale.code)"
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
|
||||
:class="{
|
||||
'bg-primary-50 text-primary-600 dark:bg-primary-900/20 dark:text-primary-400':
|
||||
locale.code === currentLocaleCode
|
||||
}"
|
||||
>
|
||||
<span class="text-base">{{ locale.flag }}</span>
|
||||
<span>{{ locale.name }}</span>
|
||||
<Icon v-if="locale.code === currentLocaleCode" name="check" size="sm" class="ml-auto text-primary-500" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { setLocale, availableLocales } from '@/i18n'
|
||||
|
||||
const { locale } = useI18n()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const dropdownRef = ref<HTMLElement | null>(null)
|
||||
const switching = ref(false)
|
||||
|
||||
const currentLocaleCode = computed(() => locale.value)
|
||||
const currentLocale = computed(() => availableLocales.find((l) => l.code === locale.value))
|
||||
|
||||
function toggleDropdown() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
async function selectLocale(code: string) {
|
||||
if (switching.value || code === currentLocaleCode.value) {
|
||||
isOpen.value = false
|
||||
return
|
||||
}
|
||||
switching.value = true
|
||||
try {
|
||||
await setLocale(code)
|
||||
isOpen.value = false
|
||||
} finally {
|
||||
switching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-4px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<svg
|
||||
v-if="iconInfo"
|
||||
:width="size"
|
||||
:height="size"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="model-icon"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<path v-for="(p, idx) in iconInfo.paths" :key="idx" :d="p" :fill="iconInfo.color" />
|
||||
</svg>
|
||||
<span v-else class="model-icon-fallback" :style="{ width: size, height: size, fontSize: `calc(${size} * 0.5)` }">
|
||||
{{ fallbackText }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
model: string
|
||||
size?: string
|
||||
}>(), {
|
||||
size: '18px'
|
||||
})
|
||||
|
||||
interface IconData {
|
||||
color: string
|
||||
paths: string[]
|
||||
}
|
||||
|
||||
// SVG paths extracted from @lobehub/icons Mono.js files
|
||||
const iconData: Record<string, IconData> = {
|
||||
claude: {
|
||||
color: '#D97706',
|
||||
paths: ['M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z']
|
||||
},
|
||||
openai: {
|
||||
color: '#000000',
|
||||
paths: ['M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z']
|
||||
},
|
||||
gemini: {
|
||||
color: '#4285F4',
|
||||
paths: ['M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z']
|
||||
},
|
||||
zhipu: {
|
||||
color: '#3859FF',
|
||||
paths: ['M11.991 23.503a.24.24 0 00-.244.248.24.24 0 00.244.249.24.24 0 00.245-.249.24.24 0 00-.22-.247l-.025-.001zM9.671 5.365a1.697 1.697 0 011.099 2.132l-.071.172-.016.04-.018.054c-.07.16-.104.32-.104.498-.035.71.47 1.279 1.186 1.314h.366c1.309.053 2.338 1.173 2.286 2.523-.052 1.332-1.152 2.38-2.478 2.327h-.174c-.715.018-1.274.64-1.239 1.368 0 .124.018.23.053.337.209.373.54.658.96.8.75.23 1.517-.125 1.9-.782l.018-.035c.402-.64 1.17-.96 1.92-.711.854.284 1.378 1.226 1.099 2.167a1.661 1.661 0 01-2.077 1.102 1.711 1.711 0 01-.907-.711l-.017-.035c-.2-.323-.463-.58-.851-.711l-.056-.018a1.646 1.646 0 00-1.954.746 1.66 1.66 0 01-1.065.764 1.677 1.677 0 01-1.989-1.279c-.209-.906.332-1.83 1.257-2.043a1.51 1.51 0 01.296-.035h.018c.68-.071 1.151-.622 1.116-1.333a1.307 1.307 0 00-.227-.693 2.515 2.515 0 01-.366-1.403 2.39 2.39 0 01.366-1.208c.14-.195.21-.444.227-.693.018-.71-.506-1.261-1.186-1.332l-.07-.018a1.43 1.43 0 01-.299-.07l-.05-.019a1.7 1.7 0 01-1.047-2.114 1.68 1.68 0 012.094-1.101zm-5.575 10.11c.26-.264.639-.367.994-.27.355.096.633.379.728.74.095.362-.007.748-.267 1.013-.402.41-1.053.41-1.455 0a1.062 1.062 0 010-1.482zm14.845-.294c.359-.09.738.024.992.297.254.274.344.665.237 1.025-.107.36-.396.634-.756.718-.551.128-1.1-.22-1.23-.781a1.05 1.05 0 01.757-1.26zm-.064-4.39c.314.32.49.753.49 1.206 0 .452-.176.886-.49 1.206-.315.32-.74.5-1.185.5-.444 0-.87-.18-1.184-.5a1.727 1.727 0 010-2.412 1.654 1.654 0 012.369 0zm-11.243.163c.364.484.447 1.128.218 1.691a1.665 1.665 0 01-2.188.923c-.855-.36-1.26-1.358-.907-2.228a1.68 1.68 0 011.33-1.038c.593-.08 1.183.169 1.547.652zm11.545-4.221c.368 0 .708.2.892.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.892.524c-.568 0-1.03-.47-1.03-1.048 0-.579.462-1.048 1.03-1.048zm-14.358 0c.368 0 .707.2.891.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.891.524c-.569 0-1.03-.47-1.03-1.048 0-.579.461-1.048 1.03-1.048zm10.031-1.475c.925 0 1.675.764 1.675 1.706s-.75 1.705-1.675 1.705-1.674-.763-1.674-1.705c0-.942.75-1.706 1.674-1.706zm-2.626-.684c.362-.082.653-.356.761-.718a1.062 1.062 0 00-.238-1.028 1.017 1.017 0 00-.996-.294c-.547.14-.881.7-.752 1.257.13.558.675.907 1.225.783zm0 16.876c.359-.087.644-.36.75-.72a1.062 1.062 0 00-.237-1.019 1.018 1.018 0 00-.985-.301 1.037 1.037 0 00-.762.717c-.108.361-.017.754.239 1.028.245.263.606.377.953.305l.043-.01zM17.19 3.5a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64a.631.631 0 00-.628.64c0 .355.28.64.628.64zm-10.38 0a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64a.631.631 0 00-.628.64c0 .355.279.64.628.64zm-5.182 7.852a.631.631 0 00-.628.64c0 .354.28.639.628.639a.63.63 0 00.627-.606l.001-.034a.62.62 0 00-.628-.64zm5.182 9.13a.631.631 0 00-.628.64c0 .355.279.64.628.64a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm10.38.018a.631.631 0 00-.628.64c0 .355.28.64.628.64a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64zm5.182-9.148a.631.631 0 00-.628.64c0 .354.279.639.628.639a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm-.384-4.992a.24.24 0 00.244-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249c0 .142.122.249.244.249zM11.991.497a.24.24 0 00.245-.248A.24.24 0 0011.99 0a.24.24 0 00-.244.249c0 .133.108.236.223.247l.021.001zM2.011 6.36a.24.24 0 00.245-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249.24.24 0 00.244.249zm0 11.263a.24.24 0 00-.243.248.24.24 0 00.244.249.24.24 0 00.244-.249.252.252 0 00-.244-.248zm19.995-.018a.24.24 0 00-.245.248.24.24 0 00.245.25.24.24 0 00.244-.25.252.252 0 00-.244-.248z']
|
||||
},
|
||||
qwen: {
|
||||
color: '#615EFF',
|
||||
paths: ['M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z']
|
||||
},
|
||||
deepseek: {
|
||||
color: '#4D6BFE',
|
||||
paths: ['M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z']
|
||||
},
|
||||
mistral: {
|
||||
color: '#F7D046',
|
||||
paths: ['M3.428 3.4h3.429v3.428h3.429v3.429h-.002 3.431V6.828h3.427V3.4h3.43v13.714H24v3.429H13.714v-3.428h-3.428v-3.429h-3.43v3.428h3.43v3.429H0v-3.429h3.428V3.4zm10.286 13.715h3.428v-3.429h-3.427v3.429z']
|
||||
},
|
||||
meta: {
|
||||
color: '#0668E1',
|
||||
paths: ['M6.897 4c1.915 0 3.516.932 5.43 3.376l.282-.373c.19-.246.383-.484.58-.71l.313-.35C14.588 4.788 15.792 4 17.225 4c1.273 0 2.469.557 3.491 1.516l.218.213c1.73 1.765 2.917 4.71 3.053 8.026l.011.392.002.25c0 1.501-.28 2.759-.818 3.7l-.14.23-.108.153c-.301.42-.664.758-1.086 1.009l-.265.142-.087.04a3.493 3.493 0 01-.302.118 4.117 4.117 0 01-1.33.208c-.524 0-.996-.067-1.438-.215-.614-.204-1.163-.56-1.726-1.116l-.227-.235c-.753-.812-1.534-1.976-2.493-3.586l-1.43-2.41-.544-.895-1.766 3.13-.343.592C7.597 19.156 6.227 20 4.356 20c-1.21 0-2.205-.42-2.936-1.182l-.168-.184c-.484-.573-.837-1.311-1.043-2.189l-.067-.32a8.69 8.69 0 01-.136-1.288L0 14.468c.002-.745.06-1.49.174-2.23l.1-.573c.298-1.53.828-2.958 1.536-4.157l.209-.34c1.177-1.83 2.789-3.053 4.615-3.16L6.897 4zm-.033 2.615l-.201.01c-.83.083-1.606.673-2.252 1.577l-.138.199-.01.018c-.67 1.017-1.185 2.378-1.456 3.845l-.004.022a12.591 12.591 0 00-.207 2.254l.002.188c.004.18.017.36.04.54l.043.291c.092.503.257.908.486 1.208l.117.137c.303.323.698.492 1.17.492 1.1 0 1.796-.676 3.696-3.641l2.175-3.4.454-.701-.139-.198C9.11 7.3 8.084 6.616 6.864 6.616zm10.196-.552l-.176.007c-.635.048-1.223.359-1.82.933l-.196.198c-.439.462-.887 1.064-1.367 1.807l.266.398c.18.274.362.56.55.858l.293.475 1.396 2.335.695 1.114c.583.926 1.03 1.6 1.408 2.082l.213.262c.282.326.529.54.777.673l.102.05c.227.1.457.138.718.138.176.002.35-.023.518-.073.338-.104.61-.32.813-.637l.095-.163.077-.162c.194-.459.29-1.06.29-1.785l-.006-.449c-.08-2.871-.938-5.372-2.2-6.798l-.176-.189c-.67-.683-1.444-1.074-2.27-1.074z']
|
||||
},
|
||||
cohere: {
|
||||
color: '#39594D',
|
||||
paths: [
|
||||
'M8.128 14.099c.592 0 1.77-.033 3.398-.703 1.897-.781 5.672-2.2 8.395-3.656 1.905-1.018 2.74-2.366 2.74-4.18A4.56 4.56 0 0018.1 1H7.549A6.55 6.55 0 001 7.55c0 3.617 2.745 6.549 7.128 6.549z',
|
||||
'M9.912 18.61a4.387 4.387 0 012.705-4.052l3.323-1.38c3.361-1.394 7.06 1.076 7.06 4.715a5.104 5.104 0 01-5.105 5.104l-3.597-.001a4.386 4.386 0 01-4.386-4.387z',
|
||||
'M4.776 14.962A3.775 3.775 0 001 18.738v.489a3.776 3.776 0 007.551 0v-.49a3.775 3.775 0 00-3.775-3.775z'
|
||||
]
|
||||
},
|
||||
yi: {
|
||||
color: '#003425',
|
||||
paths: ['M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5']
|
||||
},
|
||||
xai: {
|
||||
color: '#000000',
|
||||
paths: ['M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815']
|
||||
},
|
||||
moonshot: {
|
||||
color: '#16191E',
|
||||
paths: ['M1.052 16.916l9.539 2.552a21.007 21.007 0 00.06 2.033l5.956 1.593a11.997 11.997 0 01-5.586.865l-.18-.016-.044-.004-.084-.009-.094-.01a11.605 11.605 0 01-.157-.02l-.107-.014-.11-.016a11.962 11.962 0 01-.32-.051l-.042-.008-.075-.013-.107-.02-.07-.015-.093-.019-.075-.016-.095-.02-.097-.023-.094-.022-.068-.017-.088-.022-.09-.024-.095-.025-.082-.023-.109-.03-.062-.02-.084-.025-.093-.028-.105-.034-.058-.019-.08-.026-.09-.031-.066-.024a6.293 6.293 0 01-.044-.015l-.068-.025-.101-.037-.057-.022-.08-.03-.087-.035-.088-.035-.079-.032-.095-.04-.063-.028-.063-.027a5.655 5.655 0 01-.041-.018l-.066-.03-.103-.047-.052-.024-.096-.046-.062-.03-.084-.04-.086-.044-.093-.047-.052-.027-.103-.055-.057-.03-.058-.032a6.49 6.49 0 01-.046-.026l-.094-.053-.06-.034-.051-.03-.072-.041-.082-.05-.093-.056-.052-.032-.084-.053-.061-.039-.079-.05-.07-.047-.053-.035a7.785 7.785 0 01-.054-.036l-.044-.03-.044-.03a6.066 6.066 0 01-.04-.028l-.057-.04-.076-.054-.069-.05-.074-.054-.056-.042-.076-.057-.076-.059-.086-.067-.045-.035-.064-.052-.074-.06-.089-.073-.046-.039-.046-.039a7.516 7.516 0 01-.043-.037l-.045-.04-.061-.053-.07-.062-.068-.06-.062-.058-.067-.062-.053-.05-.088-.084a13.28 13.28 0 01-.099-.097l-.029-.028-.041-.042-.069-.07-.05-.051-.05-.053a6.457 6.457 0 01-.168-.179l-.08-.088-.062-.07-.071-.08-.042-.049-.053-.062-.058-.068-.046-.056a7.175 7.175 0 01-.027-.033l-.045-.055-.066-.082-.041-.052-.05-.064-.02-.025a11.99 11.99 0 01-1.44-2.402zm-1.02-5.794l11.353 3.037a20.468 20.468 0 00-.469 2.011l10.817 2.894a12.076 12.076 0 01-1.845 2.005L.657 15.923l-.016-.046-.035-.104a11.965 11.965 0 01-.05-.153l-.007-.023a11.896 11.896 0 01-.207-.741l-.03-.126-.018-.08-.021-.097-.018-.081-.018-.09-.017-.084-.018-.094c-.026-.141-.05-.283-.071-.426l-.017-.118-.011-.083-.013-.102a12.01 12.01 0 01-.019-.161l-.005-.047a12.12 12.12 0 01-.034-2.145zm1.593-5.15l11.948 3.196c-.368.605-.705 1.231-1.01 1.875l11.295 3.022c-.142.82-.368 1.612-.668 2.365l-11.55-3.09L.124 10.26l.015-.1.008-.049.01-.067.015-.087.018-.098c.026-.148.056-.295.088-.442l.028-.124.02-.085.024-.097c.022-.09.045-.18.07-.268l.028-.102.023-.083.03-.1.025-.082.03-.096.026-.082.031-.095a11.896 11.896 0 011.01-2.232zm4.442-4.4L17.352 4.59a20.77 20.77 0 00-1.688 1.721l7.823 2.093c.267.852.442 1.744.513 2.665L2.106 5.213l.045-.065.027-.04.04-.055.046-.065.055-.076.054-.072.064-.086.05-.065.057-.073.055-.07.06-.074.055-.069.065-.077.054-.066.066-.077.053-.06.072-.082.053-.06.067-.074.054-.058.073-.078.058-.06.063-.067.168-.17.1-.098.059-.056.076-.071a12.084 12.084 0 012.272-1.677zM12.017 0h.097l.082.001.069.001.054.002.068.002.046.001.076.003.047.002.06.003.054.002.087.005.105.007.144.011.088.007.044.004.077.008.082.008.047.005.102.012.05.006.108.014.081.01.042.006.065.01.207.032.07.012.065.011.14.026.092.018.11.022.046.01.075.016.041.01L14.7.3l.042.01.065.015.049.012.071.017.096.024.112.03.113.03.113.032.05.015.07.02.078.024.073.023.05.016.05.016.076.025.099.033.102.036.048.017.064.023.093.034.11.041.116.045.1.04.047.02.06.024.041.018.063.026.04.018.057.025.11.048.1.046.074.035.075.036.06.028.092.046.091.045.102.052.053.028.049.026.046.024.06.033.041.022.052.029.088.05.106.06.087.051.057.034.053.032.096.059.088.055.098.062.036.024.064.041.084.056.04.027.062.042.062.043.023.017c.054.037.108.075.161.114l.083.06.065.048.056.043.086.065.082.064.04.03.05.041.086.069.079.065.085.071c.712.6 1.353 1.283 1.909 2.031L7.222.994l.062-.027.065-.028.081-.034.086-.035c.113-.045.227-.09.341-.131l.096-.035.093-.033.084-.03.096-.031c.087-.03.176-.058.264-.085l.091-.027.086-.025.102-.03.085-.023.1-.026L9.04.37l.09-.023.091-.022.095-.022.09-.02.098-.021.091-.02.095-.018.092-.018.1-.018.091-.016.098-.017.092-.014.097-.015.092-.013.102-.013.091-.012.105-.012.09-.01.105-.01c.093-.01.186-.018.28-.024l.106-.008.09-.005.11-.006.093-.004.1-.004.097-.002.099-.002.197-.002z']
|
||||
},
|
||||
doubao: {
|
||||
color: '#1C64F2',
|
||||
paths: [
|
||||
'M5.31 15.756c.172-3.75 1.883-5.999 2.549-6.739-3.26 2.058-5.425 5.658-6.358 8.308v1.12C1.501 21.513 4.226 24 7.59 24a6.59 6.59 0 002.2-.375c.353-.12.7-.248 1.039-.378.913-.899 1.65-1.91 2.243-2.992-4.877 2.431-7.974.072-7.763-4.5l.002.001z',
|
||||
'M22.57 10.283c-1.212-.901-4.109-2.404-7.397-2.8.295 3.792.093 8.766-2.1 12.773a12.782 12.782 0 01-2.244 2.992c3.764-1.448 6.746-3.457 8.596-5.219 2.82-2.683 3.353-5.178 3.361-6.66a2.737 2.737 0 00-.216-1.084v-.002zM14.303 1.867C12.955.7 11.248 0 9.39 0 7.532 0 5.883.677 4.545 1.807 2.791 3.29 1.627 5.557 1.5 8.125v9.201c.932-2.65 3.097-6.25 6.357-8.307.5-.318 1.025-.595 1.569-.829 1.883-.801 3.878-.932 5.746-.706-.222-2.83-.718-5.002-.87-5.617h.001z',
|
||||
'M17.305 4.961a199.47 199.47 0 01-1.08-1.094c-.202-.213-.398-.419-.586-.622l-1.333-1.378c.151.615.648 2.786.869 5.617 3.288.395 6.185 1.898 7.396 2.8-1.306-1.275-3.475-3.487-5.266-5.323z'
|
||||
]
|
||||
},
|
||||
minimax: {
|
||||
color: '#F23F5D',
|
||||
paths: ['M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z']
|
||||
},
|
||||
wenxin: {
|
||||
color: '#167ADF',
|
||||
paths: ['M8.859 11.735c1.017-1.71 4.059-3.083 6.202.286 1.579 2.284 4.284 4.397 4.284 4.397s2.027 1.601.73 4.684c-1.24 2.956-5.64 1.607-6.005 1.49l-.024-.009s-1.746-.568-3.776-.112c-2.026.458-3.773.286-3.773.286l-.045-.001c-.328-.01-2.38-.187-3.001-2.968-.675-3.028 2.365-4.687 2.592-4.968.226-.288 1.802-1.37 2.816-3.085zm.986 1.738v2.032h-1.64s-1.64.138-2.213 2.014c-.2 1.252.177 1.99.242 2.148.067.157.596 1.073 1.927 1.342h3.078v-7.514l-1.394-.022zm3.588 2.191l-1.44.024v3.956s.064.985 1.44 1.344h3.541v-5.3h-1.528v3.979h-1.46s-.466-.068-.553-.447v-3.556zM9.82 16.715v3.06H8.58s-.863-.045-1.126-1.049c-.136-.445.02-.959.088-1.16.063-.203.353-.671.951-.85H9.82zm9.525-9.036c2.086 0 2.646 2.06 2.646 2.742 0 .688.284 3.597-2.309 3.655-2.595.057-2.704-1.77-2.704-3.08 0-1.374.277-3.317 2.367-3.317zM4.24 6.08c1.523-.135 2.645 1.55 2.762 2.513.07.625.393 3.486-1.975 4-2.364.515-3.244-2.249-2.984-3.544 0 0 .28-2.797 2.197-2.969zm8.847-1.483c.14-1.31 1.69-3.316 2.931-3.028 1.236.285 2.367 1.944 2.137 3.37-.224 1.428-1.345 3.313-3.095 3.082-1.748-.226-2.143-1.823-1.973-3.424zM9.425 1c1.307 0 2.364 1.519 2.364 3.398 0 1.879-1.057 3.4-2.364 3.4s-2.367-1.521-2.367-3.4C7.058 2.518 8.118 1 9.425 1z']
|
||||
},
|
||||
spark: {
|
||||
color: '#0070F0',
|
||||
paths: [
|
||||
'M11.615 0l6.237 6.107c2.382 2.338 2.823 3.743 3.161 6.15-1.197-1.732-1.776-2.02-4.504-2.772C12.48 8.374 11.095 5.933 11.615 0z',
|
||||
'M9.32 2.122C4.771 6.367 2 9.182 2 13.08c0 5.76 4.288 9.788 9.745 9.918 5.457.13 9.441-5.284 9.095-8.403-.347-3.118-4.418-3.81-4.418-3.81 1.69 3.16-.13 8.098-4.894 8.098-5.154 0-6.8-6.02-4.2-9.008.82 1.617 1.879 2.563 2.674 3.273.717.64 1.219 1.09 1.136 1.664-.173 1.213-1.385.866-1.385.866.346.607 3.6 1.473 4.59-1.342.613-1.741-.423-2.789-1.714-4.096-1.632-1.651-3.672-3.717-3.31-8.118z'
|
||||
]
|
||||
},
|
||||
hunyuan: {
|
||||
color: '#0053E0',
|
||||
paths: ['M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm1.652 1.123l-.01-.001c.533.097 1.023.233 1.41.404 6.084 2.683 7.396 9.214 1.601 14.338a3.781 3.781 0 01-5.337-.328 3.654 3.654 0 01-.884-3.044c-1.934.6-3.295 2.305-3.524 4.45-.204 1.912.324 4.044 2.056 5.634l.245.067C10.1 22.876 11.036 23 12 23c6.075 0 11-4.925 11-11 0-5.513-4.056-10.08-9.348-10.877zM2.748 6.21c-.178.269-.348.536-.51.803l-.235.394.078-.167A10.957 10.957 0 001 12c0 4.919 3.228 9.083 7.682 10.49l.214.065C3.523 18.528 2.84 14.149 6.47 8.68A2.234 2.234 0 102.748 6.21zm10.157-5.172c4.408 1.33 3.61 5.41 2.447 6.924-.86 1.117-2.922 1.46-3.708 2.238-.666.657-1.077 1.462-1.212 2.291A5.303 5.303 0 0112 12.258a5.672 5.672 0 001.404-11.169 10.51 10.51 0 00-.5-.052z']
|
||||
},
|
||||
cloudflare: {
|
||||
color: '#F38020',
|
||||
paths: [
|
||||
'M16.493 17.4c.135-.52.08-.983-.161-1.338-.215-.328-.592-.519-1.05-.519l-8.663-.109a.148.148 0 01-.135-.082c-.027-.054-.027-.109-.027-.163.027-.082.108-.164.189-.164l8.744-.11c1.05-.054 2.153-.9 2.556-1.937l.511-1.31c.027-.055.027-.11.027-.164C17.92 8.91 15.66 7 12.942 7c-2.503 0-4.628 1.638-5.381 3.903a2.432 2.432 0 00-1.803-.491c-1.21.109-2.153 1.092-2.287 2.32-.027.328 0 .628.054.9C1.56 13.688 0 15.326 0 17.319c0 .19.027.355.027.545 0 .082.08.137.161.137h15.983c.08 0 .188-.055.215-.164l.107-.437',
|
||||
'M19.238 11.75h-.242c-.054 0-.108.054-.135.109l-.35 1.2c-.134.52-.08.983.162 1.338.215.328.592.518 1.05.518l1.855.11c.054 0 .108.027.135.082.027.054.027.109.027.163-.027.082-.108.164-.188.164l-1.91.11c-1.05.054-2.153.9-2.557 1.937l-.134.355c-.027.055.026.137.107.137h6.592c.081 0 .162-.055.162-.137.107-.41.188-.846.188-1.31-.027-2.62-2.153-4.777-4.762-4.777'
|
||||
]
|
||||
},
|
||||
midjourney: {
|
||||
color: '#000000',
|
||||
paths: ['M22.369 17.676c-1.387 1.259-3.17 2.378-5.332 3.417.044.03.086.057.13.083l.018.01.019.012c.216.123.42.184.641.184.222 0 .426-.061.642-.184l.018-.011.019-.011c.14-.084.266-.178.492-.366l.178-.148c.279-.232.426-.342.625-.456.304-.174.612-.266.949-.266.337 0 .645.092.949.266l.023.014c.188.109.334.219.602.442l.178.148c.221.184.346.278.483.36l.028.017.018.01c.21.12.407.181.62.185h.022a.31.31 0 110 .618c-.337 0-.645-.092-.95-.266a3.137 3.137 0 01-.09-.054l-.022-.014-.022-.013-.02-.014a5.356 5.356 0 01-.49-.377l-.159-.132a3.836 3.836 0 00-.483-.36l-.027-.017-.019-.01a1.256 1.256 0 00-.641-.185c-.222 0-.426.061-.641.184l-.02.011-.018.011c-.14.084-.266.178-.492.366l-.158.132a5.125 5.125 0 01-.51.39l-.022.014-.022.014-.09.054a1.868 1.868 0 01-.95.266c-.337 0-.644-.092-.949-.266a3.137 3.137 0 01-.09-.054l-.022-.014-.022-.013-.026-.017a4.881 4.881 0 01-.425-.325.308.308 0 01-.12-.1l-.098-.081a3.836 3.836 0 00-.483-.36l-.027-.017-.019-.01a1.256 1.256 0 00-.641-.185c-.222 0-.426.061-.642.184l-.018.011-.019.011c-.14.084-.266.178-.492.366l-.158.132a5.125 5.125 0 01-.51.39l-.023.014-.022.014-.09.054A1.868 1.868 0 0112 22c-.337 0-.645-.092-.949-.266a3.137 3.137 0 01-.09-.054l-.022-.014-.022-.013-.021-.014a5.356 5.356 0 01-.49-.377l-.158-.132a3.836 3.836 0 00-.483-.36l-.028-.017-.018-.01a1.256 1.256 0 00-.642-.185c-.221 0-.425.061-.641.184l-.019.011-.018.011c-.141.084-.266.178-.492.366l-.158.132a5.125 5.125 0 01-.511.39l-.022.014-.022.014-.09.054a1.868 1.868 0 01-.986.264c-.746-.09-1.319-.38-1.89-.866l-.035-.03c-.047-.041-.118-.106-.192-.174l-.196-.181-.107-.1-.011-.01a1.531 1.531 0 00-.336-.253.313.313 0 00-.095-.03h-.005c-.119.022-.238.059-.361.11a.308.308 0 01-.077.061l-.008.005a.309.309 0 01-.126.034 5.66 5.66 0 00-.774.518l-.416.324-.055.043a6.542 6.542 0 01-.324.236c-.305.207-.552.315-.8.315a.31.31 0 01-.01-.618h.01c.09 0 .235-.062.438-.198l.04-.027c.077-.054.163-.117.27-.199l.385-.301.06-.047c.268-.206.506-.373.73-.505l-.633-1.21a.309.309 0 01.254-.451l20.287-1.305a.309.309 0 01.228.537zm-1.118.14L2.369 19.03l.423.809c.128-.045.256-.078.388-.1a.31.31 0 01.052-.005c.132 0 .26.032.386.093.153.073.294.179.483.35l.016.015.092.086.144.134.097.089c.065.06.125.114.16.144.485.418.948.658 1.554.736h.011a1.25 1.25 0 00.6-.172l.021-.011.019-.011.018-.011c.141-.084.266-.178.492-.366l.178-.148c.279-.232.426-.342.625-.456.305-.174.612-.266.95-.266.336 0 .644.092.948.266l.023.014c.188.109.335.219.603.442l.177.148c.222.184.346.278.484.36l.027.017.019.01c.215.124.42.185.641.185.222 0 .426-.061.641-.184l.019-.011.018-.011c.141-.084.267-.178.493-.366l.177-.148c.28-.232.427-.342.626-.456.304-.174.612-.266.949-.266.337 0 .644.092.949.266l.025.015c.187.109.334.22.603.443 1.867-.878 3.448-1.811 4.73-2.832l.02-.016zM3.653 2.026C6.073 3.06 8.69 4.941 10.8 7.258c2.46 2.7 4.109 5.828 4.637 9.149a.31.31 0 01-.421.335c-2.348-.945-4.54-1.258-6.59-1.02-1.739.2-3.337.792-4.816 1.703-.294.182-.62-.182-.405-.454 1.856-2.355 2.581-4.99 2.343-7.794-.195-2.292-1.031-4.61-2.284-6.709a.31.31 0 01.388-.442zM10.04 4.45c1.778.543 3.892 2.102 5.782 4.243 1.984 2.248 3.552 4.934 4.347 7.582a.31.31 0 01-.401.38l-.022-.01-.386-.154a10.594 10.594 0 00-.291-.112l-.016-.006c-.68-.247-1.199-.291-1.944-.101a.31.31 0 01-.375-.218C15.378 11.123 13.073 7.276 9.775 5c-.291-.201-.072-.653.266-.55zM4.273 2.996l.008.015c1.028 1.94 1.708 4.031 1.885 6.113.213 2.513-.31 4.906-1.673 7.092l-.02.031.003-.001c1.198-.581 2.47-.969 3.825-1.132l.055-.006c1.981-.23 4.083.029 6.309.837l.066.025-.007-.039c-.593-2.95-2.108-5.737-4.31-8.179l-.07-.078c-1.785-1.96-3.944-3.6-6.014-4.65l-.057-.028zm7.92 3.238l.048.048c2.237 2.295 3.885 5.431 4.974 9.191l.038.132.022-.004c.71-.133 1.284-.063 1.963.18l.027.01.066.024.046.018-.025-.073c-.811-2.307-2.208-4.62-3.936-6.594l-.058-.065c-1.02-1.155-2.103-2.132-3.15-2.856l-.015-.011z']
|
||||
},
|
||||
perplexity: {
|
||||
color: '#22B8CD',
|
||||
paths: ['M19.785 0v7.272H22.5V17.62h-2.935V24l-7.037-6.194v6.145h-1.091v-6.152L4.392 24v-6.465H1.5V7.188h2.884V0l7.053 6.494V.19h1.09v6.49L19.786 0zm-7.257 9.044v7.319l5.946 5.234V14.44l-5.946-5.397zm-1.099-.08l-5.946 5.398v7.235l5.946-5.234V8.965zm8.136 7.58h1.844V8.349H13.46l6.105 5.54v2.655zm-8.982-8.28H2.59v8.195h1.8v-2.576l6.192-5.62zM5.475 2.476v4.71h5.115l-5.115-4.71zm13.219 0l-5.115 4.71h5.115v-4.71z']
|
||||
},
|
||||
jina: {
|
||||
color: '#000000',
|
||||
paths: ['M6.608 21.416a4.608 4.608 0 100-9.217 4.608 4.608 0 000 9.217zM20.894 2.015c.614 0 1.106.492 1.106 1.106v9.002c0 5.13-4.148 9.309-9.217 9.37v-9.355l-.03-9.032c0-.614.491-1.106 1.106-1.106h7.158l-.123.015z']
|
||||
},
|
||||
openrouter: {
|
||||
color: '#6566F1',
|
||||
paths: ['M16.804 1.957l7.22 4.105v.087L16.73 10.21l.017-2.117-.821-.03c-1.059-.028-1.611.002-2.268.11-1.064.175-2.038.577-3.147 1.352L8.345 11.03c-.284.195-.495.336-.68.455l-.515.322-.397.234.385.23.53.338c.476.314 1.17.796 2.701 1.866 1.11.775 2.083 1.177 3.147 1.352l.3.045c.694.091 1.375.094 2.825.033l.022-2.159 7.22 4.105v.087L16.589 22l.014-1.862-.635.022c-1.386.042-2.137.002-3.138-.162-1.694-.28-3.26-.926-4.881-2.059l-2.158-1.5a21.997 21.997 0 00-.755-.498l-.467-.28a55.927 55.927 0 00-.76-.43C2.908 14.73.563 14.116 0 14.116V9.888l.14.004c.564-.007 2.91-.622 3.809-1.124l1.016-.58.438-.274c.428-.28 1.072-.726 2.686-1.853 1.621-1.133 3.186-1.78 4.881-2.059 1.152-.19 1.974-.213 3.814-.138l.02-1.907z']
|
||||
},
|
||||
suno: {
|
||||
color: '#000000',
|
||||
paths: ['M16.5 0C20.642 0 24 5.373 24 12h-9c0 6.627-3.358 12-7.5 12C3.358 24 0 18.627 0 12h9c0-6.627 3.358-12 7.5-12z']
|
||||
},
|
||||
ollama: {
|
||||
color: '#000000',
|
||||
paths: ['M7.905 1.09c.216.085.411.225.588.41.295.306.544.744.734 1.263.191.522.315 1.1.362 1.68a5.054 5.054 0 012.049-.636l.051-.004c.87-.07 1.73.087 2.48.474.101.053.2.11.297.17.05-.569.172-1.134.36-1.644.19-.52.439-.957.733-1.264a1.67 1.67 0 01.589-.41c.257-.1.53-.118.796-.042.401.114.745.368 1.016.737.248.337.434.769.561 1.287.23.934.27 2.163.115 3.645l.053.04.026.019c.757.576 1.284 1.397 1.563 2.35.435 1.487.216 3.155-.534 4.088l-.018.021.002.003c.417.762.67 1.567.724 2.4l.002.03c.064 1.065-.2 2.137-.814 3.19l-.007.01.01.024c.472 1.157.62 2.322.438 3.486l-.006.039a.651.651 0 01-.747.536.648.648 0 01-.54-.742c.167-1.033.01-2.069-.48-3.123a.643.643 0 01.04-.617l.004-.006c.604-.924.854-1.83.8-2.72-.046-.779-.325-1.544-.8-2.273a.644.644 0 01.18-.886l.009-.006c.243-.159.467-.565.58-1.12a4.229 4.229 0 00-.095-1.974c-.205-.7-.58-1.284-1.105-1.683-.595-.454-1.383-.673-2.38-.61a.653.653 0 01-.632-.371c-.314-.665-.772-1.141-1.343-1.436a3.288 3.288 0 00-1.772-.332c-1.245.099-2.343.801-2.67 1.686a.652.652 0 01-.61.425c-1.067.002-1.893.252-2.497.703-.522.39-.878.935-1.066 1.588a4.07 4.07 0 00-.068 1.886c.112.558.331 1.02.582 1.269l.008.007c.212.207.257.53.109.785-.36.622-.629 1.549-.673 2.44-.05 1.018.186 1.902.719 2.536l.016.019a.643.643 0 01.095.69c-.576 1.236-.753 2.252-.562 3.052a.652.652 0 01-1.269.298c-.243-1.018-.078-2.184.473-3.498l.014-.035-.008-.012a4.339 4.339 0 01-.598-1.309l-.005-.019a5.764 5.764 0 01-.177-1.785c.044-.91.278-1.842.622-2.59l.012-.026-.002-.002c-.293-.418-.51-.953-.63-1.545l-.005-.024a5.352 5.352 0 01.093-2.49c.262-.915.777-1.701 1.536-2.269.06-.045.123-.09.186-.132-.159-1.493-.119-2.73.112-3.67.127-.518.314-.95.562-1.287.27-.368.614-.622 1.015-.737.266-.076.54-.059.797.042zm4.116 9.09c.936 0 1.8.313 2.446.855.63.527 1.005 1.235 1.005 1.94 0 .888-.406 1.58-1.133 2.022-.62.375-1.451.557-2.403.557-1.009 0-1.871-.259-2.493-.734-.617-.47-.963-1.13-.963-1.845 0-.707.398-1.417 1.056-1.946.668-.537 1.55-.849 2.485-.849zm0 .896a3.07 3.07 0 00-1.916.65c-.461.37-.722.835-.722 1.25 0 .428.21.829.61 1.134.455.347 1.124.548 1.943.548.799 0 1.473-.147 1.932-.426.463-.28.7-.686.7-1.257 0-.423-.246-.89-.683-1.256-.484-.405-1.14-.643-1.864-.643zm.662 1.21l.004.004c.12.151.095.37-.056.49l-.292.23v.446a.375.375 0 01-.376.373.375.375 0 01-.376-.373v-.46l-.271-.218a.347.347 0 01-.052-.49.353.353 0 01.494-.051l.215.172.22-.174a.353.353 0 01.49.051zm-5.04-1.919c.478 0 .867.39.867.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zm8.706 0c.48 0 .868.39.868.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zM7.44 2.3l-.003.002a.659.659 0 00-.285.238l-.005.006c-.138.189-.258.467-.348.832-.17.692-.216 1.631-.124 2.782.43-.128.899-.208 1.404-.237l.01-.001.019-.034c.046-.082.095-.161.148-.239.123-.771.022-1.692-.253-2.444-.134-.364-.297-.65-.453-.813a.628.628 0 00-.107-.09L7.44 2.3zm9.174.04l-.002.001a.628.628 0 00-.107.09c-.156.163-.32.45-.453.814-.29.794-.387 1.776-.23 2.572l.058.097.008.014h.03a5.184 5.184 0 011.466.212c.086-1.124.038-2.043-.128-2.722-.09-.365-.21-.643-.349-.832l-.004-.006a.659.659 0 00-.285-.239h-.004z']
|
||||
},
|
||||
ai360: {
|
||||
color: '#23B7E5',
|
||||
paths: ['M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z']
|
||||
},
|
||||
dify: {
|
||||
color: '#1677FF',
|
||||
paths: ['M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z']
|
||||
},
|
||||
coze: {
|
||||
color: '#5436F5',
|
||||
paths: ['M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z']
|
||||
}
|
||||
}
|
||||
|
||||
const fallbackText = computed(() => props.model.charAt(0).toUpperCase())
|
||||
|
||||
const iconKey = computed(() => {
|
||||
const modelLower = props.model.toLowerCase()
|
||||
|
||||
// OpenAI models
|
||||
if (modelLower.startsWith('gpt') || modelLower.startsWith('o1') ||
|
||||
modelLower.startsWith('o3') || modelLower.startsWith('o4') ||
|
||||
modelLower.includes('chatgpt') || modelLower.includes('dall-e') ||
|
||||
modelLower.includes('whisper') || modelLower.includes('tts-1') ||
|
||||
modelLower.includes('text-embedding-3') || modelLower.includes('text-moderation') ||
|
||||
modelLower.includes('babbage') || modelLower.includes('davinci') ||
|
||||
modelLower.includes('curie') || modelLower.includes('ada')) return 'openai'
|
||||
|
||||
// Anthropic Claude
|
||||
if (modelLower.includes('claude')) return 'claude'
|
||||
|
||||
// Google Gemini
|
||||
if (modelLower.includes('gemini') || modelLower.includes('gemma') ||
|
||||
modelLower.includes('learnlm') || modelLower.includes('imagen-') ||
|
||||
modelLower.includes('veo-')) return 'gemini'
|
||||
|
||||
// Zhipu GLM
|
||||
if (modelLower.includes('glm') || modelLower.includes('chatglm') ||
|
||||
modelLower.includes('cogview') || modelLower.includes('cogvideo')) return 'zhipu'
|
||||
|
||||
// Alibaba Qwen
|
||||
if (modelLower.includes('qwen') || modelLower.includes('qwq')) return 'qwen'
|
||||
|
||||
// DeepSeek
|
||||
if (modelLower.includes('deepseek')) return 'deepseek'
|
||||
|
||||
// Mistral
|
||||
if (modelLower.includes('mistral') || modelLower.includes('mixtral') ||
|
||||
modelLower.includes('codestral') || modelLower.includes('pixtral') ||
|
||||
modelLower.includes('voxtral') || modelLower.includes('magistral')) return 'mistral'
|
||||
|
||||
// Meta Llama
|
||||
if (modelLower.includes('llama')) return 'meta'
|
||||
|
||||
// Cohere
|
||||
if (modelLower.includes('command') || modelLower.includes('c4ai-') ||
|
||||
modelLower.includes('embed-')) return 'cohere'
|
||||
|
||||
// Yi
|
||||
if (modelLower.startsWith('yi-') || modelLower.startsWith('yi ')) return 'yi'
|
||||
|
||||
// xAI Grok
|
||||
if (modelLower.includes('grok')) return 'xai'
|
||||
|
||||
// Moonshot
|
||||
if (modelLower.includes('moonshot') || modelLower.includes('kimi')) return 'moonshot'
|
||||
|
||||
// Doubao (ByteDance)
|
||||
if (modelLower.includes('doubao')) return 'doubao'
|
||||
|
||||
// MiniMax
|
||||
if (modelLower.includes('abab') || modelLower.includes('minimax')) return 'minimax'
|
||||
|
||||
// Baidu Wenxin
|
||||
if (modelLower.includes('ernie') || modelLower.includes('wenxin')) return 'wenxin'
|
||||
|
||||
// iFlytek Spark
|
||||
if (modelLower.includes('spark')) return 'spark'
|
||||
|
||||
// Tencent Hunyuan
|
||||
if (modelLower.includes('hunyuan')) return 'hunyuan'
|
||||
|
||||
// Cloudflare
|
||||
if (modelLower.includes('@cf/')) return 'cloudflare'
|
||||
|
||||
// Midjourney
|
||||
if (modelLower.includes('mj_') || modelLower.includes('midjourney')) return 'midjourney'
|
||||
|
||||
// Perplexity
|
||||
if (modelLower.includes('perplexity') || modelLower.includes('pplx')) return 'perplexity'
|
||||
|
||||
// Jina
|
||||
if (modelLower.includes('jina')) return 'jina'
|
||||
|
||||
// OpenRouter
|
||||
if (modelLower.includes('openrouter')) return 'openrouter'
|
||||
|
||||
// Suno
|
||||
if (modelLower.includes('suno')) return 'suno'
|
||||
|
||||
// Ollama
|
||||
if (modelLower.includes('ollama')) return 'ollama'
|
||||
|
||||
// 360
|
||||
if (modelLower.includes('360')) return 'ai360'
|
||||
|
||||
// Dify
|
||||
if (modelLower.includes('dify')) return 'dify'
|
||||
|
||||
// Coze
|
||||
if (modelLower.includes('coze')) return 'coze'
|
||||
|
||||
return null
|
||||
})
|
||||
|
||||
const iconInfo = computed(() => iconKey.value ? iconData[iconKey.value] : null)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.model-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.model-icon-fallback {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 导航进度条组件
|
||||
* 在页面顶部显示加载进度，提供导航反馈
|
||||
*/
|
||||
import { computed } from 'vue'
|
||||
import { useNavigationLoadingState } from '@/composables/useNavigationLoading'
|
||||
|
||||
const { isLoading } = useNavigationLoadingState()
|
||||
|
||||
// 进度条可见性
|
||||
const isVisible = computed(() => isLoading.value)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition name="progress-fade">
|
||||
<div
|
||||
v-show="isVisible"
|
||||
class="navigation-progress"
|
||||
role="progressbar"
|
||||
aria-label="Loading"
|
||||
aria-valuenow="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
>
|
||||
<div class="navigation-progress-bar" />
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.navigation-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.navigation-progress-bar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
theme('colors.primary.400') 20%,
|
||||
theme('colors.primary.500') 50%,
|
||||
theme('colors.primary.400') 80%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: progress-slide 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 暗色模式下的进度条颜色 */
|
||||
:root.dark .navigation-progress-bar {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
theme('colors.primary.500') 20%,
|
||||
theme('colors.primary.400') 50%,
|
||||
theme('colors.primary.500') 80%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* 进度条滑动动画 */
|
||||
@keyframes progress-slide {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 淡入淡出过渡 */
|
||||
.progress-fade-enter-active {
|
||||
transition: opacity 0.15s ease-out;
|
||||
}
|
||||
|
||||
.progress-fade-leave-active {
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.progress-fade-enter-from,
|
||||
.progress-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 减少动画模式 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.navigation-progress-bar {
|
||||
animation: progress-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes progress-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 dark:border-dark-700 dark:bg-dark-800 sm:px-6"
|
||||
>
|
||||
<div class="flex flex-1 items-center justify-between sm:hidden">
|
||||
<!-- Mobile pagination -->
|
||||
<button
|
||||
@click="goToPage(page - 1)"
|
||||
:disabled="page === 1"
|
||||
class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200 dark:hover:bg-dark-600"
|
||||
>
|
||||
{{ t('pagination.previous') }}
|
||||
</button>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">
|
||||
{{ t('pagination.pageOf', { page, total: totalPages }) }}
|
||||
</span>
|
||||
<button
|
||||
@click="goToPage(page + 1)"
|
||||
:disabled="page === totalPages"
|
||||
class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200 dark:hover:bg-dark-600"
|
||||
>
|
||||
{{ t('pagination.next') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
||||
<!-- Desktop pagination info -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">
|
||||
{{ t('pagination.showing') }}
|
||||
<span class="font-medium">{{ fromItem }}</span>
|
||||
{{ t('pagination.to') }}
|
||||
<span class="font-medium">{{ toItem }}</span>
|
||||
{{ t('pagination.of') }}
|
||||
<span class="font-medium">{{ total }}</span>
|
||||
{{ t('pagination.results') }}
|
||||
</p>
|
||||
|
||||
<!-- Page size selector -->
|
||||
<div v-if="showPageSizeSelector" class="flex items-center space-x-2">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300"
|
||||
>{{ t('pagination.perPage') }}:</span
|
||||
>
|
||||
<div class="page-size-select w-20">
|
||||
<Select
|
||||
:model-value="pageSize"
|
||||
:options="pageSizeSelectOptions"
|
||||
@update:model-value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showJump" class="flex items-center space-x-2">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">{{ t('pagination.jumpTo') }}</span>
|
||||
<input
|
||||
v-model="jumpPage"
|
||||
type="number"
|
||||
min="1"
|
||||
:max="totalPages"
|
||||
class="input w-20 text-sm"
|
||||
:placeholder="t('pagination.jumpPlaceholder')"
|
||||
@keyup.enter="submitJump"
|
||||
/>
|
||||
<button type="button" class="btn btn-ghost btn-sm" @click="submitJump">
|
||||
{{ t('pagination.jumpAction') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop pagination buttons -->
|
||||
<nav
|
||||
class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<!-- Previous button -->
|
||||
<button
|
||||
@click="goToPage(page - 1)"
|
||||
:disabled="page === 1"
|
||||
class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-400 dark:hover:bg-dark-600"
|
||||
:aria-label="t('pagination.previous')"
|
||||
>
|
||||
<Icon name="chevronLeft" size="md" />
|
||||
</button>
|
||||
|
||||
<!-- Page numbers -->
|
||||
<button
|
||||
v-for="(pageNum, index) in visiblePages"
|
||||
:key="`${pageNum}-${index}`"
|
||||
@click="typeof pageNum === 'number' && goToPage(pageNum)"
|
||||
:disabled="typeof pageNum !== 'number'"
|
||||
:class="[
|
||||
'relative inline-flex items-center border px-4 py-2 text-sm font-medium',
|
||||
pageNum === page
|
||||
? 'z-10 border-primary-500 bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400'
|
||||
: 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600',
|
||||
typeof pageNum !== 'number' && 'cursor-default'
|
||||
]"
|
||||
:aria-label="
|
||||
typeof pageNum === 'number' ? t('pagination.goToPage', { page: pageNum }) : undefined
|
||||
"
|
||||
:aria-current="pageNum === page ? 'page' : undefined"
|
||||
>
|
||||
{{ pageNum }}
|
||||
</button>
|
||||
|
||||
<!-- Next button -->
|
||||
<button
|
||||
@click="goToPage(page + 1)"
|
||||
:disabled="page === totalPages"
|
||||
class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-400 dark:hover:bg-dark-600"
|
||||
:aria-label="t('pagination.next')"
|
||||
>
|
||||
<Icon name="chevronRight" size="md" />
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import Select from './Select.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
pageSizeOptions?: number[]
|
||||
showPageSizeSelector?: boolean
|
||||
showJump?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:page', page: number): void
|
||||
(e: 'update:pageSize', pageSize: number): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
pageSizeOptions: () => [10, 20, 50, 100],
|
||||
showPageSizeSelector: true,
|
||||
showJump: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const totalPages = computed(() => Math.ceil(props.total / props.pageSize))
|
||||
|
||||
const fromItem = computed(() => {
|
||||
if (props.total === 0) return 0
|
||||
return (props.page - 1) * props.pageSize + 1
|
||||
})
|
||||
|
||||
const toItem = computed(() => {
|
||||
const to = props.page * props.pageSize
|
||||
return to > props.total ? props.total : to
|
||||
})
|
||||
|
||||
const pageSizeSelectOptions = computed(() => {
|
||||
return props.pageSizeOptions.map((size) => ({
|
||||
value: size,
|
||||
label: String(size)
|
||||
}))
|
||||
})
|
||||
|
||||
const jumpPage = ref('')
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const pages: (number | string)[] = []
|
||||
const maxVisible = 7
|
||||
const total = totalPages.value
|
||||
|
||||
if (total <= maxVisible) {
|
||||
// Show all pages if total is small
|
||||
for (let i = 1; i <= total; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
} else {
|
||||
// Always show first page
|
||||
pages.push(1)
|
||||
|
||||
const start = Math.max(2, props.page - 2)
|
||||
const end = Math.min(total - 1, props.page + 2)
|
||||
|
||||
// Add ellipsis before if needed
|
||||
if (start > 2) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
// Add middle pages
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
// Add ellipsis after if needed
|
||||
if (end < total - 1) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
// Always show last page
|
||||
pages.push(total)
|
||||
}
|
||||
|
||||
return pages
|
||||
})
|
||||
|
||||
const goToPage = (newPage: number) => {
|
||||
if (newPage >= 1 && newPage <= totalPages.value && newPage !== props.page) {
|
||||
emit('update:page', newPage)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePageSizeChange = (value: string | number | boolean | null) => {
|
||||
if (value === null || typeof value === 'boolean') return
|
||||
const newPageSize = typeof value === 'string' ? parseInt(value) : value
|
||||
emit('update:pageSize', newPageSize)
|
||||
}
|
||||
|
||||
const submitJump = () => {
|
||||
const value = jumpPage.value.trim()
|
||||
if (!value) return
|
||||
const pageNum = Number.parseInt(value, 10)
|
||||
if (Number.isNaN(pageNum)) return
|
||||
const nextPage = Math.min(Math.max(pageNum, 1), totalPages.value)
|
||||
jumpPage.value = ''
|
||||
goToPage(nextPage)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-size-select :deep(.select-trigger) {
|
||||
@apply px-3 py-1.5 text-sm;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<!-- Claude/Anthropic logo -->
|
||||
<svg v-if="platform === 'anthropic'" :class="sizeClass" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path
|
||||
d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- OpenAI logo -->
|
||||
<svg v-else-if="platform === 'openai'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Gemini logo (simple star) -->
|
||||
<svg v-else-if="platform === 'gemini'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2l1.89 7.2L21 12l-7.11 2.8L12 22l-1.89-7.2L3 12l7.11-2.8L12 2z" />
|
||||
</svg>
|
||||
<!-- Antigravity logo (cloud) -->
|
||||
<svg v-else-if="platform === 'antigravity'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" />
|
||||
</svg>
|
||||
<!-- Sora logo (sparkle) -->
|
||||
<svg v-else-if="platform === 'sora'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M12 2.5l2.1 4.7 5.1.5-3.9 3.4 1.2 5-4.5-2.6-4.5 2.6 1.2-5-3.9-3.4 5.1-.5L12 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Fallback: generic platform icon -->
|
||||
<svg v-else :class="sizeClass" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { GroupPlatform } from '@/types'
|
||||
|
||||
interface Props {
|
||||
platform?: GroupPlatform
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 'sm'
|
||||
})
|
||||
|
||||
const sizeClass = computed(() => {
|
||||
const sizes = {
|
||||
xs: 'w-3 h-3',
|
||||
sm: 'w-3.5 h-3.5',
|
||||
md: 'w-4 h-4',
|
||||
lg: 'w-5 h-5'
|
||||
}
|
||||
return sizes[props.size] + ' flex-shrink-0'
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="inline-flex flex-col gap-0.5 text-xs font-medium">
|
||||
<!-- Row 1: Platform + Type -->
|
||||
<div class="inline-flex items-center overflow-hidden rounded-md">
|
||||
<span :class="['inline-flex items-center gap-1 px-2 py-1', platformClass]">
|
||||
<PlatformIcon :platform="platform" size="xs" />
|
||||
<span>{{ platformLabel }}</span>
|
||||
</span>
|
||||
<span :class="['inline-flex items-center gap-1 px-1.5 py-1', typeClass]">
|
||||
<!-- OAuth icon -->
|
||||
<svg
|
||||
v-if="type === 'oauth'"
|
||||
class="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Setup Token icon -->
|
||||
<Icon v-else-if="type === 'setup-token'" name="shield" size="xs" />
|
||||
<!-- API Key icon -->
|
||||
<Icon v-else name="key" size="xs" />
|
||||
<span>{{ typeLabel }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Row 2: Plan type + Privacy mode (only if either exists) -->
|
||||
<div v-if="planLabel || privacyBadge" class="inline-flex items-center overflow-hidden rounded-md">
|
||||
<span v-if="planLabel" :class="['inline-flex items-center gap-1 px-1.5 py-1', typeClass]">
|
||||
<span>{{ planLabel }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="privacyBadge"
|
||||
:class="['inline-flex items-center gap-1 px-1.5 py-1', privacyBadge.class]"
|
||||
:title="privacyBadge.title"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" :d="privacyBadge.icon" />
|
||||
</svg>
|
||||
<span>{{ privacyBadge.label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { AccountPlatform, AccountType } from '@/types'
|
||||
import PlatformIcon from './PlatformIcon.vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface Props {
|
||||
platform: AccountPlatform
|
||||
type: AccountType
|
||||
planType?: string
|
||||
privacyMode?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const platformLabel = computed(() => {
|
||||
if (props.platform === 'anthropic') return 'Anthropic'
|
||||
if (props.platform === 'openai') return 'OpenAI'
|
||||
if (props.platform === 'antigravity') return 'Antigravity'
|
||||
if (props.platform === 'sora') return 'Sora'
|
||||
return 'Gemini'
|
||||
})
|
||||
|
||||
const typeLabel = computed(() => {
|
||||
switch (props.type) {
|
||||
case 'oauth':
|
||||
return 'OAuth'
|
||||
case 'setup-token':
|
||||
return 'Token'
|
||||
case 'apikey':
|
||||
return 'Key'
|
||||
case 'bedrock':
|
||||
return 'AWS'
|
||||
default:
|
||||
return props.type
|
||||
}
|
||||
})
|
||||
|
||||
const planLabel = computed(() => {
|
||||
if (!props.planType) return ''
|
||||
const lower = props.planType.toLowerCase()
|
||||
switch (lower) {
|
||||
case 'plus':
|
||||
return 'Plus'
|
||||
case 'team':
|
||||
return 'Team'
|
||||
case 'chatgptpro':
|
||||
case 'pro':
|
||||
return 'Pro'
|
||||
case 'free':
|
||||
return 'Free'
|
||||
default:
|
||||
return props.planType
|
||||
}
|
||||
})
|
||||
|
||||
const platformClass = computed(() => {
|
||||
if (props.platform === 'anthropic') {
|
||||
return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
}
|
||||
if (props.platform === 'openai') {
|
||||
return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
}
|
||||
if (props.platform === 'antigravity') {
|
||||
return 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
|
||||
}
|
||||
if (props.platform === 'sora') {
|
||||
return 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400'
|
||||
}
|
||||
return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
})
|
||||
|
||||
const typeClass = computed(() => {
|
||||
if (props.platform === 'anthropic') {
|
||||
return 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
}
|
||||
if (props.platform === 'openai') {
|
||||
return 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400'
|
||||
}
|
||||
if (props.platform === 'antigravity') {
|
||||
return 'bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400'
|
||||
}
|
||||
if (props.platform === 'sora') {
|
||||
return 'bg-rose-100 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400'
|
||||
}
|
||||
return 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
})
|
||||
|
||||
// Privacy badge — shows different states for OpenAI OAuth training setting
|
||||
const privacyBadge = computed(() => {
|
||||
if (props.platform !== 'openai' || props.type !== 'oauth' || !props.privacyMode) return null
|
||||
const shieldCheck = 'M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z'
|
||||
const shieldX = 'M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285zM12 18h.008v.008H12V18z'
|
||||
switch (props.privacyMode) {
|
||||
case 'training_off':
|
||||
return { label: 'Privacy', icon: shieldCheck, title: t('admin.accounts.privacyTrainingOff'), class: 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' }
|
||||
case 'training_set_cf_blocked':
|
||||
return { label: 'CF', icon: shieldX, title: t('admin.accounts.privacyCfBlocked'), class: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400' }
|
||||
case 'training_set_failed':
|
||||
return { label: 'Fail', icon: shieldX, title: t('admin.accounts.privacyFailed'), class: 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400' }
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<div class="relative" ref="containerRef">
|
||||
<button
|
||||
type="button"
|
||||
@click="toggle"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
'select-trigger',
|
||||
isOpen && 'select-trigger-open',
|
||||
disabled && 'select-trigger-disabled'
|
||||
]"
|
||||
>
|
||||
<span class="select-value">
|
||||
{{ selectedLabel }}
|
||||
</span>
|
||||
<span class="select-icon">
|
||||
<Icon
|
||||
name="chevronDown"
|
||||
size="md"
|
||||
:class="['transition-transform duration-200', isOpen && 'rotate-180']"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<Transition name="select-dropdown">
|
||||
<div v-if="isOpen" class="select-dropdown">
|
||||
<!-- Search and Batch Test Header -->
|
||||
<div class="select-header">
|
||||
<div class="select-search">
|
||||
<Icon name="search" size="sm" class="text-gray-400" />
|
||||
<input
|
||||
ref="searchInputRef"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
:placeholder="t('admin.proxies.searchProxies')"
|
||||
class="select-search-input"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
v-if="proxies.length > 0"
|
||||
type="button"
|
||||
@click.stop="handleBatchTest"
|
||||
:disabled="batchTesting"
|
||||
class="batch-test-btn"
|
||||
:title="t('admin.proxies.batchTest')"
|
||||
>
|
||||
<svg v-if="batchTesting" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<Icon v-else name="play" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Options list -->
|
||||
<div class="select-options">
|
||||
<!-- No Proxy option -->
|
||||
<div
|
||||
@click="selectOption(null)"
|
||||
:class="['select-option', modelValue === null && 'select-option-selected']"
|
||||
>
|
||||
<span class="select-option-label">{{ t('admin.accounts.noProxy') }}</span>
|
||||
<Icon v-if="modelValue === null" name="check" size="sm" class="text-primary-500" />
|
||||
</div>
|
||||
|
||||
<!-- Proxy options -->
|
||||
<div
|
||||
v-for="proxy in filteredProxies"
|
||||
:key="proxy.id"
|
||||
@click="selectOption(proxy.id)"
|
||||
:class="['select-option', modelValue === proxy.id && 'select-option-selected']"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="truncate font-medium">{{ proxy.name }}</span>
|
||||
<!-- Account count badge -->
|
||||
<span
|
||||
v-if="proxy.account_count !== undefined"
|
||||
class="inline-flex flex-shrink-0 items-center rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 dark:bg-dark-600 dark:text-gray-400"
|
||||
>
|
||||
{{ proxy.account_count }}
|
||||
</span>
|
||||
<!-- Test result badges -->
|
||||
<template v-if="testResults[proxy.id]">
|
||||
<span
|
||||
v-if="testResults[proxy.id].success"
|
||||
class="inline-flex flex-shrink-0 items-center gap-1 rounded bg-emerald-100 px-1.5 py-0.5 text-xs text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
|
||||
>
|
||||
<span v-if="testResults[proxy.id].country">{{
|
||||
testResults[proxy.id].country
|
||||
}}</span>
|
||||
<span v-if="testResults[proxy.id].latency_ms"
|
||||
>{{ testResults[proxy.id].latency_ms }}ms</span
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex flex-shrink-0 items-center rounded bg-red-100 px-1.5 py-0.5 text-xs text-red-700 dark:bg-red-900/30 dark:text-red-400"
|
||||
>
|
||||
{{ t('admin.proxies.testFailed') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="truncate text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ proxy.protocol }}://{{ proxy.host }}:{{ proxy.port }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Individual test button -->
|
||||
<button
|
||||
type="button"
|
||||
@click.stop="handleTestProxy(proxy)"
|
||||
:disabled="testingProxyIds.has(proxy.id)"
|
||||
class="test-btn"
|
||||
:title="t('admin.proxies.testConnection')"
|
||||
>
|
||||
<svg
|
||||
v-if="testingProxyIds.has(proxy.id)"
|
||||
class="h-3.5 w-3.5 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<Icon v-else name="play" size="xs" />
|
||||
</button>
|
||||
|
||||
<Icon
|
||||
v-if="modelValue === proxy.id"
|
||||
name="check"
|
||||
size="sm"
|
||||
class="flex-shrink-0 text-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-if="filteredProxies.length === 0 && searchQuery" class="select-empty">
|
||||
{{ t('common.noOptionsFound') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { adminAPI } from '@/api/admin'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import type { Proxy } from '@/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface ProxyTestResult {
|
||||
success: boolean
|
||||
message: string
|
||||
latency_ms?: number
|
||||
ip_address?: string
|
||||
city?: string
|
||||
region?: string
|
||||
country?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: number | null
|
||||
proxies: Proxy[]
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number | null]
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const searchInputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
// Test state
|
||||
const testResults = reactive<Record<number, ProxyTestResult>>({})
|
||||
const testingProxyIds = reactive(new Set<number>())
|
||||
const batchTesting = ref(false)
|
||||
|
||||
const selectedProxy = computed(() => {
|
||||
if (props.modelValue === null) return null
|
||||
return props.proxies.find((p) => p.id === props.modelValue) || null
|
||||
})
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
if (!selectedProxy.value) {
|
||||
return t('admin.accounts.noProxy')
|
||||
}
|
||||
const proxy = selectedProxy.value
|
||||
return `${proxy.name} (${proxy.protocol}://${proxy.host}:${proxy.port})`
|
||||
})
|
||||
|
||||
const filteredProxies = computed(() => {
|
||||
if (!searchQuery.value) {
|
||||
return props.proxies
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return props.proxies.filter((proxy) => {
|
||||
const name = proxy.name.toLowerCase()
|
||||
const host = proxy.host.toLowerCase()
|
||||
return name.includes(query) || host.includes(query)
|
||||
})
|
||||
})
|
||||
|
||||
const toggle = () => {
|
||||
if (props.disabled) return
|
||||
isOpen.value = !isOpen.value
|
||||
if (isOpen.value) {
|
||||
nextTick(() => {
|
||||
searchInputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const selectOption = (value: number | null) => {
|
||||
emit('update:modelValue', value)
|
||||
isOpen.value = false
|
||||
searchQuery.value = ''
|
||||
}
|
||||
|
||||
const handleTestProxy = async (proxy: Proxy) => {
|
||||
if (testingProxyIds.has(proxy.id)) return
|
||||
|
||||
testingProxyIds.add(proxy.id)
|
||||
try {
|
||||
const result = await adminAPI.proxies.testProxy(proxy.id)
|
||||
testResults[proxy.id] = result
|
||||
} catch (error: any) {
|
||||
testResults[proxy.id] = {
|
||||
success: false,
|
||||
message: error.response?.data?.detail || 'Test failed'
|
||||
}
|
||||
} finally {
|
||||
testingProxyIds.delete(proxy.id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchTest = async () => {
|
||||
if (batchTesting.value || props.proxies.length === 0) return
|
||||
|
||||
batchTesting.value = true
|
||||
|
||||
// Test all proxies in parallel
|
||||
const testPromises = props.proxies.map(async (proxy) => {
|
||||
testingProxyIds.add(proxy.id)
|
||||
try {
|
||||
const result = await adminAPI.proxies.testProxy(proxy.id)
|
||||
testResults[proxy.id] = result
|
||||
} catch (error: any) {
|
||||
testResults[proxy.id] = {
|
||||
success: false,
|
||||
message: error.response?.data?.detail || 'Test failed'
|
||||
}
|
||||
} finally {
|
||||
testingProxyIds.delete(proxy.id)
|
||||
}
|
||||
})
|
||||
|
||||
await Promise.all(testPromises)
|
||||
batchTesting.value = false
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
|
||||
isOpen.value = false
|
||||
searchQuery.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen.value) {
|
||||
isOpen.value = false
|
||||
searchQuery.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-trigger {
|
||||
@apply flex w-full items-center justify-between gap-2;
|
||||
@apply rounded-xl px-4 py-2.5 text-sm;
|
||||
@apply bg-white dark:bg-dark-800;
|
||||
@apply border border-gray-200 dark:border-dark-600;
|
||||
@apply text-gray-900 dark:text-gray-100;
|
||||
@apply transition-all duration-200;
|
||||
@apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30;
|
||||
@apply hover:border-gray-300 dark:hover:border-dark-500;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.select-trigger-open {
|
||||
@apply border-primary-500 ring-2 ring-primary-500/30;
|
||||
}
|
||||
|
||||
.select-trigger-disabled {
|
||||
@apply cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900;
|
||||
}
|
||||
|
||||
.select-value {
|
||||
@apply flex-1 truncate text-left;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
@apply flex-shrink-0 text-gray-400 dark:text-dark-400;
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
@apply absolute z-[100] mt-2 w-full;
|
||||
@apply bg-white dark:bg-dark-800;
|
||||
@apply rounded-xl;
|
||||
@apply border border-gray-200 dark:border-dark-700;
|
||||
@apply shadow-lg shadow-black/10 dark:shadow-black/30;
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
|
||||
.select-header {
|
||||
@apply flex items-center gap-2 px-3 py-2;
|
||||
@apply border-b border-gray-100 dark:border-dark-700;
|
||||
}
|
||||
|
||||
.select-search {
|
||||
@apply flex flex-1 items-center gap-2;
|
||||
}
|
||||
|
||||
.select-search-input {
|
||||
@apply flex-1 bg-transparent text-sm;
|
||||
@apply text-gray-900 dark:text-gray-100;
|
||||
@apply placeholder:text-gray-400 dark:placeholder:text-dark-400;
|
||||
@apply focus:outline-none;
|
||||
}
|
||||
|
||||
.batch-test-btn {
|
||||
@apply flex-shrink-0 rounded-lg p-1.5;
|
||||
@apply text-gray-500 hover:text-emerald-600 dark:hover:text-emerald-400;
|
||||
@apply hover:bg-emerald-50 dark:hover:bg-emerald-900/20;
|
||||
@apply transition-colors disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
.select-options {
|
||||
@apply max-h-60 overflow-y-auto py-1;
|
||||
}
|
||||
|
||||
.select-option {
|
||||
@apply flex items-center justify-between gap-2;
|
||||
@apply px-4 py-2.5 text-sm;
|
||||
@apply text-gray-700 dark:text-gray-300;
|
||||
@apply cursor-pointer transition-colors duration-150;
|
||||
@apply hover:bg-gray-50 dark:hover:bg-dark-700;
|
||||
}
|
||||
|
||||
.select-option-selected {
|
||||
@apply bg-primary-50 dark:bg-primary-900/20;
|
||||
@apply text-primary-700 dark:text-primary-300;
|
||||
}
|
||||
|
||||
.select-option-label {
|
||||
@apply truncate;
|
||||
}
|
||||
|
||||
.select-empty {
|
||||
@apply px-4 py-8 text-center text-sm;
|
||||
@apply text-gray-500 dark:text-dark-400;
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
@apply flex-shrink-0 rounded p-1;
|
||||
@apply text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-400;
|
||||
@apply hover:bg-emerald-50 dark:hover:bg-emerald-900/20;
|
||||
@apply transition-colors disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Dropdown animation */
|
||||
.select-dropdown-enter-active,
|
||||
.select-dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.select-dropdown-enter-from,
|
||||
.select-dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,271 @@
|
||||
# Common Components
|
||||
|
||||
This directory contains reusable Vue 3 components built with Composition API, TypeScript, and TailwindCSS.
|
||||
|
||||
## Components
|
||||
|
||||
### DataTable.vue
|
||||
|
||||
A generic data table component with sorting, loading states, and custom cell rendering.
|
||||
|
||||
**Props:**
|
||||
|
||||
- `columns: Column[]` - Array of column definitions with key, label, sortable, and formatter
|
||||
- `data: any[]` - Array of data objects to display
|
||||
- `loading?: boolean` - Show loading skeleton
|
||||
- `defaultSortKey?: string` - Default sort key (only used if no persisted sort state)
|
||||
- `defaultSortOrder?: 'asc' | 'desc'` - Default sort order (default: `asc`)
|
||||
- `sortStorageKey?: string` - Persist sort state (key + order) to localStorage
|
||||
- `rowKey?: string | (row: any) => string | number` - Row key field or resolver (defaults to `row.id`, falls back to index)
|
||||
|
||||
**Slots:**
|
||||
|
||||
- `empty` - Custom empty state content
|
||||
- `cell-{key}` - Custom cell renderer for specific column (receives `row` and `value`)
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<DataTable
|
||||
:columns="[
|
||||
{ key: 'name', label: 'Name', sortable: true },
|
||||
{ key: 'email', label: 'Email' },
|
||||
{ key: 'status', label: 'Status', formatter: (val) => val.toUpperCase() }
|
||||
]"
|
||||
:data="users"
|
||||
:loading="isLoading"
|
||||
>
|
||||
<template #cell-actions="{ row }">
|
||||
<button @click="editUser(row)">Edit</button>
|
||||
</template>
|
||||
</DataTable>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Pagination.vue
|
||||
|
||||
Pagination component with page numbers, navigation, and page size selector.
|
||||
|
||||
**Props:**
|
||||
|
||||
- `total: number` - Total number of items
|
||||
- `page: number` - Current page (1-indexed)
|
||||
- `pageSize: number` - Items per page
|
||||
- `pageSizeOptions?: number[]` - Available page size options (default: [10, 20, 50, 100])
|
||||
|
||||
**Events:**
|
||||
|
||||
- `update:page` - Emitted when page changes
|
||||
- `update:pageSize` - Emitted when page size changes
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<Pagination
|
||||
:total="totalUsers"
|
||||
:page="currentPage"
|
||||
:pageSize="pageSize"
|
||||
@update:page="currentPage = $event"
|
||||
@update:pageSize="pageSize = $event"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Modal.vue
|
||||
|
||||
Modal dialog with customizable size and close behavior.
|
||||
|
||||
**Props:**
|
||||
|
||||
- `show: boolean` - Control modal visibility
|
||||
- `title: string` - Modal title
|
||||
- `size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'` - Modal size (default: 'md')
|
||||
- `closeOnEscape?: boolean` - Close on Escape key (default: true)
|
||||
- `closeOnClickOutside?: boolean` - Close on backdrop click (default: true)
|
||||
|
||||
**Events:**
|
||||
|
||||
- `close` - Emitted when modal should close
|
||||
|
||||
**Slots:**
|
||||
|
||||
- `default` - Modal body content
|
||||
- `footer` - Modal footer content
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<Modal :show="showModal" title="Edit User" size="lg" @close="showModal = false">
|
||||
<form @submit.prevent="saveUser">
|
||||
<!-- Form content -->
|
||||
</form>
|
||||
|
||||
<template #footer>
|
||||
<button @click="showModal = false">Cancel</button>
|
||||
<button @click="saveUser">Save</button>
|
||||
</template>
|
||||
</Modal>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ConfirmDialog.vue
|
||||
|
||||
Confirmation dialog built on top of Modal component.
|
||||
|
||||
**Props:**
|
||||
|
||||
- `show: boolean` - Control dialog visibility
|
||||
- `title: string` - Dialog title
|
||||
- `message: string` - Confirmation message
|
||||
- `confirmText?: string` - Confirm button text (default: 'Confirm')
|
||||
- `cancelText?: string` - Cancel button text (default: 'Cancel')
|
||||
- `danger?: boolean` - Use danger/red styling (default: false)
|
||||
|
||||
**Events:**
|
||||
|
||||
- `confirm` - Emitted when user confirms
|
||||
- `cancel` - Emitted when user cancels
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<ConfirmDialog
|
||||
:show="showDeleteConfirm"
|
||||
title="Delete User"
|
||||
message="Are you sure you want to delete this user? This action cannot be undone."
|
||||
confirm-text="Delete"
|
||||
cancel-text="Cancel"
|
||||
danger
|
||||
@confirm="deleteUser"
|
||||
@cancel="showDeleteConfirm = false"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### StatCard.vue
|
||||
|
||||
Statistics card component for displaying metrics with optional change indicators.
|
||||
|
||||
**Props:**
|
||||
|
||||
- `title: string` - Card title
|
||||
- `value: number | string` - Main value to display
|
||||
- `icon?: Component` - Icon component
|
||||
- `change?: number` - Percentage change value
|
||||
- `changeType?: 'up' | 'down' | 'neutral'` - Change direction (default: 'neutral')
|
||||
- `formatValue?: (value) => string` - Custom value formatter
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<StatCard title="Total Users" :value="1234" :icon="UserIcon" :change="12.5" change-type="up" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Toast.vue
|
||||
|
||||
Toast notification component that automatically displays toasts from the app store.
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<!-- Add once in App.vue or layout -->
|
||||
<Toast />
|
||||
```
|
||||
|
||||
```typescript
|
||||
// Trigger toasts from anywhere using the app store
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
appStore.addToast({
|
||||
type: 'success',
|
||||
title: 'Success!',
|
||||
message: 'User created successfully',
|
||||
duration: 3000
|
||||
})
|
||||
|
||||
appStore.addToast({
|
||||
type: 'error',
|
||||
message: 'Failed to delete user'
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### LoadingSpinner.vue
|
||||
|
||||
Simple animated loading spinner.
|
||||
|
||||
**Props:**
|
||||
|
||||
- `size?: 'sm' | 'md' | 'lg' | 'xl'` - Spinner size (default: 'md')
|
||||
- `color?: 'primary' | 'secondary' | 'white' | 'gray'` - Spinner color (default: 'primary')
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<LoadingSpinner size="lg" color="primary" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### EmptyState.vue
|
||||
|
||||
Empty state placeholder with icon, message, and optional action button.
|
||||
|
||||
**Props:**
|
||||
|
||||
- `icon?: Component` - Icon component
|
||||
- `title: string` - Empty state title
|
||||
- `description: string` - Empty state description
|
||||
- `actionText?: string` - Action button text
|
||||
- `actionTo?: string | object` - Router link destination
|
||||
- `actionIcon?: boolean` - Show plus icon in button (default: true)
|
||||
|
||||
**Slots:**
|
||||
|
||||
- `icon` - Custom icon content
|
||||
- `action` - Custom action button/link
|
||||
|
||||
**Usage:**
|
||||
|
||||
```vue
|
||||
<EmptyState
|
||||
title="No users found"
|
||||
description="Get started by creating your first user account."
|
||||
action-text="Add User"
|
||||
:action-to="{ name: 'users-create' }"
|
||||
/>
|
||||
```
|
||||
|
||||
## Import
|
||||
|
||||
You can import components individually:
|
||||
|
||||
```typescript
|
||||
import { DataTable, Pagination, Modal } from '@/components/common'
|
||||
```
|
||||
|
||||
Or import specific components:
|
||||
|
||||
```typescript
|
||||
import DataTable from '@/components/common/DataTable.vue'
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
All components include:
|
||||
|
||||
- **TypeScript support** with proper type definitions
|
||||
- **Accessibility** with ARIA attributes and keyboard navigation
|
||||
- **Responsive design** with mobile-friendly layouts
|
||||
- **TailwindCSS styling** for consistent design
|
||||
- **Vue 3 Composition API** with `<script setup>`
|
||||
- **Slot support** for customization
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="relative w-full">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<Icon name="search" size="md" class="text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
:value="modelValue"
|
||||
type="text"
|
||||
class="input pl-10"
|
||||
:placeholder="placeholder"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
debounceMs?: number
|
||||
}>(), {
|
||||
placeholder: 'Search...',
|
||||
debounceMs: 300
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'search', value: string): void
|
||||
}>()
|
||||
|
||||
const debouncedEmitSearch = useDebounceFn((value: string) => {
|
||||
emit('search', value)
|
||||
}, props.debounceMs)
|
||||
|
||||
const handleInput = (event: Event) => {
|
||||
const value = (event.target as HTMLInputElement).value
|
||||
emit('update:modelValue', value)
|
||||
debouncedEmitSearch(value)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,520 @@
|
||||
<template>
|
||||
<div class="relative" ref="containerRef">
|
||||
<button
|
||||
ref="triggerRef"
|
||||
type="button"
|
||||
@click="toggle"
|
||||
:disabled="disabled"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-haspopup="true"
|
||||
aria-label="Select option"
|
||||
:class="[
|
||||
'select-trigger',
|
||||
isOpen && 'select-trigger-open',
|
||||
error && 'select-trigger-error',
|
||||
disabled && 'select-trigger-disabled'
|
||||
]"
|
||||
@keydown.down.prevent="onTriggerKeyDown"
|
||||
@keydown.up.prevent="onTriggerKeyDown"
|
||||
>
|
||||
<span class="select-value">
|
||||
<slot name="selected" :option="selectedOption">
|
||||
{{ selectedLabel }}
|
||||
</slot>
|
||||
</span>
|
||||
<span class="select-icon">
|
||||
<Icon
|
||||
name="chevronDown"
|
||||
size="md"
|
||||
:class="['transition-transform duration-200', isOpen && 'rotate-180']"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Teleport dropdown to body to escape stacking context -->
|
||||
<Teleport to="body">
|
||||
<Transition name="select-dropdown">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
ref="dropdownRef"
|
||||
class="select-dropdown-portal"
|
||||
:class="[instanceId]"
|
||||
:style="dropdownStyle"
|
||||
role="listbox"
|
||||
@click.stop
|
||||
@mousedown.stop
|
||||
@keydown="onDropdownKeyDown"
|
||||
>
|
||||
<!-- Search input -->
|
||||
<div v-if="searchable" class="select-search">
|
||||
<Icon name="search" size="sm" class="text-gray-400" />
|
||||
<input
|
||||
ref="searchInputRef"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
:placeholder="searchPlaceholderText"
|
||||
class="select-search-input"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Options list -->
|
||||
<div class="select-options" ref="optionsListRef">
|
||||
<div
|
||||
v-for="(option, index) in filteredOptions"
|
||||
:key="`${typeof getOptionValue(option)}:${String(getOptionValue(option) ?? '')}`"
|
||||
role="option"
|
||||
:aria-selected="isSelected(option)"
|
||||
:aria-disabled="isOptionDisabled(option)"
|
||||
@click.stop="!isOptionDisabled(option) && selectOption(option)"
|
||||
@mouseenter="handleOptionMouseEnter(option, index)"
|
||||
:class="[
|
||||
'select-option',
|
||||
isGroupHeaderOption(option) && 'select-option-group',
|
||||
isSelected(option) && 'select-option-selected',
|
||||
isOptionDisabled(option) && !isGroupHeaderOption(option) && 'select-option-disabled',
|
||||
focusedIndex === index && !isGroupHeaderOption(option) && 'select-option-focused'
|
||||
]"
|
||||
>
|
||||
<slot name="option" :option="option" :selected="isSelected(option)">
|
||||
<span class="select-option-label">{{ getOptionLabel(option) }}</span>
|
||||
<Icon
|
||||
v-if="isSelected(option)"
|
||||
name="check"
|
||||
size="sm"
|
||||
class="text-primary-500"
|
||||
:stroke-width="2"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-if="filteredOptions.length === 0" class="select-empty">
|
||||
{{ emptyTextDisplay }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// Instance ID for unique click-outside detection
|
||||
const instanceId = `select-${Math.random().toString(36).substring(2, 9)}`
|
||||
|
||||
export interface SelectOption {
|
||||
value: string | number | boolean | null
|
||||
label: string
|
||||
disabled?: boolean
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: string | number | boolean | null | undefined
|
||||
options: SelectOption[] | Array<Record<string, unknown>>
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
error?: boolean
|
||||
searchable?: boolean
|
||||
searchPlaceholder?: string
|
||||
emptyText?: string
|
||||
valueKey?: string
|
||||
labelKey?: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string | number | boolean | null): void
|
||||
(e: 'change', value: string | number | boolean | null, option: SelectOption | null): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
error: false,
|
||||
searchable: false,
|
||||
valueKey: 'value',
|
||||
labelKey: 'label'
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const focusedIndex = ref(-1)
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const triggerRef = ref<HTMLButtonElement | null>(null)
|
||||
const searchInputRef = ref<HTMLInputElement | null>(null)
|
||||
const dropdownRef = ref<HTMLElement | null>(null)
|
||||
const optionsListRef = ref<HTMLElement | null>(null)
|
||||
const dropdownPosition = ref<'bottom' | 'top'>('bottom')
|
||||
const triggerRect = ref<DOMRect | null>(null)
|
||||
|
||||
// i18n placeholders
|
||||
const placeholderText = computed(() => props.placeholder ?? t('common.selectOption'))
|
||||
const searchPlaceholderText = computed(() => props.searchPlaceholder ?? t('common.searchPlaceholder'))
|
||||
const emptyTextDisplay = computed(() => props.emptyText ?? t('common.noOptionsFound'))
|
||||
|
||||
// Computed style for teleported dropdown
|
||||
const dropdownStyle = computed(() => {
|
||||
if (!triggerRect.value) return {}
|
||||
|
||||
const rect = triggerRect.value
|
||||
const style: Record<string, string> = {
|
||||
position: 'fixed',
|
||||
left: `${rect.left}px`,
|
||||
minWidth: `${rect.width}px`,
|
||||
zIndex: '100000020'
|
||||
}
|
||||
|
||||
if (dropdownPosition.value === 'top') {
|
||||
style.bottom = `${window.innerHeight - rect.top + 4}px`
|
||||
} else {
|
||||
style.top = `${rect.bottom + 4}px`
|
||||
}
|
||||
|
||||
return style
|
||||
})
|
||||
|
||||
const getOptionValue = (option: any): any => {
|
||||
if (typeof option === 'object' && option !== null) {
|
||||
return option[props.valueKey]
|
||||
}
|
||||
return option
|
||||
}
|
||||
|
||||
const getOptionLabel = (option: any): string => {
|
||||
if (typeof option === 'object' && option !== null) {
|
||||
return String(option[props.labelKey] ?? '')
|
||||
}
|
||||
return String(option ?? '')
|
||||
}
|
||||
|
||||
const isOptionDisabled = (option: any): boolean => {
|
||||
if (typeof option === 'object' && option !== null) {
|
||||
return !!option.disabled
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const isGroupHeaderOption = (option: any): boolean => {
|
||||
if (typeof option === 'object' && option !== null) {
|
||||
return option.kind === 'group'
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const selectedOption = computed(() => {
|
||||
return props.options.find((opt) => getOptionValue(opt) === props.modelValue) || null
|
||||
})
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
if (selectedOption.value) {
|
||||
return getOptionLabel(selectedOption.value)
|
||||
}
|
||||
return placeholderText.value
|
||||
})
|
||||
|
||||
const filteredOptions = computed(() => {
|
||||
let opts = props.options as any[]
|
||||
if (props.searchable && searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
opts = opts.filter((opt) => {
|
||||
// Match label
|
||||
if (getOptionLabel(opt).toLowerCase().includes(query)) return true
|
||||
// Also match description if present
|
||||
if (opt.description && String(opt.description).toLowerCase().includes(query)) return true
|
||||
return false
|
||||
})
|
||||
}
|
||||
return opts
|
||||
})
|
||||
|
||||
const isSelected = (option: any): boolean => {
|
||||
return getOptionValue(option) === props.modelValue
|
||||
}
|
||||
|
||||
const findNextEnabledIndex = (startIndex: number): number => {
|
||||
const opts = filteredOptions.value
|
||||
if (opts.length === 0) return -1
|
||||
for (let offset = 0; offset < opts.length; offset++) {
|
||||
const idx = (startIndex + offset) % opts.length
|
||||
if (!isOptionDisabled(opts[idx])) return idx
|
||||
}
|
||||
return -1
|
||||
}
|
||||
|
||||
const findPrevEnabledIndex = (startIndex: number): number => {
|
||||
const opts = filteredOptions.value
|
||||
if (opts.length === 0) return -1
|
||||
for (let offset = 0; offset < opts.length; offset++) {
|
||||
const idx = (startIndex - offset + opts.length) % opts.length
|
||||
if (!isOptionDisabled(opts[idx])) return idx
|
||||
}
|
||||
return -1
|
||||
}
|
||||
|
||||
const handleOptionMouseEnter = (option: any, index: number) => {
|
||||
if (isOptionDisabled(option) || isGroupHeaderOption(option)) return
|
||||
focusedIndex.value = index
|
||||
}
|
||||
|
||||
// Update trigger rect periodically while open to follow scroll/resize
|
||||
const updateTriggerRect = () => {
|
||||
if (containerRef.value) {
|
||||
triggerRect.value = containerRef.value.getBoundingClientRect()
|
||||
}
|
||||
}
|
||||
|
||||
const calculateDropdownPosition = () => {
|
||||
if (!containerRef.value) return
|
||||
updateTriggerRect()
|
||||
|
||||
nextTick(() => {
|
||||
if (!dropdownRef.value || !triggerRect.value) return
|
||||
const dropdownHeight = dropdownRef.value.offsetHeight || 240
|
||||
const spaceBelow = window.innerHeight - triggerRect.value.bottom
|
||||
const spaceAbove = triggerRect.value.top
|
||||
|
||||
if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
|
||||
dropdownPosition.value = 'top'
|
||||
} else {
|
||||
dropdownPosition.value = 'bottom'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toggle = () => {
|
||||
if (props.disabled) return
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
watch(isOpen, (open) => {
|
||||
if (open) {
|
||||
calculateDropdownPosition()
|
||||
// Reset focused index to current selection or first item
|
||||
if (filteredOptions.value.length === 0) {
|
||||
focusedIndex.value = -1
|
||||
} else {
|
||||
const selectedIdx = filteredOptions.value.findIndex(isSelected)
|
||||
const initialIdx = selectedIdx >= 0 ? selectedIdx : 0
|
||||
focusedIndex.value = isOptionDisabled(filteredOptions.value[initialIdx])
|
||||
? findNextEnabledIndex(initialIdx + 1)
|
||||
: initialIdx
|
||||
}
|
||||
|
||||
if (props.searchable) {
|
||||
nextTick(() => searchInputRef.value?.focus())
|
||||
}
|
||||
// Add scroll listener to update position
|
||||
window.addEventListener('scroll', updateTriggerRect, { capture: true, passive: true })
|
||||
window.addEventListener('resize', calculateDropdownPosition)
|
||||
} else {
|
||||
searchQuery.value = ''
|
||||
focusedIndex.value = -1
|
||||
window.removeEventListener('scroll', updateTriggerRect, { capture: true })
|
||||
window.removeEventListener('resize', calculateDropdownPosition)
|
||||
}
|
||||
})
|
||||
|
||||
const selectOption = (option: any) => {
|
||||
const value = getOptionValue(option) ?? null
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value, option)
|
||||
isOpen.value = false
|
||||
triggerRef.value?.focus()
|
||||
}
|
||||
|
||||
// Keyboards
|
||||
const onTriggerKeyDown = () => {
|
||||
if (!isOpen.value) {
|
||||
isOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const onDropdownKeyDown = (e: KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
focusedIndex.value = findNextEnabledIndex(focusedIndex.value + 1)
|
||||
if (focusedIndex.value >= 0) scrollToFocused()
|
||||
break
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
focusedIndex.value = findPrevEnabledIndex(focusedIndex.value - 1)
|
||||
if (focusedIndex.value >= 0) scrollToFocused()
|
||||
break
|
||||
case 'Enter':
|
||||
e.preventDefault()
|
||||
if (focusedIndex.value >= 0 && focusedIndex.value < filteredOptions.value.length) {
|
||||
const opt = filteredOptions.value[focusedIndex.value]
|
||||
if (!isOptionDisabled(opt)) selectOption(opt)
|
||||
}
|
||||
break
|
||||
case 'Escape':
|
||||
e.preventDefault()
|
||||
isOpen.value = false
|
||||
triggerRef.value?.focus()
|
||||
break
|
||||
case 'Tab':
|
||||
isOpen.value = false
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToFocused = () => {
|
||||
nextTick(() => {
|
||||
const list = optionsListRef.value
|
||||
if (!list) return
|
||||
const focusedEl = list.children[focusedIndex.value] as HTMLElement
|
||||
if (!focusedEl) return
|
||||
|
||||
if (focusedEl.offsetTop < list.scrollTop) {
|
||||
list.scrollTop = focusedEl.offsetTop
|
||||
} else if (focusedEl.offsetTop + focusedEl.offsetHeight > list.scrollTop + list.offsetHeight) {
|
||||
list.scrollTop = focusedEl.offsetTop + focusedEl.offsetHeight - list.offsetHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement
|
||||
// Check if click is inside THIS specific instance's dropdown or trigger
|
||||
const isInDropdown = !!target.closest(`.${instanceId}`)
|
||||
const isInTrigger = containerRef.value?.contains(target)
|
||||
|
||||
if (!isInDropdown && !isInTrigger && isOpen.value) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
window.removeEventListener('scroll', updateTriggerRect, { capture: true })
|
||||
window.removeEventListener('resize', calculateDropdownPosition)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-trigger {
|
||||
@apply flex w-full items-center justify-between gap-2;
|
||||
@apply rounded-xl px-4 py-2.5 text-sm;
|
||||
@apply bg-white dark:bg-dark-800;
|
||||
@apply border border-gray-200 dark:border-dark-600;
|
||||
@apply text-gray-900 dark:text-gray-100;
|
||||
@apply transition-all duration-200;
|
||||
@apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30;
|
||||
@apply hover:border-gray-300 dark:hover:border-dark-500;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.select-trigger-open {
|
||||
@apply border-primary-500 ring-2 ring-primary-500/30;
|
||||
}
|
||||
|
||||
.select-trigger-error {
|
||||
@apply border-red-500 focus:border-red-500 focus:ring-red-500/30;
|
||||
}
|
||||
|
||||
.select-trigger-disabled {
|
||||
@apply cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900;
|
||||
}
|
||||
|
||||
.select-value {
|
||||
@apply flex-1 truncate text-left;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
@apply flex-shrink-0 text-gray-400 dark:text-dark-400;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.select-dropdown-portal {
|
||||
@apply w-max min-w-[200px];
|
||||
@apply bg-white dark:bg-dark-800;
|
||||
@apply rounded-xl;
|
||||
@apply border border-gray-200 dark:border-dark-700;
|
||||
@apply shadow-lg shadow-black/10 dark:shadow-black/30;
|
||||
@apply overflow-hidden;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-search {
|
||||
@apply flex items-center gap-2 px-3 py-2;
|
||||
@apply border-b border-gray-100 dark:border-dark-700;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-search-input {
|
||||
@apply flex-1 bg-transparent text-sm;
|
||||
@apply text-gray-900 dark:text-gray-100;
|
||||
@apply placeholder:text-gray-400 dark:placeholder:text-dark-400;
|
||||
@apply focus:outline-none;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-options {
|
||||
@apply max-h-60 overflow-y-auto py-1 outline-none;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-option {
|
||||
@apply flex items-center justify-between gap-2;
|
||||
@apply px-4 py-2.5 text-sm;
|
||||
@apply text-gray-700 dark:text-gray-300;
|
||||
@apply cursor-pointer transition-colors duration-150;
|
||||
@apply hover:bg-gray-50 dark:hover:bg-dark-700;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-option-selected {
|
||||
@apply bg-primary-50 dark:bg-primary-900/20;
|
||||
@apply text-primary-700 dark:text-primary-300;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-option-focused {
|
||||
@apply bg-gray-100 dark:bg-dark-700;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-option-disabled {
|
||||
@apply cursor-not-allowed opacity-40;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-option-group {
|
||||
@apply cursor-default select-none;
|
||||
@apply bg-gray-50 dark:bg-dark-900;
|
||||
@apply text-[11px] font-bold uppercase tracking-wider;
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-option-group:hover {
|
||||
@apply bg-gray-50 dark:bg-dark-900;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-option-label {
|
||||
@apply flex-1 min-w-0 truncate text-left;
|
||||
}
|
||||
|
||||
.select-dropdown-portal .select-empty {
|
||||
@apply px-4 py-8 text-center text-sm;
|
||||
@apply text-gray-500 dark:text-dark-400;
|
||||
}
|
||||
|
||||
.select-dropdown-enter-active,
|
||||
.select-dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.select-dropdown-enter-from,
|
||||
.select-dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'animate-pulse bg-gray-200 dark:bg-dark-700',
|
||||
variant === 'circle' ? 'rounded-full' : 'rounded-lg',
|
||||
customClass
|
||||
]"
|
||||
:style="style"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
variant?: 'rect' | 'circle' | 'text'
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'rect',
|
||||
width: '100%'
|
||||
})
|
||||
|
||||
const customClass = computed(() => props.class || '')
|
||||
|
||||
const style = computed(() => {
|
||||
const s: Record<string, string> = {}
|
||||
|
||||
if (props.width) {
|
||||
s.width = typeof props.width === 'number' ? `${props.width}px` : props.width
|
||||
}
|
||||
|
||||
if (props.height) {
|
||||
s.height = typeof props.height === 'number' ? `${props.height}px` : props.height
|
||||
} else if (props.variant === 'text') {
|
||||
s.height = '1em'
|
||||
s.marginTop = '0.25em'
|
||||
s.marginBottom = '0.25em'
|
||||
}
|
||||
|
||||
return s
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="stat-card">
|
||||
<div :class="['stat-icon', iconClass]">
|
||||
<component v-if="icon" :is="icon" class="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="stat-label truncate">{{ title }}</p>
|
||||
<div class="mt-1 flex items-baseline gap-2">
|
||||
<p class="stat-value" :title="String(formattedValue)">{{ formattedValue }}</p>
|
||||
<span v-if="change !== undefined" :class="['stat-trend', trendClass]">
|
||||
<Icon
|
||||
v-if="changeType !== 'neutral'"
|
||||
name="arrowUp"
|
||||
size="xs"
|
||||
:class="changeType === 'down' && 'rotate-180'"
|
||||
/>
|
||||
{{ formattedChange }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { Component } from 'vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
type ChangeType = 'up' | 'down' | 'neutral'
|
||||
type IconVariant = 'primary' | 'success' | 'warning' | 'danger'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
value: number | string
|
||||
icon?: Component
|
||||
iconVariant?: IconVariant
|
||||
change?: number
|
||||
changeType?: ChangeType
|
||||
formatValue?: (value: number | string) => string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
changeType: 'neutral',
|
||||
iconVariant: 'primary'
|
||||
})
|
||||
|
||||
const formattedValue = computed(() => {
|
||||
if (props.formatValue) {
|
||||
return props.formatValue(props.value)
|
||||
}
|
||||
if (typeof props.value === 'number') {
|
||||
return props.value.toLocaleString()
|
||||
}
|
||||
return props.value
|
||||
})
|
||||
|
||||
const formattedChange = computed(() => {
|
||||
if (props.change === undefined) return ''
|
||||
const absChange = Math.abs(props.change)
|
||||
return `${absChange}%`
|
||||
})
|
||||
|
||||
const iconClass = computed(() => {
|
||||
const classes: Record<IconVariant, string> = {
|
||||
primary: 'stat-icon-primary',
|
||||
success: 'stat-icon-success',
|
||||
warning: 'stat-icon-warning',
|
||||
danger: 'stat-icon-danger'
|
||||
}
|
||||
return classes[props.iconVariant]
|
||||
})
|
||||
|
||||
const trendClass = computed(() => {
|
||||
const classes: Record<ChangeType, string> = {
|
||||
up: 'stat-trend-up',
|
||||
down: 'stat-trend-down',
|
||||
neutral: 'text-gray-500 dark:text-dark-400'
|
||||
}
|
||||
return classes[props.changeType]
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span
|
||||
:class="[
|
||||
'inline-block h-2 w-2 rounded-full',
|
||||
variantClass
|
||||
]"
|
||||
></span>
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
status: string
|
||||
label: string
|
||||
}>()
|
||||
|
||||
const variantClass = computed(() => {
|
||||
switch (props.status) {
|
||||
case 'active':
|
||||
case 'success':
|
||||
return 'bg-green-500'
|
||||
case 'disabled':
|
||||
case 'inactive':
|
||||
case 'warning':
|
||||
return 'bg-yellow-500'
|
||||
case 'error':
|
||||
case 'danger':
|
||||
return 'bg-red-500'
|
||||
default:
|
||||
return 'bg-gray-400'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div v-if="hasActiveSubscriptions" class="relative" ref="containerRef">
|
||||
<!-- Mini Progress Display -->
|
||||
<button
|
||||
@click="toggleTooltip"
|
||||
class="flex cursor-pointer items-center gap-2 rounded-xl bg-purple-50 px-3 py-1.5 transition-colors hover:bg-purple-100 dark:bg-purple-900/20 dark:hover:bg-purple-900/30"
|
||||
:title="t('subscriptionProgress.viewDetails')"
|
||||
>
|
||||
<Icon name="creditCard" size="sm" class="text-purple-600 dark:text-purple-400" />
|
||||
<div class="flex items-center gap-1.5">
|
||||
<!-- Combined progress indicator -->
|
||||
<div class="flex items-center gap-0.5">
|
||||
<div
|
||||
v-for="(sub, index) in displaySubscriptions.slice(0, 3)"
|
||||
:key="index"
|
||||
class="h-2 w-2 rounded-full"
|
||||
:class="getProgressDotClass(sub)"
|
||||
></div>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-purple-700 dark:text-purple-300">
|
||||
{{ activeSubscriptions.length }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- Hover/Click Tooltip -->
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="tooltipOpen"
|
||||
class="absolute right-0 z-50 mt-2 w-[340px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-dark-700 dark:bg-dark-800"
|
||||
>
|
||||
<div class="border-b border-gray-100 p-3 dark:border-dark-700">
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('subscriptionProgress.title') }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-xs text-gray-500 dark:text-dark-400">
|
||||
{{ t('subscriptionProgress.activeCount', { count: activeSubscriptions.length }) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-h-64 overflow-y-auto">
|
||||
<div
|
||||
v-for="subscription in displaySubscriptions"
|
||||
:key="subscription.id"
|
||||
class="border-b border-gray-50 p-3 last:border-b-0 dark:border-dark-700/50"
|
||||
>
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ subscription.group?.name || `Group #${subscription.group_id}` }}
|
||||
</span>
|
||||
<span
|
||||
v-if="subscription.expires_at"
|
||||
class="text-xs"
|
||||
:class="getDaysRemainingClass(subscription.expires_at)"
|
||||
>
|
||||
{{ formatDaysRemaining(subscription.expires_at) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Progress bars or Unlimited badge -->
|
||||
<div class="space-y-1.5">
|
||||
<!-- Unlimited subscription badge -->
|
||||
<div
|
||||
v-if="isUnlimited(subscription)"
|
||||
class="flex items-center gap-2 rounded-lg bg-gradient-to-r from-emerald-50 to-teal-50 px-2.5 py-1.5 dark:from-emerald-900/20 dark:to-teal-900/20"
|
||||
>
|
||||
<span class="text-lg text-emerald-600 dark:text-emerald-400">∞</span>
|
||||
<span class="text-xs font-medium text-emerald-700 dark:text-emerald-300">
|
||||
{{ t('subscriptionProgress.unlimited') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Progress bars for limited subscriptions -->
|
||||
<template v-else>
|
||||
<div v-if="subscription.group?.daily_limit_usd" class="flex items-center gap-2">
|
||||
<span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
|
||||
t('subscriptionProgress.daily')
|
||||
}}</span>
|
||||
<div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
|
||||
<div
|
||||
class="h-1.5 rounded-full transition-all"
|
||||
:class="
|
||||
getProgressBarClass(
|
||||
subscription.daily_usage_usd,
|
||||
subscription.group?.daily_limit_usd
|
||||
)
|
||||
"
|
||||
:style="{
|
||||
width: getProgressWidth(
|
||||
subscription.daily_usage_usd,
|
||||
subscription.group?.daily_limit_usd
|
||||
)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
|
||||
{{
|
||||
formatUsage(subscription.daily_usage_usd, subscription.group?.daily_limit_usd)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="subscription.group?.weekly_limit_usd" class="flex items-center gap-2">
|
||||
<span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
|
||||
t('subscriptionProgress.weekly')
|
||||
}}</span>
|
||||
<div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
|
||||
<div
|
||||
class="h-1.5 rounded-full transition-all"
|
||||
:class="
|
||||
getProgressBarClass(
|
||||
subscription.weekly_usage_usd,
|
||||
subscription.group?.weekly_limit_usd
|
||||
)
|
||||
"
|
||||
:style="{
|
||||
width: getProgressWidth(
|
||||
subscription.weekly_usage_usd,
|
||||
subscription.group?.weekly_limit_usd
|
||||
)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
|
||||
{{
|
||||
formatUsage(subscription.weekly_usage_usd, subscription.group?.weekly_limit_usd)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="subscription.group?.monthly_limit_usd" class="flex items-center gap-2">
|
||||
<span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
|
||||
t('subscriptionProgress.monthly')
|
||||
}}</span>
|
||||
<div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
|
||||
<div
|
||||
class="h-1.5 rounded-full transition-all"
|
||||
:class="
|
||||
getProgressBarClass(
|
||||
subscription.monthly_usage_usd,
|
||||
subscription.group?.monthly_limit_usd
|
||||
)
|
||||
"
|
||||
:style="{
|
||||
width: getProgressWidth(
|
||||
subscription.monthly_usage_usd,
|
||||
subscription.group?.monthly_limit_usd
|
||||
)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
|
||||
{{
|
||||
formatUsage(
|
||||
subscription.monthly_usage_usd,
|
||||
subscription.group?.monthly_limit_usd
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-100 p-2 dark:border-dark-700">
|
||||
<router-link
|
||||
to="/subscriptions"
|
||||
@click="closeTooltip"
|
||||
class="block w-full py-1 text-center text-xs text-primary-600 hover:underline dark:text-primary-400"
|
||||
>
|
||||
{{ t('subscriptionProgress.viewAll') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { useSubscriptionStore } from '@/stores'
|
||||
import type { UserSubscription } from '@/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const subscriptionStore = useSubscriptionStore()
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const tooltipOpen = ref(false)
|
||||
|
||||
// Use store data instead of local state
|
||||
const activeSubscriptions = computed(() => subscriptionStore.activeSubscriptions)
|
||||
const hasActiveSubscriptions = computed(() => subscriptionStore.hasActiveSubscriptions)
|
||||
|
||||
const displaySubscriptions = computed(() => {
|
||||
// Sort by most usage (highest percentage first)
|
||||
return [...activeSubscriptions.value].sort((a, b) => {
|
||||
const aMax = getMaxUsagePercentage(a)
|
||||
const bMax = getMaxUsagePercentage(b)
|
||||
return bMax - aMax
|
||||
})
|
||||
})
|
||||
|
||||
function getMaxUsagePercentage(sub: UserSubscription): number {
|
||||
const percentages: number[] = []
|
||||
if (sub.group?.daily_limit_usd) {
|
||||
percentages.push(((sub.daily_usage_usd || 0) / sub.group.daily_limit_usd) * 100)
|
||||
}
|
||||
if (sub.group?.weekly_limit_usd) {
|
||||
percentages.push(((sub.weekly_usage_usd || 0) / sub.group.weekly_limit_usd) * 100)
|
||||
}
|
||||
if (sub.group?.monthly_limit_usd) {
|
||||
percentages.push(((sub.monthly_usage_usd || 0) / sub.group.monthly_limit_usd) * 100)
|
||||
}
|
||||
return percentages.length > 0 ? Math.max(...percentages) : 0
|
||||
}
|
||||
|
||||
function isUnlimited(sub: UserSubscription): boolean {
|
||||
return (
|
||||
!sub.group?.daily_limit_usd &&
|
||||
!sub.group?.weekly_limit_usd &&
|
||||
!sub.group?.monthly_limit_usd
|
||||
)
|
||||
}
|
||||
|
||||
function getProgressDotClass(sub: UserSubscription): string {
|
||||
// Unlimited subscriptions get a special color
|
||||
if (isUnlimited(sub)) {
|
||||
return 'bg-emerald-500'
|
||||
}
|
||||
const maxPercentage = getMaxUsagePercentage(sub)
|
||||
if (maxPercentage >= 90) return 'bg-red-500'
|
||||
if (maxPercentage >= 70) return 'bg-orange-500'
|
||||
return 'bg-green-500'
|
||||
}
|
||||
|
||||
function getProgressBarClass(used: number | undefined, limit: number | null | undefined): string {
|
||||
if (!limit || limit === 0) return 'bg-gray-400'
|
||||
const percentage = ((used || 0) / limit) * 100
|
||||
if (percentage >= 90) return 'bg-red-500'
|
||||
if (percentage >= 70) return 'bg-orange-500'
|
||||
return 'bg-green-500'
|
||||
}
|
||||
|
||||
function getProgressWidth(used: number | undefined, limit: number | null | undefined): string {
|
||||
if (!limit || limit === 0) return '0%'
|
||||
const percentage = Math.min(((used || 0) / limit) * 100, 100)
|
||||
return `${percentage}%`
|
||||
}
|
||||
|
||||
function formatUsage(used: number | undefined, limit: number | null | undefined): string {
|
||||
const usedValue = (used || 0).toFixed(2)
|
||||
const limitValue = limit?.toFixed(2) || '∞'
|
||||
return `$${usedValue}/$${limitValue}`
|
||||
}
|
||||
|
||||
function formatDaysRemaining(expiresAt: string): string {
|
||||
const now = new Date()
|
||||
const expires = new Date(expiresAt)
|
||||
const diff = expires.getTime() - now.getTime()
|
||||
if (diff < 0) return t('subscriptionProgress.expired')
|
||||
const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
|
||||
if (days === 0) return t('subscriptionProgress.expiresToday')
|
||||
if (days === 1) return t('subscriptionProgress.expiresTomorrow')
|
||||
return t('subscriptionProgress.daysRemaining', { days })
|
||||
}
|
||||
|
||||
function getDaysRemainingClass(expiresAt: string): string {
|
||||
const now = new Date()
|
||||
const expires = new Date(expiresAt)
|
||||
const diff = expires.getTime() - now.getTime()
|
||||
const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
|
||||
if (days <= 3) return 'text-red-600 dark:text-red-400'
|
||||
if (days <= 7) return 'text-orange-600 dark:text-orange-400'
|
||||
return 'text-gray-500 dark:text-dark-400'
|
||||
}
|
||||
|
||||
function toggleTooltip() {
|
||||
tooltipOpen.value = !tooltipOpen.value
|
||||
}
|
||||
|
||||
function closeTooltip() {
|
||||
tooltipOpen.value = false
|
||||
}
|
||||
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
|
||||
closeTooltip()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
// Trigger initial fetch if not already loaded
|
||||
// The actual data loading is handled by App.vue globally
|
||||
subscriptionStore.fetchActiveSubscriptions().catch((error) => {
|
||||
console.error('Failed to load subscriptions in SubscriptionProgressMini:', error)
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-4px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<label v-if="label" :for="id" class="input-label mb-1.5 block">
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<textarea
|
||||
:id="id"
|
||||
ref="textAreaRef"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:placeholder="placeholderText"
|
||||
:readonly="readonly"
|
||||
:rows="rows"
|
||||
:class="[
|
||||
'input w-full min-h-[80px] transition-all duration-200 resize-y',
|
||||
error ? 'input-error ring-2 ring-red-500/20' : '',
|
||||
disabled ? 'cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900' : ''
|
||||
]"
|
||||
@input="onInput"
|
||||
@change="$emit('change', ($event.target as HTMLTextAreaElement).value)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- Hint / Error Text -->
|
||||
<p v-if="error" class="input-error-text mt-1.5">
|
||||
{{ error }}
|
||||
</p>
|
||||
<p v-else-if="hint" class="input-hint mt-1.5">
|
||||
{{ hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: string | null | undefined
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
required?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
hint?: string
|
||||
id?: string
|
||||
rows?: number | string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
required: false,
|
||||
readonly: false,
|
||||
rows: 3
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: string): void
|
||||
(e: 'blur', event: FocusEvent): void
|
||||
(e: 'focus', event: FocusEvent): void
|
||||
}>()
|
||||
|
||||
const textAreaRef = ref<HTMLTextAreaElement | null>(null)
|
||||
const placeholderText = computed(() => props.placeholder || '')
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const value = (event.target as HTMLTextAreaElement).value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Expose focus method
|
||||
defineExpose({
|
||||
focus: () => textAreaRef.value?.focus(),
|
||||
select: () => textAreaRef.value?.select()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
class="pointer-events-none fixed right-4 top-4 z-[9999] space-y-3"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
>
|
||||
<TransitionGroup
|
||||
enter-active-class="transition ease-out duration-300"
|
||||
enter-from-class="opacity-0 translate-x-full"
|
||||
enter-to-class="opacity-100 translate-x-0"
|
||||
leave-active-class="transition ease-in duration-200"
|
||||
leave-from-class="opacity-100 translate-x-0"
|
||||
leave-to-class="opacity-0 translate-x-full"
|
||||
>
|
||||
<div
|
||||
v-for="toast in toasts"
|
||||
:key="toast.id"
|
||||
:class="[
|
||||
'pointer-events-auto min-w-[320px] max-w-md overflow-hidden rounded-lg shadow-lg',
|
||||
'bg-white dark:bg-dark-800',
|
||||
'border-l-4',
|
||||
getBorderColor(toast.type)
|
||||
]"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Icon -->
|
||||
<div class="mt-0.5 flex-shrink-0">
|
||||
<Icon
|
||||
:name="getToastIconName(toast.type)"
|
||||
size="md"
|
||||
:class="getIconColor(toast.type)"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<p v-if="toast.title" class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ toast.title }}
|
||||
</p>
|
||||
<p
|
||||
:class="[
|
||||
'text-sm leading-relaxed',
|
||||
toast.title
|
||||
? 'mt-1 text-gray-600 dark:text-gray-300'
|
||||
: 'text-gray-900 dark:text-white'
|
||||
]"
|
||||
>
|
||||
{{ toast.message }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Close button -->
|
||||
<button
|
||||
@click="removeToast(toast.id)"
|
||||
class="-m-1 flex-shrink-0 rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-dark-700 dark:hover:text-gray-300"
|
||||
aria-label="Close notification"
|
||||
>
|
||||
<Icon name="x" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress bar -->
|
||||
<div v-if="toast.duration" class="h-1 bg-gray-100 dark:bg-dark-700">
|
||||
<div
|
||||
:class="['h-full toast-progress', getProgressBarColor(toast.type)]"
|
||||
:style="{ animationDuration: `${toast.duration}ms` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const toasts = computed(() => appStore.toasts)
|
||||
|
||||
const getToastIconName = (type: string): 'checkCircle' | 'xCircle' | 'exclamationTriangle' | 'infoCircle' => {
|
||||
switch (type) {
|
||||
case 'success':
|
||||
return 'checkCircle'
|
||||
case 'error':
|
||||
return 'xCircle'
|
||||
case 'warning':
|
||||
return 'exclamationTriangle'
|
||||
case 'info':
|
||||
default:
|
||||
return 'infoCircle'
|
||||
}
|
||||
}
|
||||
|
||||
const getIconColor = (type: string): string => {
|
||||
const colors: Record<string, string> = {
|
||||
success: 'text-green-500',
|
||||
error: 'text-red-500',
|
||||
warning: 'text-yellow-500',
|
||||
info: 'text-blue-500'
|
||||
}
|
||||
return colors[type] || colors.info
|
||||
}
|
||||
|
||||
const getBorderColor = (type: string): string => {
|
||||
const colors: Record<string, string> = {
|
||||
success: 'border-green-500',
|
||||
error: 'border-red-500',
|
||||
warning: 'border-yellow-500',
|
||||
info: 'border-blue-500'
|
||||
}
|
||||
return colors[type] || colors.info
|
||||
}
|
||||
|
||||
const getProgressBarColor = (type: string): string => {
|
||||
const colors: Record<string, string> = {
|
||||
success: 'bg-green-500',
|
||||
error: 'bg-red-500',
|
||||
warning: 'bg-yellow-500',
|
||||
info: 'bg-blue-500'
|
||||
}
|
||||
return colors[type] || colors.info
|
||||
}
|
||||
|
||||
const removeToast = (id: string) => {
|
||||
appStore.hideToast(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toast-progress {
|
||||
width: 100%;
|
||||
animation-name: toast-progress-shrink;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes toast-progress-shrink {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
@click="toggle"
|
||||
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-800"
|
||||
:class="[modelValue ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600']"
|
||||
role="switch"
|
||||
:aria-checked="modelValue"
|
||||
>
|
||||
<span
|
||||
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||
:class="[modelValue ? 'translate-x-5' : 'translate-x-0']"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
function toggle() {
|
||||
emit('update:modelValue', !props.modelValue)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,555 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<!-- Admin: Full version badge with dropdown -->
|
||||
<template v-if="isAdmin">
|
||||
<button
|
||||
@click="toggleDropdown"
|
||||
class="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors"
|
||||
:class="[
|
||||
hasUpdate
|
||||
? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-800 dark:text-dark-400 dark:hover:bg-dark-700'
|
||||
]"
|
||||
:title="hasUpdate ? t('version.updateAvailable') : t('version.upToDate')"
|
||||
>
|
||||
<span v-if="currentVersion" class="font-medium">v{{ currentVersion }}</span>
|
||||
<span
|
||||
v-else
|
||||
class="h-3 w-12 animate-pulse rounded bg-gray-200 font-medium dark:bg-dark-600"
|
||||
></span>
|
||||
<!-- Update indicator -->
|
||||
<span v-if="hasUpdate" class="relative flex h-2 w-2">
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75"
|
||||
></span>
|
||||
<span class="relative inline-flex h-2 w-2 rounded-full bg-amber-500"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown -->
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="dropdownOpen"
|
||||
ref="dropdownRef"
|
||||
class="absolute left-0 z-50 mt-2 w-64 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dark-700 dark:bg-dark-800"
|
||||
>
|
||||
<!-- Header with refresh button -->
|
||||
<div
|
||||
class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-dark-700"
|
||||
>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-dark-300">{{
|
||||
t('version.currentVersion')
|
||||
}}</span>
|
||||
<button
|
||||
@click="refreshVersion(true)"
|
||||
class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-dark-200"
|
||||
:disabled="loading"
|
||||
:title="t('version.refresh')"
|
||||
>
|
||||
<Icon
|
||||
name="refresh"
|
||||
size="sm"
|
||||
:stroke-width="2"
|
||||
:class="{ 'animate-spin': loading }"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-6">
|
||||
<svg class="h-6 w-6 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<template v-else>
|
||||
<!-- Version display - centered and prominent -->
|
||||
<div class="mb-4 text-center">
|
||||
<div class="inline-flex items-center gap-2">
|
||||
<span
|
||||
v-if="currentVersion"
|
||||
class="text-2xl font-bold text-gray-900 dark:text-white"
|
||||
>v{{ currentVersion }}</span
|
||||
>
|
||||
<span v-else class="text-2xl font-bold text-gray-400 dark:text-dark-500">--</span>
|
||||
<!-- Show check mark when up to date -->
|
||||
<span
|
||||
v-if="!hasUpdate"
|
||||
class="flex h-5 w-5 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
|
||||
>
|
||||
<svg
|
||||
class="h-3 w-3 text-green-600 dark:text-green-400"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-dark-400">
|
||||
{{
|
||||
hasUpdate
|
||||
? t('version.latestVersion') + ': v' + latestVersion
|
||||
: t('version.upToDate')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Priority 1: Update error (must check before hasUpdate) -->
|
||||
<div v-if="updateError" class="space-y-2">
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800/50 dark:bg-red-900/20"
|
||||
>
|
||||
<div
|
||||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50"
|
||||
>
|
||||
<Icon
|
||||
name="x"
|
||||
size="sm"
|
||||
:stroke-width="2"
|
||||
class="text-red-600 dark:text-red-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-red-700 dark:text-red-300">
|
||||
{{ t('version.updateFailed') }}
|
||||
</p>
|
||||
<p class="truncate text-xs text-red-600/70 dark:text-red-400/70">
|
||||
{{ updateError }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Retry button -->
|
||||
<button
|
||||
@click="handleUpdate"
|
||||
:disabled="updating"
|
||||
class="flex w-full items-center justify-center gap-2 rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{{ t('version.retry') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Priority 2: Update success - need restart -->
|
||||
<div v-else-if="updateSuccess && needRestart" class="space-y-2">
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-800/50 dark:bg-green-900/20"
|
||||
>
|
||||
<div
|
||||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/50"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 text-green-600 dark:text-green-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-green-700 dark:text-green-300">
|
||||
{{ t('version.updateComplete') }}
|
||||
</p>
|
||||
<p class="text-xs text-green-600/70 dark:text-green-400/70">
|
||||
{{ t('version.restartRequired') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Restart button with countdown -->
|
||||
<button
|
||||
@click="handleRestart"
|
||||
:disabled="restarting"
|
||||
class="flex w-full items-center justify-center gap-2 rounded-lg bg-green-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-600 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<svg
|
||||
v-if="restarting"
|
||||
class="h-4 w-4 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
<template v-if="restarting">
|
||||
<span>{{ t('version.restarting') }}</span>
|
||||
<span v-if="restartCountdown > 0" class="tabular-nums"
|
||||
>({{ restartCountdown }}s)</span
|
||||
>
|
||||
</template>
|
||||
<span v-else>{{ t('version.restartNow') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Priority 3: Update available for source build - show git pull hint -->
|
||||
<div v-else-if="hasUpdate && !isReleaseBuild" class="space-y-2">
|
||||
<a
|
||||
v-if="releaseInfo?.html_url && releaseInfo.html_url !== '#'"
|
||||
:href="releaseInfo.html_url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 transition-colors hover:bg-amber-100 dark:border-amber-800/50 dark:bg-amber-900/20 dark:hover:bg-amber-900/30"
|
||||
>
|
||||
<div
|
||||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/50"
|
||||
>
|
||||
<Icon
|
||||
name="download"
|
||||
size="sm"
|
||||
:stroke-width="2"
|
||||
class="text-amber-600 dark:text-amber-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-amber-700 dark:text-amber-300">
|
||||
{{ t('version.updateAvailable') }}
|
||||
</p>
|
||||
<p class="text-xs text-amber-600/70 dark:text-amber-400/70">
|
||||
v{{ latestVersion }}
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
class="h-4 w-4 text-amber-500 transition-transform group-hover:translate-x-0.5 dark:text-amber-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
<!-- Source build hint -->
|
||||
<div
|
||||
class="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 p-2 dark:border-blue-800/50 dark:bg-blue-900/20"
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5 flex-shrink-0 text-blue-500 dark:text-blue-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-xs text-blue-600 dark:text-blue-400">
|
||||
{{ t('version.sourceModeHint') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Priority 4: Update available for release build - show update button -->
|
||||
<div v-else-if="hasUpdate && isReleaseBuild" class="space-y-2">
|
||||
<!-- Update info card -->
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800/50 dark:bg-amber-900/20"
|
||||
>
|
||||
<div
|
||||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/50"
|
||||
>
|
||||
<Icon
|
||||
name="download"
|
||||
size="sm"
|
||||
:stroke-width="2"
|
||||
class="text-amber-600 dark:text-amber-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-amber-700 dark:text-amber-300">
|
||||
{{ t('version.updateAvailable') }}
|
||||
</p>
|
||||
<p class="text-xs text-amber-600/70 dark:text-amber-400/70">
|
||||
v{{ latestVersion }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Update button -->
|
||||
<button
|
||||
@click="handleUpdate"
|
||||
:disabled="updating"
|
||||
class="flex w-full items-center justify-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<svg v-if="updating" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<Icon v-else name="download" size="sm" :stroke-width="2" />
|
||||
{{ updating ? t('version.updating') : t('version.updateNow') }}
|
||||
</button>
|
||||
|
||||
<!-- View release link -->
|
||||
<a
|
||||
v-if="releaseInfo?.html_url && releaseInfo.html_url !== '#'"
|
||||
:href="releaseInfo.html_url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center gap-1 text-xs text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-dark-200"
|
||||
>
|
||||
{{ t('version.viewChangelog') }}
|
||||
<Icon name="externalLink" size="xs" :stroke-width="2" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Priority 5: Up to date - show GitHub link -->
|
||||
<a
|
||||
v-else-if="releaseInfo?.html_url && releaseInfo.html_url !== '#'"
|
||||
:href="releaseInfo.html_url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center gap-2 py-2 text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-dark-200"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
|
||||
/>
|
||||
</svg>
|
||||
{{ t('version.viewRelease') }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<!-- Non-admin: Simple static version text -->
|
||||
<span v-else-if="version" class="text-xs text-gray-500 dark:text-dark-400">
|
||||
v{{ version }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAuthStore, useAppStore } from '@/stores'
|
||||
import { performUpdate, restartService } from '@/api/admin/system'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
version?: string
|
||||
}>()
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const isAdmin = computed(() => authStore.isAdmin)
|
||||
|
||||
const dropdownOpen = ref(false)
|
||||
const dropdownRef = ref<HTMLElement | null>(null)
|
||||
|
||||
// Use store's cached version state
|
||||
const loading = computed(() => appStore.versionLoading)
|
||||
const currentVersion = computed(() => appStore.currentVersion || props.version || '')
|
||||
const latestVersion = computed(() => appStore.latestVersion)
|
||||
const hasUpdate = computed(() => appStore.hasUpdate)
|
||||
const releaseInfo = computed(() => appStore.releaseInfo)
|
||||
const buildType = computed(() => appStore.buildType)
|
||||
|
||||
// Update process states (local to this component)
|
||||
const updating = ref(false)
|
||||
const restarting = ref(false)
|
||||
const needRestart = ref(false)
|
||||
const updateError = ref('')
|
||||
const updateSuccess = ref(false)
|
||||
const restartCountdown = ref(0)
|
||||
|
||||
// Only show update check for release builds (binary/docker deployment)
|
||||
const isReleaseBuild = computed(() => buildType.value === 'release')
|
||||
|
||||
function toggleDropdown() {
|
||||
dropdownOpen.value = !dropdownOpen.value
|
||||
}
|
||||
|
||||
function closeDropdown() {
|
||||
dropdownOpen.value = false
|
||||
}
|
||||
|
||||
async function refreshVersion(force = true) {
|
||||
if (!isAdmin.value) return
|
||||
|
||||
// Reset update states when refreshing
|
||||
updateError.value = ''
|
||||
updateSuccess.value = false
|
||||
needRestart.value = false
|
||||
|
||||
await appStore.fetchVersion(force)
|
||||
}
|
||||
|
||||
async function handleUpdate() {
|
||||
if (updating.value) return
|
||||
|
||||
updating.value = true
|
||||
updateError.value = ''
|
||||
updateSuccess.value = false
|
||||
|
||||
try {
|
||||
const result = await performUpdate()
|
||||
updateSuccess.value = true
|
||||
needRestart.value = result.need_restart
|
||||
// Clear version cache to reflect update completed
|
||||
appStore.clearVersionCache()
|
||||
} catch (error: unknown) {
|
||||
const err = error as { response?: { data?: { message?: string } }; message?: string }
|
||||
updateError.value = err.response?.data?.message || err.message || t('version.updateFailed')
|
||||
} finally {
|
||||
updating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRestart() {
|
||||
if (restarting.value) return
|
||||
|
||||
restarting.value = true
|
||||
restartCountdown.value = 8
|
||||
|
||||
try {
|
||||
await restartService()
|
||||
// Service will restart, page will reload automatically or show disconnected
|
||||
} catch (error) {
|
||||
// Expected - connection will be lost during restart
|
||||
console.log('Service restarting...')
|
||||
}
|
||||
|
||||
// Start countdown
|
||||
const countdownInterval = setInterval(() => {
|
||||
restartCountdown.value--
|
||||
if (restartCountdown.value <= 0) {
|
||||
clearInterval(countdownInterval)
|
||||
// Try to check if service is back before reload
|
||||
checkServiceAndReload()
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
async function checkServiceAndReload() {
|
||||
const maxRetries = 5
|
||||
const retryDelay = 1000
|
||||
|
||||
for (let i = 0; i < maxRetries; i++) {
|
||||
try {
|
||||
const response = await fetch('/health', {
|
||||
method: 'GET',
|
||||
cache: 'no-cache'
|
||||
})
|
||||
if (response.ok) {
|
||||
// Service is back, reload page
|
||||
window.location.reload()
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// Service not ready yet
|
||||
}
|
||||
|
||||
if (i < maxRetries - 1) {
|
||||
await new Promise((resolve) => setTimeout(resolve, retryDelay))
|
||||
}
|
||||
}
|
||||
|
||||
// After retries, reload anyway
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as Node
|
||||
const button = (event.target as Element).closest('button')
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(target) && !button?.contains(target)) {
|
||||
closeDropdown()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (isAdmin.value) {
|
||||
// Use cached version if available, otherwise fetch
|
||||
appStore.fetchVersion(false)
|
||||
}
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-4px);
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* NavigationProgress 组件单元测试
|
||||
*/
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { ref } from 'vue'
|
||||
import NavigationProgress from '../../common/NavigationProgress.vue'
|
||||
|
||||
// Mock useNavigationLoadingState
|
||||
const mockIsLoading = ref(false)
|
||||
|
||||
vi.mock('@/composables/useNavigationLoading', () => ({
|
||||
useNavigationLoadingState: () => ({
|
||||
isLoading: mockIsLoading
|
||||
})
|
||||
}))
|
||||
|
||||
describe('NavigationProgress', () => {
|
||||
beforeEach(() => {
|
||||
mockIsLoading.value = false
|
||||
})
|
||||
|
||||
it('isLoading=false 时进度条应该隐藏', () => {
|
||||
mockIsLoading.value = false
|
||||
const wrapper = mount(NavigationProgress)
|
||||
|
||||
const progressBar = wrapper.find('.navigation-progress')
|
||||
// v-show 会设置 display: none
|
||||
expect(progressBar.isVisible()).toBe(false)
|
||||
})
|
||||
|
||||
it('isLoading=true 时进度条应该可见', async () => {
|
||||
mockIsLoading.value = true
|
||||
const wrapper = mount(NavigationProgress)
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
const progressBar = wrapper.find('.navigation-progress')
|
||||
expect(progressBar.exists()).toBe(true)
|
||||
expect(progressBar.isVisible()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该有正确的 ARIA 属性', () => {
|
||||
mockIsLoading.value = true
|
||||
const wrapper = mount(NavigationProgress)
|
||||
|
||||
const progressBar = wrapper.find('.navigation-progress')
|
||||
expect(progressBar.attributes('role')).toBe('progressbar')
|
||||
expect(progressBar.attributes('aria-label')).toBe('Loading')
|
||||
expect(progressBar.attributes('aria-valuemin')).toBe('0')
|
||||
expect(progressBar.attributes('aria-valuemax')).toBe('100')
|
||||
})
|
||||
|
||||
it('进度条应该有动画 class', () => {
|
||||
mockIsLoading.value = true
|
||||
const wrapper = mount(NavigationProgress)
|
||||
|
||||
const bar = wrapper.find('.navigation-progress-bar')
|
||||
expect(bar.exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该正确响应 isLoading 状态变化', async () => {
|
||||
// 测试初始状态为 false
|
||||
mockIsLoading.value = false
|
||||
const wrapper = mount(NavigationProgress)
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
// 初始状态隐藏
|
||||
expect(wrapper.find('.navigation-progress').isVisible()).toBe(false)
|
||||
|
||||
// 卸载后重新挂载以测试 true 状态
|
||||
wrapper.unmount()
|
||||
|
||||
// 改变为 true 后重新挂载
|
||||
mockIsLoading.value = true
|
||||
const wrapper2 = mount(NavigationProgress)
|
||||
await wrapper2.vm.$nextTick()
|
||||
expect(wrapper2.find('.navigation-progress').isVisible()).toBe(true)
|
||||
|
||||
// 清理
|
||||
wrapper2.unmount()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,14 @@
|
||||
// Export all common components
|
||||
export { default as DataTable } from './DataTable.vue'
|
||||
export { default as Pagination } from './Pagination.vue'
|
||||
export { default as BaseDialog } from './BaseDialog.vue'
|
||||
export { default as ConfirmDialog } from './ConfirmDialog.vue'
|
||||
export { default as StatCard } from './StatCard.vue'
|
||||
export { default as Toast } from './Toast.vue'
|
||||
export { default as LoadingSpinner } from './LoadingSpinner.vue'
|
||||
export { default as EmptyState } from './EmptyState.vue'
|
||||
export { default as LocaleSwitcher } from './LocaleSwitcher.vue'
|
||||
export { default as ExportProgressDialog } from './ExportProgressDialog.vue'
|
||||
|
||||
// Export types
|
||||
export type { Column } from './types'
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user