feat(ui): 优化移动端响应式布局和交互体验

- 添加移动端侧边栏抽屉导航，支持触控滑动操作
- 优化 MaterialListNew 页面移动端适配，重构工具栏布局
- 统一日历组件默认语言为中文，增强本地化支持
- 更新依赖包添加 date-fns 和 vaul-vue 用于日期处理和抽屉组件
- 改进 iOS 滚动体验，添加触摸滚动优化
- 调整主布局结构，优化全屏高度和溢出处理
- 修复移动端分类切换器显示问题，优化按钮样式

frontend/app/web-gold/src/components/SidebarNav.vue

@@ -74,7 +74,7 @@ function isActive(item) {
 </script>
 
 <template>
-  <Sidebar collapsible="none" class="h-[calc(100vh-70px)] border-r">
+  <Sidebar collapsible="offcanvas" class="h-svh border-r">
     <SidebarContent>
       <SidebarGroup v-for="group in visibleNavConfig" :key="group.group">
         <SidebarGroupLabel>{{ group.group }}</SidebarGroupLabel>

frontend/app/web-gold/src/components/TopNav.vue

@@ -3,11 +3,13 @@ import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useUserStore } from '@/stores/user'
 import { useTheme } from '@/composables/useTheme'
+import { useSidebar } from '@/components/ui/sidebar'
 import UserDropdown from '@/components/UserDropdown.vue'
 import BrandLogo from '@/components/BrandLogo.vue'
 
 const userStore = useUserStore()
 const { isDark, toggleTheme } = useTheme()
+const { isMobile, toggleSidebar } = useSidebar()
 
 // 计算是否应该显示用户组件
 const shouldShowUser = computed(() => {
@@ -18,10 +20,16 @@ const shouldShowUser = computed(() => {
 
 <template>
   <header
-    class="p-1 fixed top-0 left-0 right-0 flex items-center px-6 h-[70px] bg-background/80 border-b border-border/50 z-50"
-    style="backdrop-filter: blur(12px)"
+    class="sticky top-0 flex items-center px-6 h-[70px] bg-background/80 border-b border-border/50 z-40 backdrop-blur-xl"
   >
     <div class="flex items-center gap-4 flex-1">
+      <button
+        v-if="isMobile"
+        class="flex items-center justify-center w-9 h-9 rounded-md hover:bg-accent transition-colors"
+        @click="toggleSidebar"
+      >
+        <Icon icon="lucide:menu" class="w-5 h-5" />
+      </button>
       <BrandLogo :size="36" />
     </div>
 
@@ -41,10 +49,6 @@ const shouldShowUser = computed(() => {
 </template>
 
 <style scoped>
-header {
-  backdrop-filter: blur(12px);
-}
-
 .theme-toggle {
   display: flex;
   align-items: center;

frontend/app/web-gold/src/components/ui/calendar/Calendar.vue

@@ -14,6 +14,7 @@ import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, Cale
 const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
   modelValue: undefined,
   layout: undefined,
+  locale: 'zh-CN',
 })
 const emits = defineEmits<CalendarRootEmits>()
 

frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendar.vue

@@ -6,7 +6,9 @@ import { RangeCalendarRoot, useForwardPropsEmits } from "reka-ui"
 import { cn } from "@/lib/utils"
 import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from "."
 
-const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes["class"] }>()
+const props = withDefaults(defineProps<RangeCalendarRootProps & { class?: HTMLAttributes["class"] }>(), {
+  locale: 'zh-CN',
+})
 
 const emits = defineEmits<RangeCalendarRootEmits>()