nannanwu
690b4d5961
- 管理后台帖子与用户审核操作中添加失败错误重定向处理 - 管理后台帖子、用户、评论删除操作中添加错误检查及提示 - 用户角色更新操作失败时添加错误重定向 - 用户封禁通知失败时添加相应错误提示 - 登录登出时session保存加入错误处理 - 讨论区上传目录创建失败时显示错误提示 - 移除admin_dashboard.html多余样式及修正侧边栏当前页高亮 - admin_posts.html和admin_users.html添加状态样式动态使用的隐藏span元素 - admin_users.html为角色选择添加label以提升无障碍性 - 升级项目依赖版本，包含gin、gorm、validator等核心库版本更新
232 lines
15 KiB
HTML
232 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.Post.Title}} - lv8girl</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
:root {
|
|
--bg: #f0f7f0;
|
|
--surface: #ffffff;
|
|
--surface-light: #e8f0e8;
|
|
--border: #d0e0d0;
|
|
--text: #2c3e2c;
|
|
--text-soft: #5f6b5f;
|
|
--text-hint: #8f9f8f;
|
|
--primary: #3d9e4a;
|
|
--accent: #ffb347;
|
|
--gradient: linear-gradient(135deg, #3d9e4a, #5a9cff);
|
|
}
|
|
body.dark-mode {
|
|
--bg: #1a1e1a;
|
|
--surface: #1e261e;
|
|
--surface-light: #2a3a2a;
|
|
--border: #2a3a2a;
|
|
--text: #e0e8e0;
|
|
--text-soft: #b0bcb0;
|
|
--text-hint: #8a958a;
|
|
--primary: #6b8e6b;
|
|
--accent: #ffb347;
|
|
}
|
|
body { background: var(--bg); color: var(--text); font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 1.6; transition: background 0.3s, color 0.3s; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
|
|
.logo { font-size: 2rem; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.logo span { font-size: 0.9rem; background: var(--accent); color: var(--surface); padding: 4px 12px; border-radius: 30px; margin-left: 10px; -webkit-text-fill-color: var(--surface); }
|
|
.nav-right { display: flex; align-items: center; gap: 15px; }
|
|
.nav-right a { color: var(--text-soft); text-decoration: none; padding: 6px 16px; border-radius: 30px; background: var(--surface-light); transition: 0.2s; }
|
|
.nav-right a:hover { background: var(--primary); color: white; }
|
|
.user-menu { position: relative; cursor: pointer; }
|
|
.user-name { display: flex; align-items: center; gap: 5px; background: var(--surface-light); padding: 6px 16px; border-radius: 30px; color: var(--text); }
|
|
.dropdown { position: absolute; top: 120%; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 140px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.2s; z-index: 100; }
|
|
.user-menu:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
.dropdown a { display: block; padding: 10px 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); background: transparent; }
|
|
.dropdown a:last-child { border-bottom: none; }
|
|
.dropdown a:hover { background: var(--surface-light); }
|
|
.theme-toggle { background: var(--surface-light); border: none; color: var(--text); font-size: 1.3rem; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
|
|
.theme-toggle:hover { background: var(--accent); color: var(--surface); }
|
|
.main-layout { display: flex; gap: 30px; }
|
|
.content-left { flex: 2; }
|
|
.content-right { flex: 1; }
|
|
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 25px; margin-bottom: 30px; }
|
|
.post-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
|
|
.post-author-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--gradient); overflow: hidden; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; }
|
|
.post-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.post-meta { flex: 1; }
|
|
.post-author-name { font-size: 1.1rem; font-weight: 600; color: var(--accent); text-decoration: none; }
|
|
.post-author-name:hover { text-decoration: underline; }
|
|
.post-time { color: var(--text-hint); font-size: 0.85rem; }
|
|
.post-title { font-size: 2rem; font-weight: 700; margin-bottom: 15px; color: var(--text); }
|
|
.post-image { margin: 20px 0; max-width: 100%; border-radius: 12px; overflow: hidden; }
|
|
.post-image img { width: 100%; max-height: 500px; object-fit: contain; background: var(--surface-light); }
|
|
.post-content { color: var(--text); font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; white-space: pre-wrap; }
|
|
.post-actions { display: flex; align-items: center; gap: 20px; padding: 15px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
|
.like-btn { background: var(--gradient); border: none; border-radius: 40px; padding: 8px 25px; color: white; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
|
|
.like-btn:hover { transform: scale(1.02); }
|
|
.like-btn.liked { background: #ff6b6b; }
|
|
.like-count { font-size: 1.1rem; font-weight: 600; color: var(--text); }
|
|
.view-count { margin-left: auto; color: var(--text-hint); font-size: 0.95rem; }
|
|
.author-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; text-align: center; }
|
|
.author-avatar-large { width: 80px; height: 80px; border-radius: 50%; background: var(--gradient); margin: 0 auto 15px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 600; }
|
|
.author-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
|
|
.author-name { font-size: 1.3rem; font-weight: 600; color: var(--accent); margin-bottom: 5px; }
|
|
.author-meta { color: var(--text-hint); font-size: 0.9rem; margin-bottom: 5px; }
|
|
.author-uid { color: var(--text-soft); font-size: 0.85rem; margin-bottom: 10px; }
|
|
.author-stats { display: flex; justify-content: center; gap: 20px; margin: 15px 0; padding-top: 15px; border-top: 1px solid var(--border); }
|
|
.author-stat-item { text-align: center; }
|
|
.author-stat-number { font-size: 1.3rem; font-weight: 700; color: var(--primary); }
|
|
.author-stat-label { color: var(--text-hint); font-size: 0.8rem; }
|
|
.view-profile { display: inline-block; background: var(--gradient); color: white; text-decoration: none; padding: 8px 20px; border-radius: 40px; font-weight: 600; transition: 0.2s; }
|
|
.view-profile:hover { transform: scale(1.02); }
|
|
.comments-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 25px; margin-bottom: 30px; }
|
|
.comments-title { font-size: 1.5rem; font-weight: 600; color: var(--accent); margin-bottom: 20px; }
|
|
.comment-form { margin-bottom: 30px; }
|
|
.comment-form textarea { width: 100%; background: var(--surface-light); border: 1px solid var(--border); border-radius: 12px; padding: 15px; font-size: 1rem; color: var(--text); resize: vertical; min-height: 100px; margin-bottom: 10px; }
|
|
.comment-form button { background: var(--gradient); border: none; border-radius: 40px; padding: 10px 30px; color: white; font-weight: 600; cursor: pointer; transition: 0.2s; }
|
|
.comment-form button:hover { transform: scale(1.02); }
|
|
.comment-item { display: flex; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--border); }
|
|
.comment-item:last-child { border-bottom: none; }
|
|
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; }
|
|
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
.comment-content { flex: 1; }
|
|
.comment-header { display: flex; align-items: center; gap: 15px; margin-bottom: 5px; }
|
|
.comment-author { font-weight: 600; color: var(--accent); text-decoration: none; }
|
|
.comment-author:hover { text-decoration: underline; }
|
|
.comment-time { color: var(--text-hint); font-size: 0.8rem; }
|
|
.comment-text { color: var(--text-soft); line-height: 1.5; }
|
|
.no-comments { text-align: center; color: var(--text-hint); padding: 30px 0; }
|
|
.login-prompt { text-align: center; color: var(--text-hint); margin-bottom: 20px; }
|
|
.login-prompt a { color: var(--accent); text-decoration: none; }
|
|
.footer { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--border); text-align: center; color: var(--text-hint); font-size: 0.9rem; }
|
|
.footer a { color: var(--text-hint); text-decoration: none; margin: 0 10px; }
|
|
.footer a:hover { color: var(--accent); }
|
|
@media (max-width: 800px) { .main-layout { flex-direction: column; } }
|
|
</style>
|
|
</head>
|
|
<body class="dark-mode">
|
|
<!-- liked 类通过模板动态应用 -->
|
|
<span style="display:none;" class="like-btn liked"></span>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="logo">lv8girl<span>绿坝娘</span></div>
|
|
<div class="nav-right">
|
|
{{if .IsLoggedIn}}
|
|
<div class="user-menu">
|
|
<span class="user-name">{{.Username}} ▼</span>
|
|
<div class="dropdown">
|
|
{{if eq .UserRole "admin"}}<a href="/admin">管理面板</a>{{end}}
|
|
<a href="/profile">个人主页</a>
|
|
<a href="/new-post">发表新帖</a>
|
|
<a href="/messages">私信</a>
|
|
<a href="/logout">登出</a>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<a href="/login">登录</a>
|
|
<a href="/register">注册</a>
|
|
{{end}}
|
|
<button class="theme-toggle" id="themeToggle">🌓</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-layout">
|
|
<div class="content-left">
|
|
<div class="post-card">
|
|
<div class="post-header">
|
|
<a href="/profile/{{.Post.UserID}}" class="post-author-avatar">
|
|
{{if .PostAvatar}}<img src="{{.PostAvatar}}" alt="avatar">{{else}}<span>{{slice .Post.User.Username 0 1}}</span>{{end}}
|
|
</a>
|
|
<div class="post-meta">
|
|
<a href="/profile/{{.Post.UserID}}" class="post-author-name">{{.Post.User.Username}}</a>
|
|
<div class="post-time">{{.Post.CreatedAt.Format "2006-01-02 15:04"}}</div>
|
|
</div>
|
|
</div>
|
|
<h1 class="post-title">{{.Post.Title}}</h1>
|
|
{{if .Post.ImagePath}}<div class="post-image"><img src="/{{.Post.ImagePath}}" alt="post image"></div>{{end}}
|
|
<div class="post-content">{{.Post.Content}}</div>
|
|
<div class="post-actions">
|
|
{{if .IsLoggedIn}}
|
|
<form method="post" action="/post/{{.Post.ID}}/like" style="display: inline;">
|
|
<button type="submit" class="like-btn {{if .UserLiked}}liked{{end}}">{{if .UserLiked}}✓ 已点赞{{else}}👍 点赞{{end}}</button>
|
|
</form>
|
|
{{else}}
|
|
<a href="/login" class="like-btn">👍 登录后点赞</a>
|
|
{{end}}
|
|
<span class="like-count">{{.LikeCount}} 人点赞</span>
|
|
<span class="view-count">👁️ {{.Post.Views}} 次阅读</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comments-section">
|
|
<h2 class="comments-title">评论 ({{len .Comments}})</h2>
|
|
{{if .IsLoggedIn}}
|
|
<form method="post" action="/post/{{.Post.ID}}/comment" class="comment-form">
|
|
<label for="comment-content" style="display:none;">评论内容</label>
|
|
<textarea id="comment-content" name="content" placeholder="写下你的评论..." required></textarea>
|
|
<button type="submit">发表评论</button>
|
|
</form>
|
|
{{else}}
|
|
<div class="login-prompt"><a href="/login">登录</a> 后即可评论</div>
|
|
{{end}}
|
|
{{if not .Comments}}
|
|
<div class="no-comments">暂无评论，快来抢沙发吧～</div>
|
|
{{else}}
|
|
{{range .Comments}}
|
|
<div class="comment-item">
|
|
<a href="/profile/{{.UserID}}" class="comment-avatar">
|
|
{{if index $.CommentAvatars .UserID}}<img src="{{index $.CommentAvatars .UserID}}" alt="avatar">{{else}}<span>{{slice .User.Username 0 1}}</span>{{end}}
|
|
</a>
|
|
<div class="comment-content">
|
|
<div class="comment-header">
|
|
<a href="/profile/{{.UserID}}" class="comment-author">{{.User.Username}}</a>
|
|
<span class="comment-time">{{.CreatedAt.Format "2006-01-02 15:04"}}</span>
|
|
</div>
|
|
<div class="comment-text">{{.Content}}</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-right">
|
|
<div class="author-card">
|
|
<div class="author-avatar-large">
|
|
{{if .PostAvatar}}<img src="{{.PostAvatar}}" alt="avatar">{{else}}<span>{{slice .Post.User.Username 0 1}}</span>{{end}}
|
|
</div>
|
|
<div class="author-name">{{.Post.User.Username}}</div>
|
|
<div class="author-meta">身份：{{if eq .Post.User.Role "admin"}}管理员{{else}}用户{{end}}</div>
|
|
<div class="author-uid">UID: {{.Post.UserID}}</div>
|
|
<div class="author-stats">
|
|
<div class="author-stat-item">
|
|
<div class="author-stat-number">{{.AuthorPostCount}}</div>
|
|
<div class="author-stat-label">帖子</div>
|
|
</div>
|
|
</div>
|
|
<a href="/profile/{{.Post.UserID}}" class="view-profile">查看个人主页</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div>© 2025 lv8girl · 绿坝娘二次元论坛</div>
|
|
<div>
|
|
<a href="#">关于</a>
|
|
<a href="#">帮助</a>
|
|
<a href="#">隐私</a>
|
|
<a href="#">投稿</a>
|
|
<a href="https://icp.gov.moe/?keyword=20260911" target="_blank">萌ICP备20260911号</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
themeToggle.addEventListener('click', () => {
|
|
document.body.classList.toggle('dark-mode');
|
|
themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌓';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|