perf: 性能与资源优化 - 提取内联资源、数据库查询优化、限流与缓存增强

主要优化:
- templates/index.html: 220KB → 28KB，内联CSS/JS提取为静态文件
- menu/serializers.py: 修复 Order.ingredients_summary N+1 查询问题
- menu/services/dish_service.py: 移除多余查询，添加 only() 限制字段
- menu/views.py: 上传接口添加每分钟20次限流
- static/js/api.js: 统一API错误处理
- zhangmenu/settings.py: 添加Whitenoise压缩、Redis缓存支持、环境变量配置
- static/css/app.css, static/js/app.js: 提取的内联资源文件
- 新增 migrations, requirements.txt, .env.example

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

static/js/api.js

@@ -1,80 +1,93 @@
 // API 调用封装
 const API_BASE = '/api';
 
+async function apiRequest(url, options = {}) {
+    const res = await fetch(url, {
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...options.headers,
+        },
+    });
+
+    if (!res.ok) {
+        let errorMsg = `请求失败 (${res.status})`;
+        try {
+            const data = await res.json();
+            if (data.error) errorMsg = data.error;
+            else if (data.detail) errorMsg = data.detail;
+        } catch {
+            // response not JSON
+        }
+        throw new Error(errorMsg);
+    }
+
+    // 204 No Content
+    if (res.status === 204) return null;
+    return res.json();
+}
+
 const API = {
     // 菜品相关
     async getDishes(params = {}) {
         const query = new URLSearchParams(params).toString();
-        const res = await fetch(`${API_BASE}/dishes/${query ? '?' + query : ''}`);
-        return res.json();
+        return apiRequest(`${API_BASE}/dishes/${query ? '?' + query : ''}`);
     },
 
     async getDish(id) {
-        const res = await fetch(`${API_BASE}/dishes/${id}/`);
-        return res.json();
+        return apiRequest(`${API_BASE}/dishes/${id}/`);
     },
 
     async createDish(data) {
-        const res = await fetch(`${API_BASE}/dishes/`, {
+        return apiRequest(`${API_BASE}/dishes/`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(data)
+            body: JSON.stringify(data),
         });
-        return res.json();
     },
 
     async updateDish(id, data) {
-        const res = await fetch(`${API_BASE}/dishes/${id}/`, {
+        return apiRequest(`${API_BASE}/dishes/${id}/`, {
             method: 'PATCH',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(data)
+            body: JSON.stringify(data),
         });
-        return res.json();
     },
 
     async deleteDish(id) {
-        await fetch(`${API_BASE}/dishes/${id}/`, { method: 'DELETE' });
+        return apiRequest(`${API_BASE}/dishes/${id}/`, { method: 'DELETE' });
     },
 
     // 分类相关
     async getCategories() {
-        const res = await fetch(`${API_BASE}/categories/`);
-        return res.json();
+        return apiRequest(`${API_BASE}/categories/`);
     },
 
     // 订单相关
     async getOrders(params = {}) {
         const query = new URLSearchParams(params).toString();
-        const res = await fetch(`${API_BASE}/orders/${query ? '?' + query : ''}`);
-        return res.json();
+        return apiRequest(`${API_BASE}/orders/${query ? '?' + query : ''}`);
     },
 
     async createOrder(data) {
-        const res = await fetch(`${API_BASE}/orders/`, {
+        return apiRequest(`${API_BASE}/orders/`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(data)
+            body: JSON.stringify(data),
         });
-        return res.json();
     },
 
     async completeOrder(id) {
-        const res = await fetch(`${API_BASE}/orders/${id}/complete/`, { method: 'POST' });
-        return res.json();
+        return apiRequest(`${API_BASE}/orders/${id}/complete/`, { method: 'POST' });
     },
 
     async deleteOrder(id) {
-        await fetch(`${API_BASE}/orders/${id}/`, { method: 'DELETE' });
+        return apiRequest(`${API_BASE}/orders/${id}/`, { method: 'DELETE' });
     },
 
     // URL解析
     async parseUrl(url) {
-        const res = await fetch(`${API_BASE}/parse-url/`, {
+        return apiRequest(`${API_BASE}/parse-url/`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ url })
+            body: JSON.stringify({ url }),
         });
-        return res.json();
     },
 
     // 图片上传
@@ -83,8 +96,19 @@ const API = {
         formData.append('image', file);
         const res = await fetch('/upload-image/', {
             method: 'POST',
-            body: formData
+            body: formData,
         });
+
+        if (!res.ok) {
+            let errorMsg = `上传失败 (${res.status})`;
+            try {
+                const data = await res.json();
+                if (data.error) errorMsg = data.error;
+            } catch {
+                // response not JSON
+            }
+            throw new Error(errorMsg);
+        }
         return res.json();
-    }
+    },
 };