My App Store

一个基于苹果 App Store 源码架构构建的现代化前端应用，使用 SvelteKit + TypeScript 开发。

✨ 特性

• 🎨 现代化 UI 设计 - 基于苹果设计语言的组件系统
• 🌍 多语言支持 - 内置国际化系统，支持 8 种语言
• 🎭 主题系统 - 支持亮色/暗色主题，多种颜色预设
• ♿ 无障碍优先 - 完整的 ARIA 支持和键盘导航
• 📱 响应式设计 - 适配所有设备尺寸
• ⚡ 高性能 - 基于 Svelte 的极致性能优化
• 🔧 TypeScript - 完整的类型安全
• 🧩 模块化架构 - 可复用的组件和工具库

🏗️ 架构设计

核心系统

• 路由系统 - 基于 SvelteKit 的文件路由 + 自定义路由状态管理
• 状态管理 - Svelte stores + 自定义状态管理器
• 主题系统 - CSS 变量 + 动态主题切换
• 国际化 - 基于 Intl API 的完整 i18n 解决方案
• 组件库 - 从苹果源码提取并现代化改造的组件系统

目录结构

src/
├── lib/
│   ├── components/          # 组件库
│   │   └── base/           # 基础组件 (Button, Modal, etc.)
│   ├── stores/             # 状态管理
│   │   ├── router.ts       # 路由状态
│   │   └── theme.ts        # 主题状态
│   ├── i18n/               # 国际化
│   ├── styles/             # 样式系统
│   │   └── variables.scss  # 设计系统变量
│   └── utils/              # 工具函数
├── routes/                 # 页面路由
│   ├── +layout.svelte      # 全局布局
│   └── +page.svelte        # 首页
└── app.html               # HTML 模板

🚀 快速开始

环境要求

• Node.js 18+
• npm 或 pnpm

安装依赖

cd my-app-store
npm install

开发模式

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产版本

npm run preview

🎨 组件系统

Button 组件

支持多种样式变体和尺寸：

<Button variant="primary" size="lg">
    <span slot="icon-before">🚀</span>
    Get Started
</Button>

变体类型：

• primary - 主要按钮
• secondary - 次要按钮
• tertiary - 第三级按钮
• pill - 药丸按钮
• text - 文本按钮
• alert - 警告按钮

尺寸：

• sm - 小尺寸 (32px)
• md - 中等尺寸 (40px)
• lg - 大尺寸 (48px)

Modal 组件

功能完整的模态框组件：

<Modal size="md" ariaLabel="Settings Modal">
    <h2>Settings</h2>
    <p>Modal content here...</p>
</Modal>

特性：

• 焦点陷阱和键盘导航
• 多种尺寸选项
• 自动 polyfill 支持
• 无障碍友好

🌍 国际化

支持的语言

• 🇺🇸 English
• 🇨🇳 中文
• 🇯🇵 日本語
• 🇰🇷 한국어
• 🇪🇸 Español
• 🇫🇷 Français
• 🇩🇪 Deutsch
• 🇸🇦 العربية

使用翻译

<script>
    import { t } from '~/lib/i18n';
</script>

<h1>{$t('navigation.home')}</h1>

添加新语言

1. 在 src/lib/i18n/index.ts 中添加语言配置
2. 添加对应的翻译内容
3. 更新 supportedLocales 数组

🎭 主题系统

预设主题

• Apple - 苹果蓝
• Google - 谷歌蓝
• GitHub - 深色主题
• Spotify - 绿色主题

自定义主题

import { theme } from '~/lib/stores/theme';

// 设置主色调
theme.setPrimaryColor('#FF6B6B');

// 应用预设
theme.applyPreset('spotify');

// 切换主题模式
theme.setMode('dark');

CSS 变量

主题系统基于 CSS 变量，支持动态切换：

.my-component {
    background-color: var(--color-primary);
    color: var(--color-gray-900);
    border-radius: var(--border-radius-md);
}

📱 响应式设计

使用移动优先的响应式设计：

.component {
    // 移动端样式
    padding: var(--spacing-sm);
    
    @media (min-width: 768px) {
        // 平板和桌面样式
        padding: var(--spacing-md);
    }
}

♿ 无障碍支持

• 完整的 ARIA 标签
• 键盘导航支持
• 焦点管理
• 屏幕阅读器友好
• 高对比度模式
• 减少动画选项

🔧 开发工具

代码检查

npm run lint

类型检查

npm run check

代码格式化

npm run format

📦 部署

Vercel

npm i -g vercel
vercel

Netlify

npm run build
# 上传 build 目录

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["node", "build"]

🤝 贡献指南

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 开启 Pull Request

📄 许可证

本项目基于 MIT 许可证开源。

🙏 致谢

• 感谢苹果公司提供的优秀设计灵感
• 感谢 Svelte 团队的出色框架
• 感谢所有开源贡献者

📞 联系方式

如有问题或建议，请通过以下方式联系：

• 创建 Issue
• 发送邮件
• 社交媒体

---

注意： 本项目仅用于学习和研究目的，不用于商业用途。所有设计灵感来源于公开可访问的资源。