First commit
This commit is contained in:
shaw
426
frontend/src/components/common/ProxySelector.vue
Normal file
426
frontend/src/components/common/ProxySelector.vue
Normal file
@@ -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">
|
||||
<svg
|
||||
:class="['w-5 h-5 transition-transform duration-200', isOpen && 'rotate-180']"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</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">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||
</svg>
|
||||
<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="w-4 h-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="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z" />
|
||||
</svg>
|
||||
</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>
|
||||
<svg
|
||||
v-if="modelValue === null"
|
||||
class="w-4 h-4 text-primary-500"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
</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="flex-1 min-w-0">
|
||||
<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="flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 dark:bg-dark-600 text-gray-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="flex-shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 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="flex-shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400"
|
||||
>
|
||||
{{ t('admin.proxies.testFailed') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{{ 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="w-3.5 h-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>
|
||||
<svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<svg
|
||||
v-if="modelValue === proxy.id"
|
||||
class="w-4 h-4 text-primary-500 flex-shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
</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 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 w-full flex items-center justify-between gap-2;
|
||||
@apply px-4 py-2.5 rounded-xl 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:outline-none focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500;
|
||||
@apply hover:border-gray-300 dark:hover:border-dark-500;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
.select-trigger-open {
|
||||
@apply ring-2 ring-primary-500/30 border-primary-500;
|
||||
}
|
||||
|
||||
.select-trigger-disabled {
|
||||
@apply bg-gray-100 dark:bg-dark-900 cursor-not-allowed opacity-60;
|
||||
}
|
||||
|
||||
.select-value {
|
||||
@apply flex-1 text-left truncate;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
@apply flex-shrink-0 text-gray-400 dark:text-dark-400;
|
||||
}
|
||||
|
||||
.select-dropdown {
|
||||
@apply absolute z-[100] w-full 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;
|
||||
}
|
||||
|
||||
.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-1 flex 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 p-1.5 rounded-lg;
|
||||
@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:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.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 p-1 rounded;
|
||||
@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:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
/* 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>
|
||||
Reference in New Issue
Block a user