Init
This commit is contained in:
290
README.md
Normal file
290
README.md
Normal file
@@ -0,0 +1,290 @@
|
||||
# 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
|
||||
- 发送邮件
|
||||
- 社交媒体
|
||||
|
||||
---
|
||||
|
||||
**注意：** 本项目仅用于学习和研究目的，不用于商业用途。所有设计灵感来源于公开可访问的资源。
|
||||
Reference in New Issue
Block a user