From 5423dd1fe8d3fa7452ae6cb5f576f60f2d9fe5d7 Mon Sep 17 00:00:00 2001 From: tukuaiai Date: Thu, 18 Dec 2025 16:13:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=8A=A8=E5=8C=96=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E4=B8=B0=E5=AF=8C=20-=20=E6=B7=BB=E5=8A=A0=20CI/CD?= =?UTF-8?q?=E3=80=81=E5=AE=9E=E6=88=98=E6=A1=88=E4=BE=8B=E5=92=8C=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E8=AF=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 新增内容 ### GitHub Actions 工作流 - ci.yml: Markdown lint、链接检查、项目结构验证 - welcome.yml: 自动欢迎新贡献者 - labeler.yml: PR 自动标签 ### Issue 模板 - prompt_contribution.md: 提示词贡献模板 - documentation.md: 文档改进模板 - config.yml: 模板配置（含社区链接） ### 实战案例 - 02-blog-system.md: 个人博客系统（Next.js + MDX） - 04-cli-tool.md: 命令行工具（Python + Click） - 05-chrome-extension.md: Chrome 扩展（网页笔记助手） ### 编程提示词 - debug-expert.md: 调试专家提示词 - code-review.md: 代码审查提示词 - architecture-design.md: 架构设计提示词 ## 相关 Issues - #5 完善 Wiki 文档 - #6 添加更多实战案例 - #7 扩充提示词库 - #8 激活社区讨论 --- .github/ISSUE_TEMPLATE/config.yml | 11 + .github/ISSUE_TEMPLATE/documentation.md | 29 ++ .github/ISSUE_TEMPLATE/prompt_contribution.md | 38 ++ .github/labeler.yml | 45 ++ .github/workflows/ci.yml | 60 +++ .github/workflows/labeler.yml | 16 + .github/workflows/welcome.yml | 42 ++ i18n/zh/documents/实战案例/02-blog-system.md | 209 +++++++++ i18n/zh/documents/实战案例/04-cli-tool.md | 298 +++++++++++++ .../documents/实战案例/05-chrome-extension.md | 402 ++++++++++++++++++ i18n/zh/documents/实战案例/README.md | 97 ++++- .../coding_prompts/architecture-design.md | 299 +++++++++++++ i18n/zh/prompts/coding_prompts/code-review.md | 272 ++++++++++++ .../zh/prompts/coding_prompts/debug-expert.md | 247 +++++++++++ 14 files changed, 2049 insertions(+), 16 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/config.yml create mode 100644 .github/ISSUE_TEMPLATE/documentation.md create mode 100644 .github/ISSUE_TEMPLATE/prompt_contribution.md create mode 100644 .github/labeler.yml create mode 100644 .github/workflows/ci.yml create mode 100644 .github/workflows/labeler.yml create mode 100644 .github/workflows/welcome.yml create mode 100644 i18n/zh/documents/实战案例/02-blog-system.md create mode 100644 i18n/zh/documents/实战案例/04-cli-tool.md create mode 100644 i18n/zh/documents/实战案例/05-chrome-extension.md create mode 100644 i18n/zh/prompts/coding_prompts/architecture-design.md create mode 100644 i18n/zh/prompts/coding_prompts/code-review.md create mode 100644 i18n/zh/prompts/coding_prompts/debug-expert.md diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..d46df39 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,11 @@ +blank_issues_enabled: true +contact_links: + - name: 💬 Telegram 交流群 + url: https://t.me/glue_coding + about: 加入我们的 Telegram 群组讨论问题 + - name: 📢 Telegram 频道 + url: https://t.me/tradecat_ai_channel + about: 关注项目更新和资讯 + - name: 📖 在线提示词表格 + url: https://docs.google.com/spreadsheets/d/1ngoQOhJqdguwNAilCl1joNwTje7FWWN9WiI2bo5VhpU/edit?gid=2093180351 + about: 查看和使用提示词库 diff --git a/.github/ISSUE_TEMPLATE/documentation.md b/.github/ISSUE_TEMPLATE/documentation.md new file mode 100644 index 0000000..353921b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/documentation.md @@ -0,0 +1,29 @@ +--- +name: 文档改进 +about: 报告文档问题或建议改进 +title: "[Docs]: " +labels: documentation +assignees: '' + +--- + +**文档位置** +请提供需要改进的文档路径或链接。 + +**问题类型** +- [ ] 内容错误 +- [ ] 内容过时 +- [ ] 内容缺失 +- [ ] 表述不清 +- [ ] 链接失效 +- [ ] 格式问题 +- [ ] 翻译问题 + +**问题描述** +清晰描述文档存在的问题。 + +**建议改进** +如果有具体的改进建议，请在此描述。 + +**附加信息** +任何其他相关信息。 diff --git a/.github/ISSUE_TEMPLATE/prompt_contribution.md b/.github/ISSUE_TEMPLATE/prompt_contribution.md new file mode 100644 index 0000000..8ed55e6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/prompt_contribution.md @@ -0,0 +1,38 @@ +--- +name: 提示词贡献 +about: 分享一个有用的提示词 +title: "[Prompt]: " +labels: prompts, contribution +assignees: '' + +--- + +**提示词名称** +给这个提示词起一个简洁的名字。 + +**提示词分类** +- [ ] 系统提示词 (system_prompts) +- [ ] 编程提示词 (coding_prompts) +- [ ] 用户提示词 (user_prompts) +- [ ] 辅助提示词 (assistant_prompts) +- [ ] 元提示词 (meta_prompts) + +**提示词内容** +``` +在这里粘贴你的提示词内容 +``` + +**使用场景** +描述这个提示词适用于什么场景。 + +**效果示例** +如果可能，提供使用这个提示词的效果示例或截图。 + +**适用模型** +- [ ] Claude +- [ ] GPT +- [ ] Gemini +- [ ] 其他: ___ + +**附加说明** +任何其他需要说明的内容。 diff --git a/.github/labeler.yml b/.github/labeler.yml new file mode 100644 index 0000000..f68de68 --- /dev/null +++ b/.github/labeler.yml @@ -0,0 +1,45 @@ +# 文档相关 +documentation: + - changed-files: + - any-glob-to-any-file: + - '**/*.md' + - 'docs/**' + - 'i18n/**/documents/**' + +# 提示词相关 +prompts: + - changed-files: + - any-glob-to-any-file: + - 'i18n/**/prompts/**' + - 'libs/external/prompts-library/**' + +# 技能相关 +skills: + - changed-files: + - any-glob-to-any-file: + - 'i18n/**/skills/**' + +# 工具相关 +tools: + - changed-files: + - any-glob-to-any-file: + - 'libs/**' + - 'backups/**' + +# 国际化 +i18n: + - changed-files: + - any-glob-to-any-file: + - 'i18n/**' + +# CI/CD +ci: + - changed-files: + - any-glob-to-any-file: + - '.github/**' + +# 中文内容 +chinese: + - changed-files: + - any-glob-to-any-file: + - 'i18n/zh/**' diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..955ba0b --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,60 @@ +name: CI + +on: + push: + branches: [main, master] + pull_request: + branches: [main, master] + +jobs: + lint-markdown: + name: Lint Markdown + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + - name: Install markdownlint-cli + run: npm install -g markdownlint-cli + - name: Run markdownlint + run: markdownlint '**/*.md' --ignore node_modules --ignore libs/external || true + + check-links: + name: Check Links + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Link Checker + uses: lycheeverse/lychee-action@v1 + with: + args: --verbose --no-progress './**/*.md' --exclude-path libs/external + fail: false + + validate-structure: + name: Validate Project Structure + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Check required files + run: | + echo "Checking required files..." + files=("README.md" "LICENSE" "CONTRIBUTING.md" "CODE_OF_CONDUCT.md" "AGENTS.md" "CLAUDE.md") + for file in "${files[@]}"; do + if [ -f "$file" ]; then + echo "✓ $file exists" + else + echo "✗ $file missing" + fi + done + - name: Check i18n structure + run: | + echo "Checking i18n directories..." + for lang in zh en; do + if [ -d "i18n/$lang" ]; then + echo "✓ i18n/$lang exists" + else + echo "✗ i18n/$lang missing" + fi + done diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml new file mode 100644 index 0000000..a92905b --- /dev/null +++ b/.github/workflows/labeler.yml @@ -0,0 +1,16 @@ +name: Auto Labeler + +on: + pull_request: + types: [opened, synchronize] + +jobs: + label: + runs-on: ubuntu-latest + permissions: + contents: read + pull-requests: write + steps: + - uses: actions/labeler@v5 + with: + repo-token: "${{ secrets.GITHUB_TOKEN }}" diff --git a/.github/workflows/welcome.yml b/.github/workflows/welcome.yml new file mode 100644 index 0000000..d8d7b9b --- /dev/null +++ b/.github/workflows/welcome.yml @@ -0,0 +1,42 @@ +name: Welcome New Contributors + +on: + issues: + types: [opened] + pull_request: + types: [opened] + +jobs: + welcome: + runs-on: ubuntu-latest + permissions: + issues: write + pull-requests: write + steps: + - uses: actions/first-interaction@v1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-message: | + 👋 感谢您提交第一个 Issue！ + + 我们非常重视您的反馈。请确保： + - 已阅读 [贡献指南](CONTRIBUTING.md) + - 提供了足够的上下文信息 + - 如果是 Bug，请提供复现步骤 + + 我们会尽快回复您！🚀 + + --- + Thanks for opening your first issue! We'll get back to you soon. + pr-message: | + 🎉 感谢您提交第一个 Pull Request！ + + 这是您对本项目的首次贡献，我们非常感激！请确保： + - PR 描述清晰说明了改动内容 + - 代码符合项目规范 + - 已更新相关文档（如适用） + + 我们会尽快审核您的代码！💪 + + --- + Thanks for your first PR! We'll review it soon. diff --git a/i18n/zh/documents/实战案例/02-blog-system.md b/i18n/zh/documents/实战案例/02-blog-system.md new file mode 100644 index 0000000..c4c3acf --- /dev/null +++ b/i18n/zh/documents/实战案例/02-blog-system.md @@ -0,0 +1,209 @@ +# 实战案例：个人博客系统 + +> 难度：⭐⭐ 中等 | 预计时间：2-4 小时 | 技术栈：Next.js + MDX + +## 🎯 项目目标 + +构建一个支持 Markdown 的个人博客系统，具备： +- 文章列表和详情页 +- 标签分类 +- 代码高亮 +- 响应式设计 + +## 📋 开始前的准备 + +### 环境要求 +- Node.js 18+ +- 包管理器（npm/pnpm/yarn） + +### 第一步：需求澄清 + +复制以下提示词给 AI： + +``` +我想用 Vibe Coding 的方式开发一个个人博客系统。 + +技术要求： +- 框架：Next.js 14 (App Router) +- 内容：MDX 格式的 Markdown 文章 +- 样式：Tailwind CSS +- 部署：Vercel + +功能需求： +1. 首页显示文章列表（标题、日期、摘要） +2. 文章详情页（支持代码高亮） +3. 标签页面（按标签筛选文章） +4. 关于页面 + +请帮我： +1. 确认技术栈是否合适 +2. 生成项目结构 +3. 一步步指导我完成开发 + +要求：每完成一步问我是否成功，再继续下一步。 +``` + +## 🏗️ 项目结构 + +``` +my-blog/ +├── app/ +│ ├── layout.tsx # 根布局 +│ ├── page.tsx # 首页 +│ ├── posts/ +│ │ └── [slug]/ +│ │ └── page.tsx # 文章详情 +│ ├── tags/ +│ │ └── [tag]/ +│ │ └── page.tsx # 标签页 +│ └── about/ +│ └── page.tsx # 关于页 +├── components/ +│ ├── Header.tsx +│ ├── Footer.tsx +│ ├── PostCard.tsx +│ └── MDXContent.tsx +├── content/ +│ └── posts/ # MDX 文章 +│ ├── hello-world.mdx +│ └── vibe-coding.mdx +├── lib/ +│ └── posts.ts # 文章处理逻辑 +└── tailwind.config.js +``` + +## 🔧 核心代码片段 + +### 文章处理逻辑 (lib/posts.ts) + +```typescript +import fs from 'fs' +import path from 'path' +import matter from 'gray-matter' + +const postsDirectory = path.join(process.cwd(), 'content/posts') + +export interface Post { + slug: string + title: string + date: string + tags: string[] + excerpt: string + content: string +} + +export function getAllPosts(): Post[] { + const fileNames = fs.readdirSync(postsDirectory) + const posts = fileNames + .filter(name => name.endsWith('.mdx')) + .map(fileName => { + const slug = fileName.replace(/\.mdx$/, '') + const fullPath = path.join(postsDirectory, fileName) + const fileContents = fs.readFileSync(fullPath, 'utf8') + const { data, content } = matter(fileContents) + + return { + slug, + title: data.title, + date: data.date, + tags: data.tags || [], + excerpt: data.excerpt || content.slice(0, 150), + content + } + }) + .sort((a, b) => (a.date < b.date ? 1 : -1)) + + return posts +} + +export function getPostBySlug(slug: string): Post | undefined { + return getAllPosts().find(post => post.slug === slug) +} +``` + +### 文章卡片组件 (components/PostCard.tsx) + +```tsx +import Link from 'next/link' +import { Post } from '@/lib/posts' + +export function PostCard({ post }: { post: Post }) { + return ( +
+ +

