i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-10-05 00:47:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #679 from zhefox/main

Browse Source 
fix(frontend): 优化移动端弹窗并完善提供商配额刷新
This commit is contained in:
ZheFox
2026-07-16 15:48:49 +08:00
committed by GitHub
parent d6215d9dec 1333efdad5
commit 7dc919e8e3
13 changed files with 200 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/dialog/Dialog.vue
+6 -6
View File
@@ -22,7 +22,7 @@
/>
</Transition>
<div class="relative flex h-full items-end justify-center overflow-hidden px-3 py-4 text-center sm:items-center sm:p-0 pointer-events-none">
<div class="relative flex h-full items-end justify-center overflow-hidden text-center sm:items-center sm:p-0 pointer-events-none">
<!-- 对话框内容 -->
<Transition
enter-active-class="duration-300 ease-out"
@@ -34,7 +34,7 @@
>
<div
v-if="isOpen"
class="relative flex max-h-[calc(100dvh-2rem)] w-full transform flex-col overflow-hidden rounded-lg border border-border bg-background text-left shadow-2xl transition-all pointer-events-auto sm:my-8 sm:w-full sm:max-h-[calc(100dvh-4rem)]"
class="relative flex max-h-[100dvh] w-full transform flex-col overflow-hidden rounded-t-xl border border-x-0 border-b-0 border-border bg-background text-left shadow-2xl transition-all pointer-events-auto sm:my-8 sm:w-full sm:max-h-[calc(100dvh-4rem)] sm:rounded-lg sm:border"
:style="{ zIndex: contentZIndex }"
:class="maxWidthClass"
@click.stop
@@ -43,7 +43,7 @@
<slot name="header">
<div
v-if="title"
class="shrink-0 border-b border-border px-4 py-4 sm:px-6"
class="shrink-0 border-b border-border px-4 pb-3 pt-4 sm:px-6 sm:py-4"
>
<div class="flex items-center gap-3">
<div
@@ -57,12 +57,12 @@
/>
</div>
<div class="flex-1 min-w-0">
<h3 class="text-lg font-semibold text-foreground leading-tight">
<h3 class="text-balance text-base font-semibold leading-tight text-foreground sm:text-lg">
{{ title }}
</h3>
<p
v-if="description"
class="text-xs text-muted-foreground"
class="mt-0.5 text-pretty text-xs leading-4 text-muted-foreground"
>
{{ description }}
</p>
@@ -80,7 +80,7 @@
<!-- Footer 区域：如果有 footer 插槽，自动添加样式 -->
<div
v-if="slots.footer"
class="shrink-0 border-t border-border bg-muted/10 px-4 py-4 sm:px-6 flex flex-row-reverse gap-3"
class="flex shrink-0 flex-col-reverse items-stretch gap-2 border-t border-border bg-background/95 px-4 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-sm [&>button]:w-full sm:flex-row-reverse sm:items-center sm:gap-3 sm:bg-muted/10 sm:px-6 sm:py-4 sm:[&>button]:w-auto"
>
<slot name="footer" />
</div>
frontend/src/features/providers/components/ProviderDetailDrawer.vue
+5 -37
View File
@@ -993,10 +993,6 @@ import type {
} from '@/api/endpoints/types'
import { formatApiFormatShort } from '@/api/endpoints/types/api-format'
import { isOAuthAccountProviderType, isKeyManagedProviderType } from '../utils/providerTypeUtils'
import {
isProviderQuotaAutoRefreshCoolingDown,
markProviderQuotaAutoRefreshAttempt,
} from '../utils/quotaAutoRefreshCooldown'
import { getOAuthOrgBadge } from '@/utils/oauthIdentity'
import { getOAuthRefreshFeedback } from '@/utils/oauthRefreshFeedback'
import { formatCompactNumber } from '@/utils/format'
@@ -1022,6 +1018,7 @@ import {
formatCodexResetCreditDays,
getCodexResetCreditAvailableCount as getCodexResetCreditAvailableCountFromSnapshot,
getVisibleCodexResetCreditItems as getVisibleCodexResetCreditItemsFromSnapshot,
mergeCodexQuotaDisplays,
} from './codex-reset-credit-display'
// 扩展端点类型,包含密钥列表
@@ -1600,7 +1597,7 @@ async function handleRefreshOAuth(key: EndpointAPIKey) {
}
// Antigravity：token 刷新后可能完成了账号激活，触发配额获取
// （不 emit('refresh')，避免触发全局 provider 余额刷新）
void autoRefreshQuotaInBackground({ ignoreCooldown: true })
void autoRefreshQuotaInBackground()
} catch (err: unknown) {
showError(localizedApiError(err, 'Token 刷新失败'), legacyT('错误'))
} finally {
@@ -1951,20 +1948,6 @@ function getCodexQuotaDisplayFromSnapshot(quota: QuotaStatusSnapshot | null | un
return Object.keys(display).length > 0 ? display : null
}
function getCodexQuotaDisplayUpdatedAt(display: CodexUpstreamMetadata | null | undefined): number | null {
const updatedAt = Number(display?.updated_at)
return Number.isFinite(updatedAt) ? updatedAt : null
}
function codexDisplayHasUsage(display: CodexUpstreamMetadata | null | undefined): boolean {
return !!display && (
display.primary_used_percent !== undefined
|| display.secondary_used_percent !== undefined
|| display.spark_primary_used_percent !== undefined
|| display.spark_secondary_used_percent !== undefined
)
}
function codexDisplayHasResetCredits(display: CodexUpstreamMetadata | null | undefined): boolean {
const count = display?.reset_credits?.available_count
return typeof count === 'number' && Number.isFinite(count)
@@ -1973,20 +1956,7 @@ function codexDisplayHasResetCredits(display: CodexUpstreamMetadata | null | und
function getCodexQuotaDisplay(key: EndpointAPIKey): CodexUpstreamMetadata | null {
const snapshotDisplay = getCodexQuotaDisplayFromSnapshot(getQuotaSnapshotForProvider(key, 'codex'))
const metadataDisplay = getCodexQuotaDisplayFromMetadata(key.upstream_metadata?.codex)
if (!snapshotDisplay) return metadataDisplay
if (!metadataDisplay) return snapshotDisplay
if (!codexDisplayHasUsage(snapshotDisplay) && codexDisplayHasUsage(metadataDisplay)) {
return metadataDisplay
}
const snapshotUpdatedAt = getCodexQuotaDisplayUpdatedAt(snapshotDisplay)
const metadataUpdatedAt = getCodexQuotaDisplayUpdatedAt(metadataDisplay)
if (metadataUpdatedAt !== null && (snapshotUpdatedAt === null || metadataUpdatedAt > snapshotUpdatedAt)) {
return metadataDisplay
}
return snapshotDisplay
return mergeCodexQuotaDisplays(snapshotDisplay, metadataDisplay)
}
function hasCodexQuotaDisplayData(key: EndpointAPIKey): boolean {
@@ -2714,7 +2684,7 @@ function applyQuotaResults(
}
// 通用的自动刷新配额函数（支持 Codex、Gemini CLI、Antigravity、Kiro、Windsurf 和 ChatGPT Web）
async function autoRefreshQuotaInBackground(options: { ignoreCooldown?: boolean } = {}) {
async function autoRefreshQuotaInBackground() {
const providerId = props.providerId
if (!providerId) return
if (refreshingQuota.value) return
@@ -2740,7 +2710,6 @@ async function autoRefreshQuotaInBackground(options: { ignoreCooldown?: boolean
shouldRefresh = shouldAutoRefreshChatGPTWebQuota()
}
if (!shouldRefresh) return
if (!options.ignoreCooldown && isProviderQuotaAutoRefreshCoolingDown(providerId)) return
let hadCachedQuota = false
if (providerType === 'codex') {
@@ -2760,7 +2729,6 @@ async function autoRefreshQuotaInBackground(options: { ignoreCooldown?: boolean
}
refreshingQuota.value = true
markProviderQuotaAutoRefreshAttempt(providerId)
try {
const result = await refreshProviderQuota(providerId)
const applied = applyQuotaResults(result.results)
@@ -2804,7 +2772,7 @@ async function handleKeyChanged() {
await Promise.all([loadEndpoints(), loadMappingPreview()])
emit('refresh')
// 添加/修改 key 后自动获取已支持 provider 的配额（新 key 的 upstream_metadata 为空）
void autoRefreshQuotaInBackground({ ignoreCooldown: true })
void autoRefreshQuotaInBackground()
}
// 切换密钥启用状态
frontend/src/features/providers/components/ProxyNodeSelect.vue
+4 -2
View File
@@ -28,7 +28,7 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { computed, onMounted } from 'vue'
import {
Select,
SelectTrigger,
@@ -67,8 +67,10 @@ const nodeOptions = computed(() => {
/** 供父组件调用：启用代理时懒加载节点列表 */
function ensureLoaded() {
proxyNodesStore.ensureLoaded()
return proxyNodesStore.ensureLoaded()
}
onMounted(ensureLoaded)
defineExpose({ ensureLoaded })
</script>
frontend/src/features/providers/components/__tests__/ProxyNodeSelect.spec.ts
+52
View File
@@ -0,0 +1,52 @@
import { describe, expect, it, vi } from 'vitest'
import { createApp, defineComponent, h } from 'vue'
import ProxyNodeSelect from '@/features/providers/components/ProxyNodeSelect.vue'
import { createI18n } from '@/i18n'
const proxyNodesStore = vi.hoisted(() => ({
loading: false,
nodes: [],
onlineNodes: [],
ensureLoaded: vi.fn(() => Promise.resolve()),
}))
vi.mock('@/stores/proxy-nodes', () => ({
useProxyNodesStore: () => proxyNodesStore,
}))
vi.mock('@/components/ui', async () => {
const { defineComponent, h } = await import('vue')
const passthrough = (name: string) => defineComponent({
name,
setup(_, { slots }) {
return () => h('div', slots.default?.())
},
})
return {
Select: passthrough('SelectStub'),
SelectTrigger: passthrough('SelectTriggerStub'),
SelectValue: passthrough('SelectValueStub'),
SelectContent: passthrough('SelectContentStub'),
SelectItem: passthrough('SelectItemStub'),
}
})
describe('ProxyNodeSelect', () => {
it('loads proxy nodes when mounted', () => {
const root = document.createElement('div')
const app = createApp(defineComponent({
setup() {
return () => h(ProxyNodeSelect, { modelValue: '' })
},
}))
app.use(createI18n())
app.mount(root)
expect(proxyNodesStore.ensureLoaded).toHaveBeenCalledTimes(1)
app.unmount()
})
})
frontend/src/features/providers/components/__tests__/codex-reset-credit-display.spec.ts
+30
View File
@@ -5,10 +5,40 @@ import {
formatCodexResetCreditDays,
getCodexResetCreditAvailableCount,
getVisibleCodexResetCreditItems,
mergeCodexQuotaDisplays,
} from '@/features/providers/components/codex-reset-credit-display'
import type { QuotaResetCreditsSnapshot } from '@/api/endpoints/types'
describe('codex reset credit display helpers', () => {
it('keeps reset credits and usage windows when snapshot sources are partially populated', () => {
const merged = mergeCodexQuotaDisplays(
{
updated_at: 1_700_000_100,
primary_used_percent: 25,
reset_credits: {
available_count: 2,
},
},
{
updated_at: 1_700_000_000,
secondary_used_percent: 40,
reset_credits: {
credits: [{ id: 'credit-1', expires_at: 1_700_086_400 }],
},
},
)
expect(merged).toMatchObject({
updated_at: 1_700_000_100,
primary_used_percent: 25,
secondary_used_percent: 40,
reset_credits: {
available_count: 2,
credits: [{ id: 'credit-1', expires_at: 1_700_086_400 }],
},
})
})
it('keeps zero available credits displayable but non-positive detail items hidden', () => {
const snapshot: QuotaResetCreditsSnapshot = {
available_count: 0,
frontend/src/features/providers/components/codex-reset-credit-display.ts
+33
View File
@@ -1,8 +1,41 @@
import type {
CodexUpstreamMetadata,
QuotaResetCreditSnapshot,
QuotaResetCreditsSnapshot,
} from '@/api/endpoints/types'
function codexQuotaUpdatedAt(display: CodexUpstreamMetadata | null | undefined): number | null {
const updatedAt = Number(display?.updated_at)
return Number.isFinite(updatedAt) ? updatedAt : null
}
export function mergeCodexQuotaDisplays(
snapshotDisplay: CodexUpstreamMetadata | null | undefined,
metadataDisplay: CodexUpstreamMetadata | null | undefined,
): CodexUpstreamMetadata | null {
if (!snapshotDisplay) return metadataDisplay ?? null
if (!metadataDisplay) return snapshotDisplay
const snapshotUpdatedAt = codexQuotaUpdatedAt(snapshotDisplay)
const metadataUpdatedAt = codexQuotaUpdatedAt(metadataDisplay)
const metadataIsNewer = metadataUpdatedAt !== null
&& (snapshotUpdatedAt === null || metadataUpdatedAt > snapshotUpdatedAt)
const preferred = metadataIsNewer ? metadataDisplay : snapshotDisplay
const fallback = metadataIsNewer ? snapshotDisplay : metadataDisplay
const resetCredits = preferred.reset_credits || fallback.reset_credits
? {
...fallback.reset_credits,
...preferred.reset_credits,
}
: undefined
return {
...fallback,
...preferred,
...(resetCredits ? { reset_credits: resetCredits } : {}),
}
}
export interface CodexResetCreditDisplayItem {
id?: string | null
displayKey: string
frontend/src/features/providers/utils/__tests__/quotaAutoRefreshCooldown.spec.ts
-52
View File
@@ -1,52 +0,0 @@
import { afterEach, describe, expect, it } from 'vitest'
import {
AUTO_QUOTA_REFRESH_COOLDOWN_SECONDS,
isProviderQuotaAutoRefreshCoolingDown,
markProviderQuotaAutoRefreshAttempt,
resetProviderQuotaAutoRefreshCooldownForTests,
} from '../quotaAutoRefreshCooldown'
describe('quota auto refresh cooldown', () => {
afterEach(() => {
resetProviderQuotaAutoRefreshCooldownForTests()
})
it('starts cooldown after recording an auto refresh attempt', () => {
markProviderQuotaAutoRefreshAttempt('provider-1', 1_000)
expect(isProviderQuotaAutoRefreshCoolingDown('provider-1', 1_000)).toBe(true)
expect(
isProviderQuotaAutoRefreshCoolingDown(
'provider-1',
1_000 + AUTO_QUOTA_REFRESH_COOLDOWN_SECONDS - 1,
),
).toBe(true)
})
it('expires cooldown after the configured window', () => {
markProviderQuotaAutoRefreshAttempt('provider-1', 1_000)
expect(
isProviderQuotaAutoRefreshCoolingDown(
'provider-1',
1_000 + AUTO_QUOTA_REFRESH_COOLDOWN_SECONDS,
),
).toBe(false)
})
it('tracks cooldown independently per provider', () => {
markProviderQuotaAutoRefreshAttempt('provider-1', 1_000)
markProviderQuotaAutoRefreshAttempt('provider-2', 1_200)
expect(isProviderQuotaAutoRefreshCoolingDown('provider-1', 1_301)).toBe(false)
expect(isProviderQuotaAutoRefreshCoolingDown('provider-2', 1_301)).toBe(true)
})
it('ignores empty provider ids', () => {
markProviderQuotaAutoRefreshAttempt('', 1_000)
expect(isProviderQuotaAutoRefreshCoolingDown('', 1_001)).toBe(false)
expect(isProviderQuotaAutoRefreshCoolingDown(null, 1_001)).toBe(false)
})
})
frontend/src/features/providers/utils/quotaAutoRefreshCooldown.ts
-36
View File
@@ -1,36 +0,0 @@
const AUTO_QUOTA_REFRESH_COOLDOWN_SECONDS = 5 * 60
const lastAutoQuotaRefreshAttemptAtByProvider = new Map<string, number>()
function normalizeUnixSeconds(value: number): number {
return Math.max(Math.floor(value), 0)
}
export function isProviderQuotaAutoRefreshCoolingDown(
providerId: string | null | undefined,
nowSeconds = Math.floor(Date.now() / 1000),
): boolean {
const id = String(providerId || '').trim()
if (!id) return false
const lastAttemptAt = lastAutoQuotaRefreshAttemptAtByProvider.get(id)
if (lastAttemptAt == null) return false
return normalizeUnixSeconds(nowSeconds) - lastAttemptAt < AUTO_QUOTA_REFRESH_COOLDOWN_SECONDS
}
export function markProviderQuotaAutoRefreshAttempt(
providerId: string | null | undefined,
nowSeconds = Math.floor(Date.now() / 1000),
): void {
const id = String(providerId || '').trim()
if (!id) return
lastAutoQuotaRefreshAttemptAtByProvider.set(id, normalizeUnixSeconds(nowSeconds))
}
export function resetProviderQuotaAutoRefreshCooldownForTests(): void {
lastAutoQuotaRefreshAttemptAtByProvider.clear()
}
export { AUTO_QUOTA_REFRESH_COOLDOWN_SECONDS }
frontend/src/features/users/components/UserGroupAccessControlFields.vue
+19 -7
View File
@@ -1,6 +1,6 @@
<template>
<div class="space-y-4 border-t border-border/60 pt-5">
<div class="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-1 border-b border-border/60 pb-2">
<div class="flex items-center justify-between gap-2 border-b border-border/60 pb-2">
<span class="text-sm font-medium">{{ legacyT('组权限') }}</span>
<span class="flex items-center gap-1 text-[11px] text-muted-foreground">
{{ legacyT('组权限叠加，Key 可再收窄') }}
@@ -9,11 +9,11 @@
<TooltipTrigger as-child>
<button
type="button"
class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-border/70 bg-muted/40 text-muted-foreground outline-none transition-colors hover:border-primary/50 hover:text-primary focus-visible:border-primary/60 focus-visible:text-primary"
class="inline-flex h-10 w-10 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted/60 hover:text-primary focus-visible:ring-2 focus-visible:ring-ring"
:title="helpText"
:aria-label="legacyT('查看组权限合并规则')"
>
<Info class="h-3 w-3" />
<Info class="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent class="max-w-72 text-xs leading-5">
@@ -27,11 +27,14 @@
<div class="space-y-2">
<Label class="text-sm font-medium">{{ legacyT('允许的提供商') }}</Label>
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<div class="flex w-full items-center sm:w-auto sm:shrink-0">
<div class="flex min-h-10 w-full items-center gap-2 sm:w-auto sm:shrink-0">
<Switch
:model-value="form.allowed_providers_mode === 'unrestricted'"
@update:model-value="setProvidersUnrestricted"
/>
<span class="text-xs text-muted-foreground sm:sr-only">
{{ legacyT(form.allowed_providers_mode === 'unrestricted' ? '不限制' : '选择提供商') }}
</span>
</div>
<div class="min-w-0 flex-1">
<MultiSelect
@@ -50,11 +53,14 @@
<div class="space-y-2">
<Label class="text-sm font-medium">{{ legacyT('允许的端点') }}</Label>
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<div class="flex w-full items-center sm:w-auto sm:shrink-0">
<div class="flex min-h-10 w-full items-center gap-2 sm:w-auto sm:shrink-0">
<Switch
:model-value="form.allowed_api_formats_mode === 'unrestricted'"
@update:model-value="setApiFormatsUnrestricted"
/>
<span class="text-xs text-muted-foreground sm:sr-only">
{{ legacyT(form.allowed_api_formats_mode === 'unrestricted' ? '不限制' : '选择端点') }}
</span>
</div>
<div class="min-w-0 flex-1">
<MultiSelect
@@ -73,11 +79,14 @@
<div class="space-y-2">
<Label class="text-sm font-medium">{{ legacyT('允许的模型') }}</Label>
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<div class="flex w-full items-center sm:w-auto sm:shrink-0">
<div class="flex min-h-10 w-full items-center gap-2 sm:w-auto sm:shrink-0">
<Switch
:model-value="form.allowed_models_mode === 'unrestricted'"
@update:model-value="setModelsUnrestricted"
/>
<span class="text-xs text-muted-foreground sm:sr-only">
{{ legacyT(form.allowed_models_mode === 'unrestricted' ? '不限制' : '选择模型') }}
</span>
</div>
<div class="min-w-0 flex-1">
<MultiSelect
@@ -96,11 +105,14 @@
<div class="space-y-2">
<Label class="text-sm font-medium">{{ legacyT('速率限制 (请求/分钟)') }}</Label>
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<div class="flex w-full items-center sm:w-auto sm:shrink-0">
<div class="flex min-h-10 w-full items-center gap-2 sm:w-auto sm:shrink-0">
<Switch
:model-value="form.rate_limit_mode === 'system'"
@update:model-value="setSystemRateLimit"
/>
<span class="text-xs text-muted-foreground sm:sr-only">
{{ legacyT(form.rate_limit_mode === 'system' ? '系统默认' : '自定义') }}
</span>
</div>
<div class="min-w-0 flex-1">
<Input
frontend/src/features/users/components/UserGroupEditorHeader.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<template>
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
<div class="mb-4 flex items-start justify-between gap-3">
<div class="min-w-0">
<h4 class="truncate text-base font-semibold text-foreground">
<h4 class="text-balance break-words text-base font-semibold text-foreground">
{{ legacyT(editing ? '编辑分组' : '新建分组') }}
</h4>
<p class="text-xs text-muted-foreground">
@@ -15,7 +15,7 @@
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
class="h-10 w-10"
:class="isDefault ? 'text-emerald-500 hover:text-emerald-500' : ''"
:disabled="saving || isDefault"
:title="legacyT(isDefault ? '默认注册组' : '设为默认注册组')"
@@ -26,7 +26,7 @@
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
class="h-10 w-10"
:disabled="saving || isDefault"
:title="legacyT('删除分组')"
@click="$emit('delete')"
frontend/src/features/users/components/UserGroupListPanel.vue
+6 -6
View File
@@ -1,11 +1,11 @@
<template>
<div class="rounded-xl border border-border/70 bg-muted/20 p-3">
<div class="mb-3 flex items-center justify-between gap-2">
<div class="rounded-lg border border-border/70 bg-muted/20 p-2.5 sm:rounded-xl sm:p-3">
<div class="mb-2 flex items-center justify-between gap-2 sm:mb-3">
<Label class="text-sm font-semibold">{{ legacyT('分组') }}</Label>
<Button
variant="ghost"
size="icon"
class="h-8 w-8"
class="h-10 w-10"
:title="legacyT('新建分组')"
@click="$emit('create')"
>
@@ -27,7 +27,7 @@
</div>
<div
v-else
class="max-h-60 space-y-1.5 overflow-y-auto lg:max-h-none lg:overflow-visible"
class="flex snap-x snap-mandatory gap-2 overflow-x-auto overscroll-x-contain pb-1 lg:block lg:max-h-none lg:space-y-1.5 lg:overflow-visible lg:pb-0"
>
<button
v-for="group in groups"
@@ -48,7 +48,7 @@
</Badge>
</span>
</span>
<ChevronRight class="h-4 w-4 shrink-0 text-muted-foreground" />
<ChevronRight class="hidden h-4 w-4 shrink-0 text-muted-foreground lg:block" />
</button>
</div>
</div>
@@ -76,7 +76,7 @@ const { legacyT } = useI18n()
function groupButtonClass(groupId: string): string {
return cn(
'flex w-full items-center gap-2 rounded-lg border px-3 py-2 transition-colors',
'flex min-h-10 w-auto min-w-[8.5rem] shrink-0 snap-start items-center gap-2 rounded-lg border px-3 py-2 transition-colors lg:w-full lg:min-w-0',
props.selectedGroupId === groupId
? 'border-primary/50 bg-primary/10'
: 'border-transparent hover:border-border hover:bg-background',
frontend/src/features/users/components/UserGroupsDialog.vue
+2 -2
View File
@@ -7,7 +7,7 @@
persistent
@update:model-value="handleDialogUpdate"
>
<div class="grid gap-4 lg:min-h-[560px] lg:grid-cols-[17rem_minmax(0,1fr)]">
<div class="grid gap-3 lg:min-h-[560px] lg:grid-cols-[17rem_minmax(0,1fr)] lg:gap-4">
<UserGroupListPanel
:loading="loading"
:groups="groups"
@@ -16,7 +16,7 @@
@select="selectGroup"
/>
<div class="min-w-0 rounded-xl border border-border/70 bg-background p-3 sm:p-4">
<div class="min-w-0 bg-background sm:rounded-xl sm:border sm:border-border/70 sm:p-4">
<UserGroupEditorHeader
:editing="Boolean(editingGroupId)"
:is-default="Boolean(selectedGroup?.is_default)"
frontend/src/features/users/components/__tests__/mobile-dialog-layout.spec.ts
+39
View File
@@ -0,0 +1,39 @@
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import { describe, expect, it } from 'vitest'
function readSource(path: string): string {
return readFileSync(resolve(process.cwd(), path), 'utf8')
}
describe('mobile dialog layout', () => {
it('uses a full-height mobile sheet with stacked full-width actions', () => {
const source = readSource('src/components/ui/dialog/Dialog.vue')
expect(source).toContain('max-h-[100dvh]')
expect(source).toContain('flex-col-reverse')
expect(source).toContain('[&>button]:w-full')
expect(source).toContain('sm:flex-row-reverse')
expect(source).toContain('sm:[&>button]:w-auto')
})
it('keeps group navigation compact before the editor on mobile', () => {
const dialogSource = readSource('src/features/users/components/UserGroupsDialog.vue')
const listSource = readSource('src/features/users/components/UserGroupListPanel.vue')
expect(dialogSource).toContain('lg:grid-cols-[17rem_minmax(0,1fr)]')
expect(listSource).toContain('snap-x snap-mandatory')
expect(listSource).toContain('overflow-x-auto')
expect(listSource).toContain('min-h-10')
expect(listSource).toContain('lg:w-full')
})
it('provides mobile state labels and 40px icon targets', () => {
const accessSource = readSource('src/features/users/components/UserGroupAccessControlFields.vue')
const headerSource = readSource('src/features/users/components/UserGroupEditorHeader.vue')
expect(accessSource).toContain('sm:sr-only')
expect(accessSource).toContain('h-10 w-10')
expect(headerSource.match(/h-10 w-10/g)).toHaveLength(2)
})
})