Fun/SearcjGal-frontend

Fork 0

mirror of https://github.com/Moe-Sakura/frontend.git synced 2026-03-15 04:53:18 +08:00

Files

AdingApkgg 4d44d5b620 251127

2025-11-27 13:06:33 +08:00

5.8 KiB

Raw Permalink Blame History

贡献指南

感谢你考虑为 SearchGal Frontend 做出贡献！

🤝 如何贡献

报告 Bug

如果你发现了 Bug，请创建一个 Issue 并包含以下信息：

Bug 描述 - 清晰简洁地描述问题
复现步骤 - 详细的步骤来复现问题
预期行为 - 你期望发生什么
实际行为 - 实际发生了什么
环境信息 - 浏览器版本、操作系统等
截图 - 如果适用，添加截图帮助解释问题

提出新功能

如果你有新功能的想法：

先检查 Issues 看是否已有类似建议
创建一个新的 Issue，标记为 enhancement
详细描述功能的用途和实现思路
等待维护者的反馈

提交代码

开发流程

Fork 仓库
```
# 在 GitHub 上点击 Fork 按钮
```

克隆你的 Fork

git clone https://github.com/YOUR_USERNAME/frontend.git
cd frontend

添加上游仓库

git remote add upstream https://github.com/Moe-Sakura/frontend.git

创建特性分支

git checkout -b feature/your-feature-name
# 或
git checkout -b fix/your-bug-fix

安装依赖
```
pnpm install
```
开发
```
pnpm run dev
```

提交更改

git add .
git commit -m "feat: add some feature"

推送到你的 Fork

git push origin feature/your-feature-name

创建 Pull Request
- 在 GitHub 上打开你的 Fork
- 点击 "New Pull Request"
- 填写 PR 描述

Commit 规范

我们使用 Conventional Commits 规范：

feat: - 新功能
fix: - Bug 修复
docs: - 文档更新
style: - 代码格式（不影响代码运行的变动）
refactor: - 重构（既不是新增功能，也不是修改 bug 的代码变动）
perf: - 性能优化
test: - 增加测试
chore: - 构建过程或辅助工具的变动

示例：

feat: add search history feature
fix: resolve background image loading issue
docs: update README with new API endpoints
style: format code with prettier
refactor: extract search logic to separate module
perf: optimize image caching strategy

📝 代码规范

TypeScript

使用 TypeScript 编写所有代码
为函数参数和返回值添加类型注解
避免使用 any 类型
使用接口（interface）定义数据结构

// ✅ 好的示例
interface SearchResult {
  platform: string
  title: string
  url: string
  tags?: string[]
}

function searchGame(query: string): Promise<SearchResult[]> {
  // ...
}

// ❌ 不好的示例
function searchGame(query: any): any {
  // ...
}

Vue 组件

使用 Vue 3 Composition API
使用 <script setup> 语法
组件名使用 PascalCase
Props 和 Emits 使用 TypeScript 类型

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  title: string
  count?: number
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
})

const emit = defineEmits<{
  update: [value: string]
}>()
</script>

CSS/Tailwind

优先使用 Tailwind CSS 工具类
自定义样式使用 <style scoped>
避免使用内联样式
使用语义化的类名

<!-- ✅ 好的示例 -->
<template>
  <div class="flex items-center gap-2 p-4 rounded-lg bg-white shadow-md">
    <span class="text-gray-700 font-medium">{{ title }}</span>
  </div>
</template>

<!-- ❌ 不好的示例 -->
<template>
  <div style="display: flex; padding: 16px;">
    <span>{{ title }}</span>
  </div>
</template>

文件命名

组件文件：PascalCase.vue (例如：SearchHeader.vue)
工具函数：camelCase.ts (例如：imageDB.ts)
类型定义：camelCase.d.ts (例如：pace-js.d.ts)
常量文件：UPPER_CASE.ts (例如：API_CONSTANTS.ts)

目录结构

src/
├── api/              # API 接口
├── components/       # Vue 组件
├── stores/           # Pinia 状态管理
├── utils/            # 工具函数
├── types/            # TypeScript 类型定义
├── App.vue           # 根组件
└── main.ts           # 入口文件

🧪 测试

目前项目还没有测试，但我们欢迎添加测试的贡献：

单元测试使用 Vitest
组件测试使用 Vue Test Utils
E2E 测试使用 Playwright

📚 文档

为新功能添加文档
更新 README.md
添加代码注释（特别是复杂逻辑）
使用 JSDoc 注释函数

/**
 * 搜索游戏资源
 * @param query - 搜索关键词
 * @param mode - 搜索模式（game 或 patch）
 * @returns Promise<SearchResult[]>
 */
async function searchGame(query: string, mode: 'game' | 'patch'): Promise<SearchResult[]> {
  // ...
}

✅ Pull Request 检查清单

在提交 PR 之前，请确保：

代码遵循项目的代码规范
已添加必要的注释
已更新相关文档
代码可以正常运行
没有引入新的 lint 错误
Commit 信息符合规范
PR 描述清晰，说明了改动内容

🎯 开发建议

性能优化

使用 computed 而不是 watch 来计算派生状态
避免不必要的响应式数据
使用 v-memo 优化列表渲染
图片使用懒加载

用户体验

添加加载状态指示
提供错误提示
使用平滑的过渡动画
确保响应式设计

代码质量

保持函数简短（< 50 行）
单一职责原则
避免深层嵌套
使用有意义的变量名

💬 交流

GitHub Issues - 报告 Bug 和功能请求
GitHub Discussions - 一般讨论和问题

📄 许可证

通过贡献代码，你同意你的贡献将在 MIT License 下发布。

再次感谢你的贡献！🎉

5.8 KiB Raw Permalink Blame History Unescape Escape