my-app-store/README.md

# 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

### 安装依赖

```bash
cd my-app-store
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 🎨 组件系统

### Button 组件

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

```svelte
<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 组件

功能完整的模态框组件：

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

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

## 🌍 国际化

### 支持的语言

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

### 使用翻译

```svelte
<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 - 绿色主题

### 自定义主题

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

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

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

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

### CSS 变量

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

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

## 📱 响应式设计

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

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

## ♿ 无障碍支持

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

## 🔧 开发工具

### 代码检查

```bash
npm run lint
```

### 类型检查

```bash
npm run check
```

### 代码格式化

```bash
npm run format
```

## 📦 部署

### Vercel

```bash
npm i -g vercel
vercel
```

### Netlify

```bash
npm run build
# 上传 build 目录
```

### Docker

```dockerfile
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
- 发送邮件
- 社交媒体

---

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