智能日历 - Material You Web优化版

一个现代化的云端日历应用，采用Material You设计风格，完美适配PC端使用。

🎨 Material You设计特色

设计理念

• 个性化色彩系统: 基于Material Design 3的动态色彩系统
• 流动性布局: 智能响应式设计，从手机到大屏幕完美适配
• 自然交互: 符合直觉的手势和动画效果
• 可访问性优先: 支持深色模式、高对比度和减少动画偏好

视觉元素

• 圆角系统: 从4px到28px的统一圆角规范
• 阴影层级: 5个层级的阴影系统，营造空间感
• 动画时长: 50ms到600ms的分级动画时长
• 色彩对比: 符合WCAG标准的色彩对比度

💻 PC端优化特性

响应式布局

• 三栏式设计: 大屏幕(≥1200px)采用侧边栏+日历+事件列表的三栏布局
• 双栏式布局: 中等屏幕(768px-1199px)采用日历+事件的双栏布局
• 单栏式布局: 小屏幕(<768px)采用移动端友好的单栏布局

交互优化

• 鼠标悬停效果: 卡片悬停时的阴影和位移效果
• 键盘导航: 完整的键盘快捷键支持
• 智能侧边栏: 可折叠的功能侧边栏
• 浮动操作按钮: 响应式FAB，大屏时集成在侧边栏

性能优化

• 懒加载: 组件和图片的按需加载
• 动画优化: 使用原生动画引擎，减少重绘
• 缓存策略: 智能的数据缓存和状态管理
• 包体积优化: 按平台打包，减少冗余代码

🔧 技术栈

前端框架

• React Native: 跨平台开发框架
• Expo: 开发工具链和运行时
• React Native Paper: Material Design组件库
• React Native Calendars: 日历组件

后端服务

• Supabase: 开源的Firebase替代方案
• PostgreSQL: 关系型数据库
• 实时订阅: WebSocket实时数据同步
• 行级安全: 数据安全保护

样式系统

• Material Theme: 自定义Material You主题
• CSS-in-JS: 组件样式封装
• 响应式设计: 移动优先的设计方法
• 深色模式: 系统级深色主题支持

📱 功能特性

核心功能

• ✅ 事件管理: 创建、编辑、删除日历事件
• ✅ 全天事件: 支持全天和定时事件
• ✅ 地点信息: 事件地点标记和显示
• ✅ 事件描述: 丰富的事件详情描述
• ✅ 云端同步: 实时的多设备数据同步

用户体验

• ✅ 直观操作: 点击日期查看事件，点击事件查看详情
• ✅ 快速创建: 一键创建事件，智能时间建议
• ✅ 批量操作: 支持事件的批量管理
• ✅ 搜索过滤: 快速找到所需事件
• ✅ 导入导出: 支持日历数据的导入导出

高级特性

• 🔄 实时协作: 多用户实时协作编辑
• 🔔 智能提醒: 基于时间和地点的智能提醒
• 📊 数据分析: 日程统计和时间分析
• 🎯 AI建议: 基于历史数据的智能建议
• 🌐 多语言: 国际化支持

🚀 快速开始

环境要求

• Node.js 18+
• npm 或 yarn
• Expo CLI

安装依赖

npm install

配置环境变量

创建 .env 文件并配置Supabase连接信息：

EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

启动开发服务器

# Web端开发
npm run web

# iOS开发
npm run ios

# Android开发
npm run android

🎯 使用指南

PC端操作

1. 侧边栏导航: 使用左侧侧边栏快速创建事件和查看概览
2. 日历导航: 点击日历中的日期查看当天事件
3. 事件操作: 点击事件卡片查看详情，使用悬浮按钮进行编辑和删除
4. 主题切换: 使用右上角的主题切换按钮
5. 响应式体验: 调整浏览器窗口大小体验不同布局

移动端操作

1. 浮动按钮: 使用右下角的FAB创建新事件
2. 触摸操作: 点击和滑动操作查看和管理事件
3. 手势导航: 支持标准的移动端手势
4. 适配性: 自动适配不同屏幕尺寸

🔧 自定义配置

主题定制

在 lib/materialTheme.ts 中修改主题配置：

export const customTheme = {
  colors: {
    primary: '#YOUR_PRIMARY_COLOR',
    // 其他颜色配置...
  },
  // 其他主题配置...
};

布局定制

在组件样式中调整断点和布局：

const isLargeScreen = width >= 1200; // 自定义大屏断点
const isMediumScreen = width >= 768;  // 自定义中屏断点

📈 性能监控

构建分析

# 分析包体积
npx expo export --platform web --dev false

性能指标

• 首次内容绘制: < 1.5s
• 交互延迟: < 100ms
• 包体积: < 2MB (gzipped)
• 内存占用: < 50MB

🤝 贡献指南

代码规范

• 使用TypeScript进行类型检查
• 遵循Material Design规范
• 保持组件的可复用性
• 编写完整的JSDoc注释

提交规范

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 样式调整
refactor: 代码重构
test: 测试相关
chore: 工具配置

📄 许可证

MIT License - 详见 LICENSE 文件

🔗 相关链接

• Material Design 3
• React Native Paper
• Supabase
• Expo

---

🌟 主要改进总结

✨ Material You设计实现

1. 动态色彩系统 - 完整的Material Design 3色彩规范
2. 流动性设计 - 适应不同屏幕尺寸的响应式布局
3. 自然动画 - 符合Material Motion的动画系统
4. 深度和层次 - 使用阴影和elevation创建空间感

💻 PC端优化

1. 三栏式布局 - 充分利用大屏幕空间
2. 侧边栏导航 - 快捷操作和信息预览
3. 鼠标交互 - 悬停效果和右键菜单
4. 键盘快捷键 - 提升操作效率

🎨 视觉美化

1. 现代化卡片设计 - 圆角、阴影、间距的精心设计
2. 统一的图标系统 - Material Icons的一致性使用
3. 优雅的过渡动画 - 页面切换和状态变化的流畅体验
4. 可访问性支持 - 颜色对比度、字体大小、屏幕阅读器支持

⚡ 性能优化

1. 智能组件选择 - 根据平台和屏幕尺寸加载不同组件
2. 动画性能优化 - 使用原生动画避免主线程阻塞
3. 代码分割 - 按需加载减少初始包体积
4. 缓存策略 - 智能的数据缓存和状态管理

这个优化版本将原来的移动端应用完美适配到了PC端，同时保持了跨平台的兼容性，为用户提供了现代、美观、高效的日历管理体验。