fix(webui): improve mobile UI/UX layout and responsiveness

Mobile Layout Fixes:
- Fix config page horizontal overflow by adding min-width: 0 constraints
- Fix sticky action buttons positioning on config page
- Add loading states to config save/cancel buttons
- Reduce topbar padding and icon spacing for mobile
- Make search button fill space between logo and action icons
- Fix search modal header layout with close button visibility

Component Improvements:
- ab-topbar: Flex search button with "Click to search" text on mobile
- ab-status-bar: Reduce button sizes and gaps on mobile
- ab-fold-panel: Add max-width and overflow constraints
- ab-setting: Add max-width: 100% to prevent input overflow
- ab-search-modal: Reduce padding and element sizes on mobile
- ab-mobile-nav: Increase label font-size from 10px to 11px
- ab-sidebar: Fix toggle animation (rotateY → rotate)

Calendar & Bangumi Pages:
- Add lazy loading to poster images for better performance
- Move unknown air day items to separate section below grid
- Add actionable CTA button to empty state with useAddRss hook

Login Page:
- Add will-change: transform for background animation performance

i18n:
- Add click_to_search translation key for mobile search button
- Add add_rss_btn translation for empty state CTA

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Estrella Pan
2026-01-25 23:09:53 +01:00
parent 6b6ba75d80
commit f764279a51
16 changed files with 379 additions and 105 deletions

View File

@@ -86,6 +86,7 @@ declare global {
const toRefs: typeof import('vue')['toRefs']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAddRss: typeof import('../../src/hooks/useAddRss')['useAddRss']
const useApi: typeof import('../../src/hooks/useApi')['useApi']
const useAppInfo: typeof import('../../src/hooks/useAppInfo')['useAppInfo']
const useAttrs: typeof import('vue')['useAttrs']

View File

@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
ConfigPasskey: typeof import('./../../src/components/setting/config-passkey.vue')['default']
ConfigPlayer: typeof import('./../../src/components/setting/config-player.vue')['default']
ConfigProxy: typeof import('./../../src/components/setting/config-proxy.vue')['default']
ConfigSearchProvider: typeof import('./../../src/components/setting/config-search-provider.vue')['default']
MediaQuery: typeof import('./../../src/components/media-query.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']