From 406d3f3cab58d2f783658242466f68bf8ade4d42 Mon Sep 17 00:00:00 2001 From: dexcoder6 Date: Fri, 19 Dec 2025 15:55:42 +0800 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E8=8F=9C=E5=8D=95=E6=A0=8F=E5=92=8C=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E8=AE=B0=E5=BD=95=E9=A1=B5=E9=9D=A2=20UI=20=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复移动端无法打开菜单栏的问题 - 在 app.ts 中添加 mobileOpen 状态管理 - 修复 AppHeader.vue 中移动端菜单按钮调用错误的方法 - 修复 AppSidebar.vue 使用本地 ref 而非全局状态的问题 - 添加移动端菜单自动关闭功能 - 点击菜单项后自动关闭侧边栏 - 添加 150ms 延迟以显示关闭动画 - 修复使用记录页面总消费卡片溢出问题 - 调整总消费卡片布局，将删除线价格移至说明行 - 添加 min-w-0 flex-1 防止内容溢出 - 保持与其他卡片高度一致 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- frontend/src/components/layout/AppHeader.vue | 2 +- frontend/src/components/layout/AppSidebar.vue | 15 +++++++++++++-- frontend/src/stores/app.ts | 19 +++++++++++++++++++ frontend/src/views/admin/UsageView.vue | 11 +++++------ frontend/src/views/user/UsageView.vue | 11 +++++------ 5 files changed, 43 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue index e432879e..5593c8bb 100644 --- a/frontend/src/components/layout/AppHeader.vue +++ b/frontend/src/components/layout/AppHeader.vue @@ -207,7 +207,7 @@ const pageDescription = computed(() => { }); function toggleMobileSidebar() { - appStore.toggleSidebar(); + appStore.toggleMobileSidebar(); } function toggleDropdown() { diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue index 3ae63abe..7d5cf341 100644 --- a/frontend/src/components/layout/AppSidebar.vue +++ b/frontend/src/components/layout/AppSidebar.vue @@ -36,6 +36,7 @@ class="sidebar-link mb-1" :class="{ 'sidebar-link-active': isActive(item.path) }" :title="sidebarCollapsed ? item.label : undefined" + @click="handleMenuItemClick" > @@ -58,6 +59,7 @@ class="sidebar-link mb-1" :class="{ 'sidebar-link-active': isActive(item.path) }" :title="sidebarCollapsed ? item.label : undefined" + @click="handleMenuItemClick" > @@ -77,6 +79,7 @@ class="sidebar-link mb-1" :class="{ 'sidebar-link-active': isActive(item.path) }" :title="sidebarCollapsed ? item.label : undefined" + @click="handleMenuItemClick" > @@ -142,9 +145,9 @@ const appStore = useAppStore(); const authStore = useAuthStore(); const sidebarCollapsed = computed(() => appStore.sidebarCollapsed); +const mobileOpen = computed(() => appStore.mobileOpen); const isAdmin = computed(() => authStore.isAdmin); const isDark = ref(document.documentElement.classList.contains('dark')); -const mobileOpen = ref(false); // Site settings const siteName = ref('Sub2API'); @@ -303,7 +306,15 @@ function toggleTheme() { } function closeMobile() { - mobileOpen.value = false; + appStore.setMobileOpen(false); +} + +function handleMenuItemClick() { + if (mobileOpen.value) { + setTimeout(() => { + appStore.setMobileOpen(false); + }, 150); + } } function isActive(path: string): boolean { diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts index 4313cb82..1bf1a6f3 100644 --- a/frontend/src/stores/app.ts +++ b/frontend/src/stores/app.ts @@ -12,6 +12,7 @@ export const useAppStore = defineStore('app', () => { // ==================== State ==================== const sidebarCollapsed = ref(false); + const mobileOpen = ref(false); const loading = ref(false); const toasts = ref([]); @@ -50,6 +51,21 @@ export const useAppStore = defineStore('app', () => { sidebarCollapsed.value = collapsed; } + /** + * Toggle mobile sidebar open state + */ + function toggleMobileSidebar(): void { + mobileOpen.value = !mobileOpen.value; + } + + /** + * Set mobile sidebar open state explicitly + * @param open - Whether mobile sidebar should be open + */ + function setMobileOpen(open: boolean): void { + mobileOpen.value = open; + } + /** * Set global loading state * @param isLoading - Whether app is in loading state @@ -257,6 +273,7 @@ export const useAppStore = defineStore('app', () => { return { // State sidebarCollapsed, + mobileOpen, loading, toasts, @@ -275,6 +292,8 @@ export const useAppStore = defineStore('app', () => { // Actions toggleSidebar, setSidebarCollapsed, + toggleMobileSidebar, + setMobileOpen, setLoading, showToast, showSuccess, diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue index 7c3f98aa..d0aec771 100644 --- a/frontend/src/views/admin/UsageView.vue +++ b/frontend/src/views/admin/UsageView.vue @@ -43,13 +43,12 @@ -
+

{{ t('usage.totalCost') }}

-
-

${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}

- ${{ (usageStats?.total_cost || 0).toFixed(4) }} -
-

{{ t('usage.actualCost') }} / {{ t('usage.standardCost') }}

+

${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}

+

+ {{ t('usage.actualCost') }} / ${{ (usageStats?.total_cost || 0).toFixed(4) }} {{ t('usage.standardCost') }} +

diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue index c81f4c87..eda1f021 100644 --- a/frontend/src/views/user/UsageView.vue +++ b/frontend/src/views/user/UsageView.vue @@ -43,13 +43,12 @@ -
+

{{ t('usage.totalCost') }}

-
-

${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}

- ${{ (usageStats?.total_cost || 0).toFixed(4) }} -
-

{{ t('usage.actualCost') }} / {{ t('usage.standardCost') }}

+

${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}

+

+ {{ t('usage.actualCost') }} / ${{ (usageStats?.total_cost || 0).toFixed(4) }} {{ t('usage.standardCost') }} +