+ {post.title} +

+ + +

{post.excerpt}

+
+ {post.tags.map(tag => ( + + #{tag} + + ))} +
+
+ ) +} +``` + +## 📝 示例文章格式 + +```mdx +--- +title: "Hello World" +date: "2024-01-01" +tags: ["入门", "博客"] +excerpt: "这是我的第一篇博客文章" +--- + +# Hello World + +欢迎来到我的博客！ + +## 代码示例 + +```javascript +console.log('Hello, Vibe Coding!') +``` + +## 总结 + +这就是我的第一篇文章。 +``` + +## 🚀 部署步骤 + +1. 推送代码到 GitHub +2. 在 Vercel 导入项目 +3. 自动部署完成 + +## ✅ 验收清单 + +- [ ] 首页正确显示文章列表 +- [ ] 点击文章可以进入详情页 +- [ ] 代码块有语法高亮 +- [ ] 标签页面可以筛选文章 +- [ ] 移动端显示正常 +- [ ] 部署到 Vercel 成功 + +## 🔗 相关资源 + +- [Next.js 文档](https://nextjs.org/docs) +- [MDX 文档](https://mdxjs.com/) +- [Tailwind CSS](https://tailwindcss.com/) + +## 💡 进阶挑战 + +完成基础版本后，可以尝试： +- 添加搜索功能 +- 添加评论系统（Giscus） +- 添加 RSS 订阅 +- 添加暗色模式 +- 添加阅读时间估算 diff --git a/i18n/zh/documents/实战案例/04-cli-tool.md b/i18n/zh/documents/实战案例/04-cli-tool.md new file mode 100644 index 0000000..b10264f --- /dev/null +++ b/i18n/zh/documents/实战案例/04-cli-tool.md @@ -0,0 +1,298 @@ +# 实战案例：命令行工具 + +> 难度：⭐⭐ 中等 | 预计时间：1-2 小时 | 技术栈：Python + Click + +## 🎯 项目目标 + +构建一个实用的命令行工具，实现： +- 文件批量重命名 +- 支持多种命名规则 +- 预览和确认机制 +- 彩色输出 + +## 📋 开始前的准备 + +### 环境要求 +- Python 3.8+ +- pip + +### 第一步：需求澄清 + +复制以下提示词给 AI： + +``` +我想用 Vibe Coding 的方式开发一个文件批量重命名的命令行工具。 + +技术要求： +- 语言：Python 3.8+ +- CLI 框架：Click +- 输出美化：Rich + +功能需求： +1. 支持多种重命名规则： + - 添加前缀/后缀 + - 替换文本 + - 序号命名 + - 日期命名 +2. 预览模式（不实际执行） +3. 递归处理子目录（可选） +4. 支持文件类型过滤 + +请帮我： +1. 确认技术栈是否合适 +2. 生成项目结构 +3. 一步步指导我完成开发 + +要求：每完成一步问我是否成功，再继续下一步。 +``` + +## 🏗️ 项目结构 + +``` +file-renamer/ +├── renamer/ +│ ├── __init__.py +│ ├── cli.py # CLI 入口 +│ ├── core.py # 核心逻辑 +│ └── rules.py # 重命名规则 +├── tests/ +│ └── test_core.py +├── pyproject.toml +└── README.md +``` + +## 🔧 核心代码 + +### CLI 入口 (renamer/cli.py) + +```python +import click +from rich.console import Console +from rich.table import Table +from .core import FileRenamer +from .rules import PrefixRule, SuffixRule, ReplaceRule, SequenceRule + +console = Console() + +@click.group() +@click.version_option(version='1.0.0') +def cli(): + """文件批量重命名工具""" + pass + +@cli.command() +@click.argument('directory', type=click.Path(exists=True)) +@click.option('--prefix', '-p', help='添加前缀') +@click.option('--suffix', '-s', help='添加后缀') +@click.option('--replace', '-r', nargs=2, help='替换文本 (旧文本 新文本)') +@click.option('--sequence', '-n', is_flag=True, help='序号命名') +@click.option('--ext', '-e', multiple=True, help='文件扩展名过滤') +@click.option('--recursive', '-R', is_flag=True, help='递归处理子目录') +@click.option('--dry-run', '-d', is_flag=True, help='预览模式') +def rename(directory, prefix, suffix, replace, sequence, ext, recursive, dry_run): + """批量重命名文件""" + renamer = FileRenamer(directory, recursive=recursive, extensions=ext) + + # 添加规则 + if prefix: + renamer.add_rule(PrefixRule(prefix)) + if suffix: + renamer.add_rule(SuffixRule(suffix)) + if replace: + renamer.add_rule(ReplaceRule(replace[0], replace[1])) + if sequence: + renamer.add_rule(SequenceRule()) + + if not renamer.rules: + console.print("[red]错误：请至少指定一个重命名规则[/red]") + return + + # 获取预览 + changes = renamer.preview() + + if not changes: + console.print("[yellow]没有找到匹配的文件[/yellow]") + return + + # 显示预览表格 + table = Table(title="重命名预览") + table.add_column("原文件名", style="cyan") + table.add_column("新文件名", style="green") + + for old, new in changes: + table.add_row(old, new) + + console.print(table) + console.print(f"\n共 [bold]{len(changes)}[/bold] 个文件") + + if dry_run: + console.print("[yellow]预览模式，未执行实际操作[/yellow]") + return + + # 确认执行 + if click.confirm('确认执行重命名？'): + renamer.execute() + console.print("[green]✓ 重命名完成！[/green]") + else: + console.print("[yellow]已取消[/yellow]") + +if __name__ == '__main__': + cli() +``` + +### 核心逻辑 (renamer/core.py) + +```python +import os +from pathlib import Path +from typing import List, Tuple + +class FileRenamer: + def __init__(self, directory: str, recursive: bool = False, extensions: tuple = ()): + self.directory = Path(directory) + self.recursive = recursive + self.extensions = extensions + self.rules = [] + + def add_rule(self, rule): + self.rules.append(rule) + + def get_files(self) -> List[Path]: + pattern = '**/*' if self.recursive else '*' + files = [] + for path in self.directory.glob(pattern): + if path.is_file(): + if self.extensions: + if path.suffix.lower() in [f'.{e.lower()}' for e in self.extensions]: + files.append(path) + else: + files.append(path) + return sorted(files) + + def apply_rules(self, filename: str) -> str: + result = filename + for rule in self.rules: + result = rule.apply(result) + return result + + def preview(self) -> List[Tuple[str, str]]: + changes = [] + for file in self.get_files(): + old_name = file.stem + new_name = self.apply_rules(old_name) + if old_name != new_name: + changes.append((file.name, new_name + file.suffix)) + return changes + + def execute(self): + for file in self.get_files(): + old_name = file.stem + new_name = self.apply_rules(old_name) + if old_name != new_name: + new_path = file.parent / (new_name + file.suffix) + file.rename(new_path) +``` + +### 重命名规则 (renamer/rules.py) + +```python +from abc import ABC, abstractmethod + +class Rule(ABC): + @abstractmethod + def apply(self, filename: str) -> str: + pass + +class PrefixRule(Rule): + def __init__(self, prefix: str): + self.prefix = prefix + + def apply(self, filename: str) -> str: + return f"{self.prefix}{filename}" + +class SuffixRule(Rule): + def __init__(self, suffix: str): + self.suffix = suffix + + def apply(self, filename: str) -> str: + return f"{filename}{self.suffix}" + +class ReplaceRule(Rule): + def __init__(self, old: str, new: str): + self.old = old + self.new = new + + def apply(self, filename: str) -> str: + return filename.replace(self.old, self.new) + +class SequenceRule(Rule): + def __init__(self, start: int = 1, padding: int = 3): + self.counter = start + self.padding = padding + + def apply(self, filename: str) -> str: + result = f"{str(self.counter).zfill(self.padding)}_{filename}" + self.counter += 1 + return result +``` + +## 📦 安装配置 (pyproject.toml) + +```toml +[build-system] +requires = ["setuptools>=61.0"] +build-backend = "setuptools.build_meta" + +[project] +name = "file-renamer" +version = "1.0.0" +description = "文件批量重命名工具" +requires-python = ">=3.8" +dependencies = [ + "click>=8.0", + "rich>=13.0", +] + +[project.scripts] +renamer = "renamer.cli:cli" +``` + +## 🚀 使用示例 + +```bash +# 安装 +pip install -e . + +# 添加前缀 +renamer rename ./photos --prefix "2024_" + +# 替换文本 +renamer rename ./docs --replace "old" "new" + +# 序号命名 + 过滤扩展名 +renamer rename ./images --sequence --ext jpg --ext png + +# 预览模式 +renamer rename ./files --prefix "backup_" --dry-run + +# 递归处理 +renamer rename ./project --suffix "_v2" --recursive +``` + +## ✅ 验收清单 + +- [ ] 命令行帮助信息正确显示 +- [ ] 前缀/后缀功能正常 +- [ ] 替换功能正常 +- [ ] 序号命名功能正常 +- [ ] 预览模式不执行实际操作 +- [ ] 扩展名过滤正常 +- [ ] 递归处理正常 + +## 💡 进阶挑战 + +- 添加撤销功能（记录操作日志） +- 支持正则表达式 +- 添加日期格式化规则 +- 支持配置文件 +- 添加交互式模式 diff --git a/i18n/zh/documents/实战案例/05-chrome-extension.md b/i18n/zh/documents/实战案例/05-chrome-extension.md new file mode 100644 index 0000000..52d26e8 --- /dev/null +++ b/i18n/zh/documents/实战案例/05-chrome-extension.md @@ -0,0 +1,402 @@ +# 实战案例：Chrome 扩展 + +> 难度：⭐⭐ 中等 | 预计时间：2-3 小时 | 技术栈：JavaScript + Chrome API + +## 🎯 项目目标 + +构建一个实用的 Chrome 扩展 - **网页笔记助手**： +- 选中文本快速保存 +- 自动记录来源 URL +- 本地存储笔记 +- 导出功能 + +## 📋 开始前的准备 + +### 环境要求 +- Chrome 浏览器 +- 代码编辑器 + +### 第一步：需求澄清 + +复制以下提示词给 AI： + +``` +我想用 Vibe Coding 的方式开发一个 Chrome 扩展 - 网页笔记助手。 + +技术要求： +- Manifest V3 +- 纯 JavaScript（不用框架） +- Chrome Storage API + +功能需求： +1. 右键菜单：选中文本后右键保存 +2. 弹出窗口：显示所有笔记 +3. 自动记录：来源 URL、保存时间 +4. 导出功能：导出为 JSON/Markdown + +请帮我： +1. 确认技术方案 +2. 生成项目结构 +3. 一步步指导我完成开发 + +要求：每完成一步问我是否成功，再继续下一步。 +``` + +## 🏗️ 项目结构 + +``` +web-notes/ +├── manifest.json # 扩展配置 +├── background.js # 后台脚本 +├── popup/ +│ ├── popup.html # 弹出窗口 +│ ├── popup.css +│ └── popup.js +├── icons/ +│ ├── icon16.png +│ ├── icon48.png +│ └── icon128.png +└── README.md +``` + +## 🔧 核心代码 + +### 扩展配置 (manifest.json) + +```json +{ + "manifest_version": 3, + "name": "网页笔记助手", + "version": "1.0.0", + "description": "快速保存网页内容到本地笔记", + "permissions": [ + "storage", + "contextMenus", + "activeTab" + ], + "background": { + "service_worker": "background.js" + }, + "action": { + "default_popup": "popup/popup.html", + "default_icon": { + "16": "icons/icon16.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + } + }, + "icons": { + "16": "icons/icon16.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + } +} +``` + +### 后台脚本 (background.js) + +```javascript +// 创建右键菜单 +chrome.runtime.onInstalled.addListener(() => { + chrome.contextMenus.create({ + id: 'saveNote', + title: '保存到笔记', + contexts: ['selection'] + }); +}); + +// 处理右键菜单点击 +chrome.contextMenus.onClicked.addListener(async (info, tab) => { + if (info.menuItemId === 'saveNote' && info.selectionText) { + const note = { + id: Date.now().toString(), + text: info.selectionText, + url: tab.url, + title: tab.title, + createdAt: new Date().toISOString() + }; + + // 获取现有笔记 + const { notes = [] } = await chrome.storage.local.get('notes'); + + // 添加新笔记 + notes.unshift(note); + + // 保存 + await chrome.storage.local.set({ notes }); + + // 显示通知（可选） + console.log('笔记已保存:', note.text.slice(0, 50)); + } +}); +``` + +### 弹出窗口 HTML (popup/popup.html) + +```html + + + + + + + +
+
+

📝 我的笔记

+
+ + + +
+
+ +
+ +
+ +
+ +
+ +
+ 0 条笔记 +
+
+ + + + +``` + +### 弹出窗口样式 (popup/popup.css) + +```css +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 400px; + max-height: 500px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +.container { + padding: 16px; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; +} + +header h1 { + font-size: 18px; +} + +.actions button { + padding: 4px 8px; + margin-left: 4px; + font-size: 12px; + cursor: pointer; + border: 1px solid #ddd; + border-radius: 4px; + background: #fff; +} + +.actions button:hover { + background: #f5f5f5; +} + +.search input { + width: 100%; + padding: 8px 12px; + border: 1px solid #ddd; + border-radius: 4px; + margin-bottom: 12px; +} + +.notes-list { + max-height: 350px; + overflow-y: auto; +} + +.note-item { + padding: 12px; + border: 1px solid #eee; + border-radius: 8px; + margin-bottom: 8px; +} + +.note-text { + font-size: 14px; + line-height: 1.5; + margin-bottom: 8px; +} + +.note-meta { + font-size: 12px; + color: #666; +} + +.note-meta a { + color: #0066cc; + text-decoration: none; +} + +.note-delete { + float: right; + cursor: pointer; + color: #999; +} + +.note-delete:hover { + color: #ff4444; +} + +footer { + margin-top: 12px; + text-align: center; + color: #666; + font-size: 12px; +} + +.empty { + text-align: center; + color: #999; + padding: 40px; +} +``` + +### 弹出窗口逻辑 (popup/popup.js) + +```javascript +let allNotes = []; + +// 加载笔记 +async function loadNotes() { + const { notes = [] } = await chrome.storage.local.get('notes'); + allNotes = notes; + renderNotes(notes); +} + +// 渲染笔记列表 +function renderNotes(notes) { + const container = document.getElementById('notesList'); + const countEl = document.getElementById('noteCount'); + + countEl.textContent = `${notes.length} 条笔记`; + + if (notes.length === 0) { + container.innerHTML = '
暂无笔记
选中网页文字后右键保存
'; + return; + } + + container.innerHTML = notes.map(note => ` +
+ ✕ +
${escapeHtml(note.text)}
+
+ ${note.title || '未知页面'} +
+ ${formatDate(note.createdAt)} +
+
+ `).join(''); +} + +// 删除笔记 +async function deleteNote(id) { + allNotes = allNotes.filter(n => n.id !== id); + await chrome.storage.local.set({ notes: allNotes }); + renderNotes(allNotes); +} + +// 搜索 +document.getElementById('searchInput').addEventListener('input', (e) => { + const query = e.target.value.toLowerCase(); + const filtered = allNotes.filter(note => + note.text.toLowerCase().includes(query) || + (note.title && note.title.toLowerCase().includes(query)) + ); + renderNotes(filtered); +}); + +// 导出 JSON +document.getElementById('exportJson').addEventListener('click', () => { + const blob = new Blob([JSON.stringify(allNotes, null, 2)], { type: 'application/json' }); + downloadBlob(blob, 'notes.json'); +}); + +// 导出 Markdown +document.getElementById('exportMd').addEventListener('click', () => { + const md = allNotes.map(note => + `## ${formatDate(note.createdAt)}\n\n${note.text}\n\n> 来源: [${note.title}](${note.url})\n` + ).join('\n---\n\n'); + const blob = new Blob([md], { type: 'text/markdown' }); + downloadBlob(blob, 'notes.md'); +}); + +// 清空 +document.getElementById('clearAll').addEventListener('click', async () => { + if (confirm('确定清空所有笔记？')) { + allNotes = []; + await chrome.storage.local.set({ notes: [] }); + renderNotes([]); + } +}); + +// 工具函数 +function escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; +} + +function formatDate(isoString) { + return new Date(isoString).toLocaleString('zh-CN'); +} + +function downloadBlob(blob, filename) { + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + a.click(); + URL.revokeObjectURL(url); +} + +// 初始化 +loadNotes(); +``` + +## 🚀 安装步骤 + +1. 打开 Chrome，访问 `chrome://extensions/` +2. 开启「开发者模式」 +3. 点击「加载已解压的扩展程序」 +4. 选择项目文件夹 + +## ✅ 验收清单 + +- [ ] 扩展成功加载 +- [ ] 右键菜单显示「保存到笔记」 +- [ ] 选中文本可以保存 +- [ ] 弹出窗口显示笔记列表 +- [ ] 搜索功能正常 +- [ ] 删除功能正常 +- [ ] 导出 JSON 正常 +- [ ] 导出 Markdown 正常 + +## 💡 进阶挑战 + +- 添加标签分类 +- 支持云同步（Chrome Sync） +- 添加快捷键 +- 支持图片保存 +- 添加笔记编辑功能 diff --git a/i18n/zh/documents/实战案例/README.md b/i18n/zh/documents/实战案例/README.md index d321bd1..18a722f 100644 --- a/i18n/zh/documents/实战案例/README.md +++ b/i18n/zh/documents/实战案例/README.md @@ -8,23 +8,62 @@ | 案例 | 难度 | 技术栈 | 耗时 | 状态 | |:---|:---|:---|:---|:---| -| [Todo App](./01-todo-app.md) | ⭐ 入门 | HTML/CSS/JS | 30 分钟 | 待补充 | -| [个人博客](./02-blog.md) | ⭐⭐ 初级 | Next.js | 2 小时 | 待补充 | -| [AI 聊天机器人](./03-chatbot.md) | ⭐⭐ 初级 | Python/FastAPI | 1 小时 | 待补充 | -| [全栈 SaaS](./04-saas.md) | ⭐⭐⭐ 中级 | Next.js/Supabase | 1 天 | 待补充 | -| [Chrome 插件](./05-chrome-extension.md) | ⭐⭐ 初级 | JS/Chrome API | 2 小时 | 待补充 | +| [Todo App](./01-todo-app.md) | ⭐ 入门 | HTML/CSS/JS | 30 分钟 | ✅ 完成 | +| [个人博客](./02-blog-system.md) | ⭐⭐ 中等 | Next.js/MDX | 2-4 小时 | ✅ 完成 | +| [AI 聊天机器人](./03-chatbot.md) | ⭐⭐ 中等 | Python/FastAPI | 1-2 小时 | ✅ 完成 | +| [命令行工具](./04-cli-tool.md) | ⭐⭐ 中等 | Python/Click | 1-2 小时 | ✅ 完成 | +| [Chrome 扩展](./05-chrome-extension.md) | ⭐⭐ 中等 | JS/Chrome API | 2-3 小时 | ✅ 完成 | --- -## 案例格式 +## 快速开始 -每个案例包含： +每个案例都包含： +1. **开始前的提示词** - 直接复制给 AI +2. **项目结构** - 清晰的目录规划 +3. **核心代码** - 关键实现片段 +4. **验收清单** - 确保功能完整 +5. **进阶挑战** - 继续提升 -1. **项目目标** - 一句话说明要做什么 -2. **最终效果** - GIF/截图展示 -3. **使用的提示词** - 完整可复制 -4. **踩坑记录** - 遇到的问题和解决方案 -5. **完整代码** - GitHub 链接或代码片段 +### 使用方式 + +1. 选择一个感兴趣的案例 +2. 复制「第一步」的提示词给 AI +3. 跟着 AI 的指导一步步完成 +4. 对照验收清单检查功能 + +--- + +## 案例详情 + +### ⭐ 入门级 + +#### [Todo App](./01-todo-app.md) +最简单的入门项目，30 分钟完成一个待办事项应用。 +- 技术栈：纯 HTML/CSS/JavaScript +- 学习重点：DOM 操作、本地存储 + +### ⭐⭐ 中等级 + +#### [个人博客](./02-blog-system.md) +构建一个支持 Markdown 的个人博客系统。 +- 技术栈：Next.js + MDX + Tailwind CSS +- 学习重点：静态生成、文件系统路由 + +#### [AI 聊天机器人](./03-chatbot.md) +接入 AI API 的聊天机器人。 +- 技术栈：Python + FastAPI + OpenAI API +- 学习重点：API 调用、流式响应 + +#### [命令行工具](./04-cli-tool.md) +实用的文件批量重命名工具。 +- 技术栈：Python + Click + Rich +- 学习重点：CLI 开发、文件操作 + +#### [Chrome 扩展](./05-chrome-extension.md) +网页笔记助手浏览器扩展。 +- 技术栈：JavaScript + Chrome API +- 学习重点：扩展开发、本地存储 --- @@ -32,7 +71,33 @@ 欢迎提交你的 Vibe Coding 实战案例！ -格式要求： -- 必须包含完整提示词 -- 必须有效果展示（GIF 优先） -- 记录踩坑经验 +### 格式要求 + +```markdown +# 实战案例：项目名称 + +> 难度：⭐⭐ | 预计时间：X 小时 | 技术栈：XXX + +## 🎯 项目目标 +## 📋 开始前的准备 +## 🏗️ 项目结构 +## 🔧 核心代码 +## 🚀 部署/使用 +## ✅ 验收清单 +## 💡 进阶挑战 +``` + +### 提交方式 + +1. Fork 本仓库 +2. 在 `i18n/zh/documents/实战案例/` 添加案例文件 +3. 更新本 README 的案例列表 +4. 提交 Pull Request + +--- + +## 相关资源 + +- [从零开始 Vibe Coding](../从零开始vibecoding/) +- [常见坑汇总](../常见坑汇总/) +- [提示词库](../../prompts/) diff --git a/i18n/zh/prompts/coding_prompts/architecture-design.md b/i18n/zh/prompts/coding_prompts/architecture-design.md new file mode 100644 index 0000000..c7f431a --- /dev/null +++ b/i18n/zh/prompts/coding_prompts/architecture-design.md @@ -0,0 +1,299 @@ +# 架构设计提示词 + +> 让 AI 帮你设计清晰、可扩展的系统架构 + +--- + +## 🏗️ 项目架构设计 + +``` +我要开发一个 [项目类型]，请帮我设计系统架构。 + +## 项目背景 +[简要描述项目目的和背景] + +## 功能需求 +1. [核心功能 1] +2. [核心功能 2] +3. [核心功能 3] + +## 非功能需求 +- 预期用户量：[X 人] +- 并发要求：[X QPS] +- 数据量级：[X 条/GB] +- 可用性要求：[99.9%] + +## 技术偏好（可选） +- 语言：[如 Python/Go/Node.js] +- 部署环境：[如 云服务器/Serverless/K8s] + +请提供： +1. 整体架构图（用 Mermaid 或 ASCII） +2. 技术栈选型及理由 +3. 核心模块划分 +4. 数据流设计 +5. 关键设计决策说明 +``` + +--- + +## 📊 数据库设计 + +``` +请帮我设计数据库结构： + +## 业务场景 +[描述业务场景] + +## 核心实体 +1. [实体 1]：[描述] +2. [实体 2]：[描述] +3. [实体 3]：[描述] + +## 主要操作 +- [操作 1]：[频率] +- [操作 2]：[频率] + +## 约束条件 +- 数据库类型：[MySQL/PostgreSQL/MongoDB] +- 数据量预估：[X 条] + +请提供： +1. ER 图（Mermaid 格式） +2. 建表 SQL +3. 索引设计 +4. 关键查询示例 +``` + +--- + +## 🔌 API 设计 + +``` +请帮我设计 RESTful API： + +## 资源描述 +[描述要管理的资源] + +## 功能需求 +1. [功能 1] +2. [功能 2] +3. [功能 3] + +## 用户角色 +- [角色 1]：[权限描述] +- [角色 2]：[权限描述] + +请提供： +1. API 端点列表（方法、路径、描述） +2. 请求/响应示例（JSON 格式） +3. 错误码设计 +4. 认证方案 +5. 版本控制策略 +``` + +--- + +## 🧩 模块划分 + +``` +请帮我进行模块划分： + +## 项目描述 +[描述项目] + +## 当前代码结构 +``` +[粘贴目录结构或描述] +``` + +## 问题 +[描述当前架构的问题，如：耦合严重/职责不清] + +请： +1. 分析当前架构问题 +2. 提出模块划分方案 +3. 定义模块间接口 +4. 给出重构路径 +``` + +--- + +## 🔄 微服务拆分 + +``` +我想将单体应用拆分为微服务： + +## 当前系统 +[描述当前单体应用] + +## 业务模块 +1. [模块 1]：[描述] +2. [模块 2]：[描述] +3. [模块 3]：[描述] + +## 拆分动机 +[为什么要拆分] + +## 约束条件 +- 团队规模：[X 人] +- 技术栈：[当前技术栈] +- 时间预算：[X 个月] + +请提供： +1. 服务划分方案 +2. 服务间通信设计 +3. 数据一致性方案 +4. 部署架构 +5. 渐进式迁移计划 +``` + +--- + +## 📈 扩展性设计 + +``` +请帮我设计一个可扩展的系统： + +## 当前规模 +- 用户量：[X] +- 数据量：[X] +- QPS：[X] + +## 目标规模 +- 用户量：[X] +- 数据量：[X] +- QPS：[X] + +## 当前架构 +[描述或图示] + +请提供： +1. 扩展瓶颈分析 +2. 水平扩展方案 +3. 缓存策略 +4. 数据库扩展方案 +5. 成本估算 +``` + +--- + +## 🔐 安全架构 + +``` +请帮我设计安全架构： + +## 系统描述 +[描述系统] + +## 敏感数据 +- [数据类型 1] +- [数据类型 2] + +## 合规要求 +- [如 GDPR/等保] + +请提供： +1. 认证方案 +2. 授权模型 +3. 数据加密策略 +4. 审计日志设计 +5. 安全最佳实践清单 +``` + +--- + +## 📝 技术方案文档 + +``` +请帮我撰写技术方案文档： + +## 需求背景 +[描述需求] + +## 目标 +[描述目标] + +请按以下结构输出： + +# 技术方案：[标题] + +## 1. 背景与目标 +## 2. 方案概述 +## 3. 详细设计 +### 3.1 架构设计 +### 3.2 数据设计 +### 3.3 接口设计 +## 4. 技术选型 +## 5. 风险评估 +## 6. 里程碑计划 +## 7. 附录 +``` + +--- + +## 🎨 架构图模板 + +### 系统架构图 + +``` +请用 Mermaid 画出系统架构图： + +系统包含： +- [组件 1] +- [组件 2] +- [组件 3] + +关系： +- [组件 1] 调用 [组件 2] +- [组件 2] 读写 [数据库] +``` + +### 时序图 + +``` +请用 Mermaid 画出以下流程的时序图： + +参与者： +- 用户 +- 前端 +- 后端 +- 数据库 + +流程： +1. [步骤 1] +2. [步骤 2] +3. [步骤 3] +``` + +--- + +## 💡 设计原则提醒 + +``` +请检查我的架构设计是否符合以下原则： + +架构描述： +[描述你的架构] + +检查项： +- [ ] 单一职责原则 +- [ ] 开闭原则 +- [ ] 依赖倒置原则 +- [ ] 高内聚低耦合 +- [ ] 关注点分离 +- [ ] 可测试性 +- [ ] 可观测性 + +请指出不符合的地方并给出改进建议。 +``` + +--- + +## 使用建议 + +1. **先明确需求** - 架构服务于需求，需求不清架构必乱 +2. **考虑约束** - 团队规模、时间、预算都是约束 +3. **渐进式设计** - 不要过度设计，够用就好 +4. **画图辅助** - 让 AI 用 Mermaid 画图更直观 +5. **迭代优化** - 架构不是一次性的，持续演进 diff --git a/i18n/zh/prompts/coding_prompts/code-review.md b/i18n/zh/prompts/coding_prompts/code-review.md new file mode 100644 index 0000000..f99264d --- /dev/null +++ b/i18n/zh/prompts/coding_prompts/code-review.md @@ -0,0 +1,272 @@ +# 代码审查提示词 + +> 让 AI 帮你进行专业的代码审查 + +--- + +## 🔍 通用代码审查 + +``` +请对以下代码进行全面的代码审查： + +``` +[粘贴代码] +``` + +请从以下维度进行审查： + +1. **代码质量** + - 可读性 + - 命名规范 + - 代码结构 + +2. **潜在问题** + - Bug 风险 + - 边界情况 + - 异常处理 + +3. **性能** + - 时间复杂度 + - 空间复杂度 + - 优化建议 + +4. **安全性** + - 输入验证 + - 敏感数据处理 + - 常见漏洞 + +5. **最佳实践** + - 设计模式 + - SOLID 原则 + - 语言特性使用 + +请按严重程度（🔴 严重 / 🟡 建议 / 🟢 优化）标注每个问题，并提供修改建议。 +``` + +--- + +## 📋 快速审查（简化版） + +``` +快速审查这段代码，只关注： +1. 明显的 Bug +2. 安全问题 +3. 性能问题 + +代码： +``` +[粘贴代码] +``` + +直接列出问题和修复方案，不需要详细解释。 +``` + +--- + +## 🎯 特定维度审查 + +### 安全审查 + +``` +请对这段代码进行安全审查： + +``` +[粘贴代码] +``` + +重点检查： +- SQL 注入 +- XSS 攻击 +- CSRF 漏洞 +- 敏感信息泄露 +- 权限控制 +- 输入验证 + +列出所有安全风险并提供修复代码。 +``` + +### 性能审查 + +``` +请对这段代码进行性能审查： + +``` +[粘贴代码] +``` + +分析： +1. 时间复杂度 +2. 空间复杂度 +3. 数据库查询效率（如适用） +4. 内存使用 +5. 并发处理 + +提供优化后的代码和性能对比。 +``` + +### 可维护性审查 + +``` +请从可维护性角度审查这段代码： + +``` +[粘贴代码] +``` + +评估： +1. 代码是否易于理解 +2. 是否遵循单一职责原则 +3. 是否有适当的注释 +4. 是否易于测试 +5. 是否易于扩展 + +提供重构建议。 +``` + +--- + +## 🔄 PR 审查模板 + +``` +请帮我审查这个 Pull Request： + +## 变更描述 +[描述这个 PR 做了什么] + +## 变更的文件 + +### 文件 1: [文件名] +``` +[粘贴代码变更] +``` + +### 文件 2: [文件名] +``` +[粘贴代码变更] +``` + +请： +1. 检查代码质量 +2. 验证逻辑正确性 +3. 确认是否有遗漏的边界情况 +4. 检查是否需要添加测试 +5. 给出 Approve / Request Changes / Comment 建议 +``` + +--- + +## 📊 审查报告模板 + +``` +请生成一份代码审查报告： + +代码： +``` +[粘贴代码] +``` + +报告格式： + +# 代码审查报告 + +## 概述 +- 代码行数： +- 审查时间： +- 整体评分：X/10 + +## 问题汇总 +| 严重程度 | 数量 | +|---------|------| +| 🔴 严重 | X | +| 🟡 建议 | X | +| 🟢 优化 | X | + +## 详细问题 + +### 🔴 严重问题 +1. [问题描述] + - 位置：第 X 行 + - 原因： + - 修复： + +### 🟡 建议改进 +... + +### 🟢 优化建议 +... + +## 总结与建议 +``` + +--- + +## 🆚 代码对比审查 + +``` +请对比审查这两个版本的代码： + +## 原版本 +``` +[粘贴原代码] +``` + +## 新版本 +``` +[粘贴新代码] +``` + +请分析： +1. 新版本解决了什么问题 +2. 新版本是否引入了新问题 +3. 新版本的改进是否合理 +4. 是否有更好的实现方式 +``` + +--- + +## 💡 审查技巧 + +### 审查清单 + +``` +请按照以下清单审查代码： + +- [ ] 代码能正常运行 +- [ ] 没有明显的 Bug +- [ ] 错误处理完善 +- [ ] 没有安全漏洞 +- [ ] 性能可接受 +- [ ] 代码可读性好 +- [ ] 有必要的注释 +- [ ] 遵循项目规范 +- [ ] 有对应的测试 + +代码： +``` +[粘贴代码] +``` +``` + +### 学习式审查 + +``` +请审查这段代码，并教我： +1. 这段代码做了什么 +2. 有哪些值得学习的地方 +3. 有哪些可以改进的地方 +4. 相关的最佳实践是什么 + +代码： +``` +[粘贴代码] +``` +``` + +--- + +## 使用建议 + +1. **提供上下文** - 说明代码的用途和背景 +2. **指定重点** - 如果只关心某个方面，明确说明 +3. **分批审查** - 代码太长时分文件审查 +4. **跟进修复** - 审查后让 AI 帮你修复问题 diff --git a/i18n/zh/prompts/coding_prompts/debug-expert.md b/i18n/zh/prompts/coding_prompts/debug-expert.md new file mode 100644 index 0000000..c693f40 --- /dev/null +++ b/i18n/zh/prompts/coding_prompts/debug-expert.md @@ -0,0 +1,247 @@ +# 调试专家提示词 + +> 让 AI 帮你快速定位和解决 Bug + +--- + +## 🔍 通用调试提示词 + +``` +你是一位经验丰富的调试专家。我遇到了一个问题，请帮我分析和解决。 + +## 问题描述 +[描述你遇到的问题] + +## 预期行为 +[描述你期望发生什么] + +## 实际行为 +[描述实际发生了什么] + +## 错误信息 +``` +[粘贴错误信息] +``` + +## 相关代码 +``` +[粘贴相关代码] +``` + +## 已尝试的解决方案 +[列出你已经尝试过的方法] + +请： +1. 分析可能的原因（列出 2-3 个最可能的） +2. 提供具体的解决方案 +3. 解释为什么会出现这个问题 +4. 给出预防类似问题的建议 +``` + +--- + +## 🐛 前端调试 + +### React 组件问题 + +``` +我的 React 组件出现问题： + +组件代码： +```jsx +[粘贴组件代码] +``` + +问题：[描述问题，如：状态不更新/渲染异常/性能问题] + +控制台错误： +``` +[粘贴错误] +``` + +请帮我： +1. 找出问题根源 +2. 提供修复后的代码 +3. 解释 React 的相关机制 +``` + +### CSS 布局问题 + +``` +我的 CSS 布局有问题： + +HTML 结构： +```html +[粘贴 HTML] +``` + +CSS 样式： +```css +[粘贴 CSS] +``` + +期望效果：[描述或提供截图链接] +实际效果：[描述或提供截图链接] + +请帮我修复布局问题，并解释原因。 +``` + +--- + +## 🔧 后端调试 + +### API 接口问题 + +``` +我的 API 接口有问题： + +接口代码： +```python +[粘贴代码] +``` + +请求方式：[GET/POST/PUT/DELETE] +请求 URL：[URL] +请求参数： +```json +[参数] +``` + +期望响应： +```json +[期望的响应] +``` + +实际响应： +```json +[实际的响应] +``` + +错误日志： +``` +[日志] +``` + +请帮我定位问题并修复。 +``` + +### 数据库查询问题 + +``` +我的数据库查询有问题： + +SQL 语句： +```sql +[粘贴 SQL] +``` + +表结构： +```sql +[粘贴建表语句或描述] +``` + +期望结果：[描述] +实际结果：[描述或错误信息] + +请帮我： +1. 分析 SQL 问题 +2. 提供正确的查询 +3. 解释优化建议（如果有性能问题） +``` + +--- + +## ⚡ 性能调试 + +``` +我的应用有性能问题： + +## 问题表现 +- [描述性能问题，如：加载慢/卡顿/内存泄漏] + +## 环境信息 +- 框架/语言：[如 React/Node.js/Python] +- 数据规模：[如 1000 条数据] + +## 相关代码 +``` +[粘贴可能有问题的代码] +``` + +## 性能数据（如有） +- 加载时间：[X 秒] +- 内存占用：[X MB] +- CPU 使用：[X%] + +请帮我： +1. 分析性能瓶颈 +2. 提供优化方案 +3. 给出优化后的代码 +``` + +--- + +## 🔐 安全问题调试 + +``` +请帮我检查这段代码的安全问题： + +``` +[粘贴代码] +``` + +请： +1. 列出所有潜在的安全漏洞 +2. 按严重程度排序 +3. 提供修复建议和代码 +4. 解释每个漏洞的危害 +``` + +--- + +## 💡 调试技巧 + +### 二分法定位 + +``` +我的代码在某处出错，但不确定具体位置。 + +完整代码： +``` +[粘贴代码] +``` + +错误表现：[描述] + +请帮我用二分法定位问题： +1. 先确定问题在哪个模块/函数 +2. 逐步缩小范围 +3. 找到具体的问题行 +``` + +### 最小复现 + +``` +我遇到一个难以复现的 Bug： + +问题描述：[描述] +发生频率：[总是/偶尔/特定条件] +相关代码： +``` +[粘贴代码] +``` + +请帮我： +1. 分析可能的触发条件 +2. 构造最小复现代码 +3. 提供解决方案 +``` + +--- + +## 使用建议 + +1. **提供完整上下文** - 错误信息、代码、环境都要给全 +2. **描述清楚预期 vs 实际** - 让 AI 理解差距在哪 +3. **列出已尝试的方案** - 避免重复建议 +4. **一次只问一个问题** - 聚焦更容易解决