lizhilun/zhangmenu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
主要优化:
- 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>
This commit is contained in:
Developer
2026-03-23 17:18:59 +08:00
co-authored by Claude Opus 4.6
parent f1994c869d
commit 94647e2b4b
18 changed files with 6972 additions and 5974 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin/login.html
+308
View File
@@ -0,0 +1,308 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>登录 - 玉姐的菜单</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;800&family=ZCOOL+XiaoWei&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/bootstrap-icons.min.css">
<style>
:root {
--primary: #a85a32;
--primary-light: #c97a52;
--primary-dark: #7f4224;
--primary-soft: #f2dcc8;
--secondary: #6f8b63;
--secondary-light: #89a37d;
--secondary-soft: #e5efdf;
--accent: #d4a35f;
--accent-soft: #f5e6c8;
--bg-primary: #f6efe3;
--bg-secondary: #efe4d3;
--bg-card: #fffaf2;
--paper: #fffdf8;
--paper-strong: #fff7ec;
--wood: #d7b894;
--ink: #33251d;
--line: rgba(110, 76, 51, 0.14);
--line-strong: rgba(110, 76, 51, 0.24);
--shadow-sm: 0 6px 16px rgba(103, 72, 45, 0.08);
--shadow-md: 0 12px 28px rgba(103, 72, 45, 0.12);
--shadow-lg: 0 22px 44px rgba(103, 72, 45, 0.14);
--shadow-xl: 0 28px 56px rgba(103, 72, 45, 0.16);
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 28px;
--radius-xl: 36px;
--font-display: 'ZCOOL XiaoWei', 'Noto Sans SC', serif;
--font-body: 'Nunito', 'Noto Sans SC', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body);
background: var(--bg-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background-image:
radial-gradient(ellipse at 20% 0%, rgba(168, 90, 50, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(212, 163, 95, 0.1) 0%, transparent 50%);
}
/* === Header === */
.login-header {
width: 100%;
max-width: 480px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--accent) 100%);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
padding: 48px 40px 56px;
text-align: center;
position: relative;
overflow: hidden;
}
.login-header::before {
content: '';
position: absolute;
top: -50%;
right: -15%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 65%);
pointer-events: none;
}
.login-header::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 65%);
pointer-events: none;
}
.header-icon {
width: 72px;
height: 72px;
background: rgba(255,255,255,0.2);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
backdrop-filter: blur(8px);
}
.header-icon i {
font-size: 36px;
color: white;
}
.login-header h1 {
font-family: var(--font-display);
font-size: 32px;
color: white;
margin-bottom: 8px;
letter-spacing: 2px;
}
.login-header p {
color: rgba(255,255,255,0.85);
font-size: 14px;
font-weight: 400;
}
/* === Card === */
.login-card {
width: 100%;
max-width: 480px;
background: var(--bg-card);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
padding: 40px 40px 48px;
box-shadow: var(--shadow-xl);
border: 1px solid var(--line);
border-top: none;
}
.form-title {
font-size: 16px;
font-weight: 600;
color: var(--ink);
margin-bottom: 28px;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.5px;
}
.input-wrapper {
position: relative;
}
.input-wrapper i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--wood);
font-size: 18px;
pointer-events: none;
}
.form-control {
width: 100%;
padding: 14px 16px 14px 48px;
border: 2px solid var(--line);
border-radius: var(--radius-sm);
font-size: 15px;
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
transition: all 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: var(--primary);
background: white;
box-shadow: 0 0 0 4px rgba(168, 90, 50, 0.08);
}
.form-control::placeholder {
color: var(--wood);
opacity: 0.7;
}
.submit-btn {
width: 100%;
padding: 16px;
margin-top: 8px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border: none;
border-radius: var(--radius-sm);
color: white;
font-size: 16px;
font-weight: 700;
font-family: var(--font-body);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(168, 90, 50, 0.3);
letter-spacing: 1px;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(168, 90, 50, 0.4);
}
.submit-btn:active {
transform: translateY(0);
}
.error-msg {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px 16px;
border-radius: var(--radius-sm);
margin-bottom: 20px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.error-msg i {
font-size: 16px;
}
/* === Footer === */
.login-footer {
width: 100%;
max-width: 480px;
text-align: center;
padding: 20px 40px;
margin-top: 16px;
}
.login-footer span {
color: var(--wood);
font-size: 12px;
opacity: 0.7;
}
/* === Responsive === */
@media (max-width: 520px) {
.login-header { padding: 36px 28px 44px; }
.login-header h1 { font-size: 26px; }
.login-card { padding: 32px 28px 36px; }
}
</style>
</head>
<body>
<header class="login-header">
<div class="header-icon">
<i class="bi bi-book"></i>
</div>
<h1>玉姐的菜单</h1>
<p>家庭菜谱 · 备菜清单</p>
</header>
<div class="login-card">
<p class="form-title">请登录以继续</p>
{% if form.errors %}
<div class="error-msg">
<i class="bi bi-exclamation-circle-fill"></i>
用户名或密码错误，请重试
</div>
{% endif %}
<form method="post">
{% csrf_token %}
<div class="form-group">
<label for="id_username">用户名</label>
<div class="input-wrapper">
<i class="bi bi-person"></i>
<input type="text" name="username" class="form-control" id="id_username" placeholder="请输入用户名" required autofocus>
</div>
</div>
<div class="form-group">
<label for="id_password">密码</label>
<div class="input-wrapper">
<i class="bi bi-lock"></i>
<input type="password" name="password" class="form-control" id="id_password" placeholder="请输入密码" required>
</div>
</div>
<button type="submit" class="submit-btn">登 录</button>
</form>
</div>
<div class="login-footer">
<span>Zhangmenu 管理后台</span>
</div>
</body>
</html>