🛍️ M-SHOP - 移动端电商应用
一个基于 Svelte 5 和 Tailwind CSS 4 构建的现代化移动端电商应用，展示了最新的 Web 技术栈和最佳实践。
✨ 特性亮点
🚀 技术栈
- Svelte 5 - 采用最新的 Runes 响应式系统
- SvelteKit 2 - 全栈框架，提供服务端渲染和路由
- TypeScript - 类型安全的开发体验
- Tailwind CSS 4 - 原子化 CSS 框架
- Vite 7 - 极速的构建工具
📱 核心功能
- ✅ 商品浏览 - 分类筛选、轮播图、热门推荐
- ✅ 商品搜索 - 实时搜索、搜索历史、热门关键词
- ✅ 商品详情 - 完整的商品信息、数量选择、规格选项
- ✅ 购物车 - 添加/删除商品、数量调整、价格计算
- ✅ 个人中心 - 用户信息、订单管理、会员服务
- ✅ 底部导航 - 流畅的多页面切换体验
🎨 设计特点
- 移动端优化 - 完美适配 iOS 和 Android
- 流畅动画 - 使用 Svelte 内置的 transition 系统
- 响应式设计 - 支持不同尺寸的移动设备
- iOS 安全区域 - 适配刘海屏和虚拟 Home 键
- 触摸优化 - 精心调校的触摸反馈和手势
🔥 Svelte 5 新特性
- $state - 简洁的状态管理
- $derived - 自动计算派生状态
- $effect - 副作用管理
- $props - 类型安全的组件属性
📦 项目结构
clone-apps-apple/
├── src/
│ ├── lib/
│ │ ├── components/ # 可复用组件
│ │ │ ├── Header.svelte
│ │ │ ├── BottomNav.svelte
│ │ │ └── ProductCard.svelte
│ │ ├── stores/ # 全局状态管理
│ │ │ └── cart.svelte.ts
│ │ ├── data/ # 模拟数据
│ │ │ └── products.ts
│ │ └── types/ # TypeScript 类型定义
│ │ └── index.ts
│ └── routes/ # 页面路由
│ ├── +page.svelte # 首页
│ ├── search/ # 搜索页
│ ├── cart/ # 购物车
│ ├── profile/ # 个人中心
│ └── product/[id]/ # 商品详情
├── static/ # 静态资源
├── package.json
├── svelte.config.js
├── tailwind.config.js
└── vite.config.ts
🚀 快速开始
环境要求
- Node.js 18+
- pnpm 8+ (推荐) 或 npm/yarn
安装依赖
# 使用 pnpm
pnpm install
# 或使用 npm
npm install
# 或使用 yarn
yarn install
开发模式
# 启动开发服务器
pnpm dev
# 或
npm run dev
访问 http://localhost:5173 查看应用。
📱 建议使用浏览器的移动端模拟器查看效果：
- 打开 Chrome DevTools (F12)
- 点击 "Toggle device toolbar" (Ctrl+Shift+M / Cmd+Shift+M)
- 选择 iPhone 或 Android 设备
构建生产版本
# 构建
pnpm build
# 预览构建结果
pnpm preview
📸 功能截图
首页
- 轮播广告位
- 商品分类导航
- 热门推荐商品
- 商品网格展示
商品详情
- 大图展示
- 价格和折扣信息
- 商品描述
- 数量选择器
- 加入购物车/立即购买
购物车
- 商品列表
- 数量调整
- 全选/取消全选
- 价格统计
- 结算功能
搜索页
- 搜索历史
- 热门搜索
- 实时搜索结果
- 商品推荐
个人中心
- 用户信息卡片
- 订单统计
- 功能菜单
- 会员服务
🛠️ 技术实现
状态管理
使用 Svelte 5 的 $state Rune 实现全局购物车状态：
class CartStore {
items = $state<CartItem[]>([]);
get count(): number {
return this.items.reduce((sum, item) => sum + item.quantity, 0);
}
add(product: Product): void {
// ...
}
}
export const cart = new CartStore();
响应式计算
使用 $derived 自动计算派生状态：
const filteredProducts = $derived(
selectedCategory === 'all' ? products : products.filter((p) => p.category === selectedCategory)
);
路由和导航
使用 SvelteKit 的文件系统路由：
/- 首页/product/[id]- 动态商品详情页/search- 搜索页/cart- 购物车/profile- 个人中心
动画效果
使用 Svelte 内置的 transition 系统：
<div in:fly={{ y: 20, duration: 300 }} out:fade>
<!-- 内容 -->
</div>
🎯 最佳实践
1. 组件化设计
- 提取可复用组件（Header, BottomNav, ProductCard）
- 保持组件职责单一
- 使用 TypeScript 类型约束
2. 状态管理
- 全局状态使用 Svelte Store
- 组件内状态使用
$state - 派生状态使用
$derived
3. 性能优化
- 使用
{#key}块优化列表渲染 - 图片懒加载
- 代码分割和动态导入
4. 移动端适配
- viewport meta 标签配置
- iOS 安全区域适配
- 触摸事件优化
- 禁用双击缩放
5. 用户体验
- 流畅的过渡动画
- 即时的触摸反馈
- 清晰的视觉层次
- 一致的交互模式
🔧 配置说明
Tailwind CSS 配置
项目使用 Tailwind CSS 4，配置文件位于 @tailwindcss/vite 插件中。
自定义颜色：
- 主色调：橙色 (
orange-500: #f97316) - 强调色：粉色 (
pink-500: #ec4899)
TypeScript 配置
启用了严格模式，确保类型安全：
{
"compilerOptions": {
"strict": true,
"moduleResolution": "bundler"
}
}
📝 待实现功能
- 用户登录/注册
- 订单结算流程
- 支付集成
- 地址管理
- 优惠券系统
- 商品评价
- 收藏夹
- 订单追踪
- 推送通知
- 深色模式
🤝 贡献指南
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
📄 许可证
MIT License
🙏 致谢
- Svelte - 构建用户界面的全新方式
- SvelteKit - 基于 Svelte 的全栈框架
- Tailwind CSS - 实用优先的 CSS 框架
- Vite - 下一代前端构建工具
📮 联系方式
如有任何问题或建议，欢迎通过以下方式联系：
- 提交 Issue
- 发送邮件
⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！
