添加菜谱删除功能，更新路由和视图以支持删除操作；新增 GitHub Copilot 使用说明和样式指南

Author: gdjy098

.github/instructions.md

@@ -0,0 +1,31 @@
+# GitHub Copilot Instructions
+
+## Project Overview
+This is a CRUD recipe application built with Node.js, Express, and Handlebars templating engine. The app allows users to create, read, update, and delete recipes with ingredients and cooking methods.
+
+## Technology Stack
+- **Backend**: Node.js with Express.js
+- **Database**: SQLite with custom database layer
+- **Templating**: Handlebars.js
+- **Testing**: Jest
+- **Styling**: Vanilla CSS
+
+## Code Style Guidelines
+- Use ES6+ features and async/await for asynchronous operations
+- Follow RESTful routing conventions for recipe operations
+- Use semantic HTML and BEM-style CSS classes where appropriate
+- Keep database queries in the `src/database/` directory
+- Store all view templates in the `views/` directory with Handlebars syntax
+
+## Key Patterns
+- Database operations should use the custom connection layer in `src/database/`
+- Routes are defined in `src/routes.js` following Express patterns
+- Handlebars helpers for text formatting (split, newline, add) are available
+- Use proper error handling for database operations and route handlers
+- Follow the existing form structure for CRUD operations
+
+## Testing
+- Test files are in `__tests__/` directory
+- Use Jest for unit and integration testing
+- Include tests for both database operations and route handlers
+- Mock database connections in tests using the test setup files

.github/instructions/styling.instructions.md

@@ -0,0 +1,12 @@
+---
+applyTo: "public/*.css"
+---
+
+- Use semantic class names (`.recipe-*`, `.btn-*`, `.form-*`)
+- Follow BEM methodology where appropriate
+- Use consistent spacing units (8px, 16px, 24px)
+- Use CSS custom properties for colors
+- Mobile-first responsive design
+- Use flexbox for layouts
+- Ensure accessibility with proper contrast and focus states
+- Ensure buttons have adequate touch targets (44px minimum)

.vscode/mcp.json

@@ -0,0 +1,8 @@
+{
+  "servers": {
+    "github": {
+      "type": "http",
+      "url": "https://api.githubcopilot.com/mcp/"
+    }
+  }
+}

__tests__/routes.test.js

@@ -64,4 +64,27 @@ describe('Routes', () => {
     expect(recipe).toBeDefined();
     expect(recipe.title).toBe(newRecipe.title);
   });
+
+    test('POST /recipes/:id/delete should delete a recipe', async () => {
+      // 先插入一条菜谱
+      const recipe = {
+        title: 'Delete Me',
+        ingredients: 'To be deleted',
+        method: 'To be deleted'
+      };
+      await request(app).post('/recipes').send(recipe);
+      const created = await db.get('SELECT * FROM recipes WHERE title = ?', [recipe.title]);
+      expect(created).toBeDefined();
+
+      // 执行删除
+      const response = await request(app)
+        .post(`/recipes/${created.id}/delete`)
+        .send();
+      expect(response.status).toBe(302);
+      expect(response.headers.location).toBe('/recipes');
+
+      // 验证已删除
+      const deleted = await db.get('SELECT * FROM recipes WHERE id = ?', [created.id]);
+      expect(deleted).toBeUndefined();
+    });
 });

src/routes.js

@@ -9,7 +9,7 @@ router.get('/', (req, res) => {
 
 router.get('/recipes', async (req, res) => {
 	const db = await getDbConnection()
-	const recipes = await db.all('SELECT * FROM recipes')
+	const recipes = await db.all('SELECT * FROM recipes ORDER BY title DESC')
 	res.render('recipes', { recipes })
 })
 
@@ -40,4 +40,19 @@ router.post('/recipes/:id/edit', async (req, res) => {
 	res.redirect(`/recipes/${recipeId}`)
 })
 
+// 删除菜谱
+router.post('/recipes/:id/delete', async (req, res) => {
+	const db = await getDbConnection();
+	const recipeId = req.params.id;
+	await db.run('DELETE FROM recipes WHERE id = ?', [recipeId]);
+	res.redirect('/recipes');
+});
+
+// 获取一个随机菜谱
+router.get('/recipes/random', async (req, res) => {
+	const db = await getDbConnection()
+	const recipe = await db.get('SELECT * FROM recipes ORDER BY RANDOM() LIMIT 1')
+	res.render('recipe', { recipe })
+})
+
 module.exports = router

views/recipe.hbs

@@ -5,6 +5,9 @@
             <div class="recipe-actions">
                 <button class="btn btn-primary" onclick="showEditForm()">Edit Recipe</button>
                 <a href="/recipes" class="btn btn-secondary">Back to All Recipes</a>
+                <form action="/recipes/{{recipe.id}}/delete" method="POST" style="display:inline;">
+                    <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除该菜谱吗？')">Delete</button>
+                </form>
             </div>
         </div>
 
@@ -67,6 +70,9 @@
                 <div class="form-actions">
                     <button type="submit" class="btn btn-primary">Update Recipe</button>
                     <button type="button" class="btn btn-secondary" onclick="hideEditForm()">Cancel</button>
+                    <form action="/recipes/{{recipe.id}}/delete" method="POST" style="display:inline; margin-left: 10px;">
+                        <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除该菜谱吗？')">Delete</button>
+                    </form>
                 </div>
             </form>
         </div>