fix(showcase): tab stay, Y-center toggle, group postcards by sent/received, hide navbar on public page, remove profiles/xx/showcase

This commit is contained in:
2026-07-06 00:05:15 +08:00
parent c550289527
commit e0ef607a05
4 changed files with 81 additions and 22 deletions

View File

@@ -76,11 +76,18 @@ def login_submit(
@router.get("/settings", response_class=HTMLResponse) @router.get("/settings", response_class=HTMLResponse)
def settings_page( def settings_page(
request: Request, request: Request,
active_tab: str = "account",
user: User = Depends(get_current_user_web), user: User = Depends(get_current_user_web),
db: Session = Depends(get_db), db: Session = Depends(get_db),
): ):
profiles = db.query(Profile).filter(Profile.user_id == user.id).all() profiles = db.query(Profile).filter(Profile.user_id == user.id).all()
return templates.TemplateResponse("settings.html", {"request": request, "user": user, "profiles": profiles}) profile_cards = {}
for p in profiles:
profile_cards[p.id] = db.query(Postcard).filter(Postcard.profile_id == p.id).all()
return templates.TemplateResponse("settings.html", {
"request": request, "user": user, "profiles": profiles,
"profile_cards": profile_cards, "active_tab": active_tab,
})
@router.post("/settings/change-username") @router.post("/settings/change-username")

View File

@@ -8,6 +8,7 @@
</head> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
{% block navbar %}
<a href="/dashboard" class="nav-brand">📮 明信片管理器</a> <a href="/dashboard" class="nav-brand">📮 明信片管理器</a>
<div class="nav-links"> <div class="nav-links">
{% if user is defined and user %} {% if user is defined and user %}
@@ -16,6 +17,7 @@
<a href="/logout" class="nav-logout">退出</a> <a href="/logout" class="nav-logout">退出</a>
{% endif %} {% endif %}
</div> </div>
{% endblock %}
</nav> </nav>
<main class="container"> <main class="container">
{% block content %}{% endblock %} {% block content %}{% endblock %}

View File

@@ -6,8 +6,8 @@
</div> </div>
<div class="tabs" id="tabs"> <div class="tabs" id="tabs">
<button class="tab active" onclick="switchTab('account')">账号</button> <button class="tab {% if active_tab != 'showcase' %}active{% endif %}" onclick="switchTab('account')">账号</button>
<button class="tab" onclick="switchTab('showcase')">展示</button> <button class="tab {% if active_tab == 'showcase' %}active{% endif %}" onclick="switchTab('showcase')">展示</button>
</div> </div>
{% if success %} {% if success %}
@@ -17,7 +17,7 @@
<div class="alert alert-error">{{ error }}</div> <div class="alert alert-error">{{ error }}</div>
{% endif %} {% endif %}
<div id="tab-account" class="tab-panel"> <div id="tab-account" class="tab-panel" {% if active_tab == 'showcase' %}style="display:none"{% endif %}>
<div class="form-card"> <div class="form-card">
<h3 style="margin-bottom:.75rem">修改用户名</h3> <h3 style="margin-bottom:.75rem">修改用户名</h3>
<form method="post" action="/settings/change-username"> <form method="post" action="/settings/change-username">
@@ -47,7 +47,7 @@
</div> </div>
</div> </div>
<div id="tab-showcase" class="tab-panel" style="display:none"> <div id="tab-showcase" class="tab-panel" {% if active_tab != 'showcase' %}style="display:none"{% endif %}>
<div class="form-card"> <div class="form-card">
<h3 style="margin-bottom:.75rem">全局展示设置</h3> <h3 style="margin-bottom:.75rem">全局展示设置</h3>
<form method="post" action="/showcase/manage"> <form method="post" action="/showcase/manage">
@@ -69,28 +69,77 @@
<h2 style="font-size:1rem;margin-bottom:1rem">各 Profile 展示设置</h2> <h2 style="font-size:1rem;margin-bottom:1rem">各 Profile 展示设置</h2>
{% if profiles %} {% if profiles %}
{% for p in profiles %} {% for p in profiles %}
<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-bottom:.75rem"> {% set sent_cards = [] %}
{% set received_cards = [] %}
{% if profile_cards and p.id in profile_cards %}
{% for pc in profile_cards[p.id] %}
{% if pc.status in ('sent', 'delivered') %}
{% if sent_cards.append(pc) %}{% endif %}
{% else %}
{% if received_cards.append(pc) %}{% endif %}
{% endif %}
{% endfor %}
{% endif %}
<div class="showcase-profile-card" style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-bottom:.75rem">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem"> <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem">
<strong>{{ p.nickname }}</strong> <strong>{{ p.nickname }}</strong>
<span class="badge" style="{% if p.showcase_enabled %}background:var(--sent){% else %}background:var(--text-muted){% endif %}">{% if p.showcase_enabled %}展示中{% else %}未开启{% endif %}</span> <span class="badge" style="{% if p.showcase_enabled %}background:var(--sent){% else %}background:var(--text-muted){% endif %}">{% if p.showcase_enabled %}展示中{% else %}未开启{% endif %}</span>
</div> </div>
<form method="post" action="/profiles/{{ p.id }}/showcase" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:center"> <form method="post" action="/profiles/{{ p.id }}/showcase">
<div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:center">
<div style="display:flex;align-items:center;gap:.5rem"> <div style="display:flex;align-items:center;gap:.5rem">
<label style="margin:0;font-size:.8rem">开启展示</label> <label style="margin:0;font-size:.85rem">开启展示</label>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" name="showcase_enabled" value="1" {% if p.showcase_enabled %}checked{% endif %} onchange="this.form.submit()"> <input type="checkbox" name="showcase_enabled" value="1" {% if p.showcase_enabled %}checked{% endif %} onchange="this.form.submit()">
<span class="toggle-slider"></span> <span class="toggle-slider"></span>
</label> </label>
</div> </div>
<div style="display:flex;align-items:center;gap:.5rem"> <div style="display:flex;align-items:center;gap:.5rem">
<label style="margin:0;font-size:.8rem">展示内容</label> <label style="margin:0;font-size:.85rem">展示内容</label>
<select name="showcase_visible" onchange="this.form.submit()" style="width:auto"> <select name="showcase_visible" onchange="this.form.submit()" style="width:auto">
<option value="both" {% if p.showcase_visible == 'both' %}selected{% endif %}>发出 + 收到</option> <option value="both" {% if p.showcase_visible == 'both' %}selected{% endif %}>发出 + 收到</option>
<option value="sent" {% if p.showcase_visible == 'sent' %}selected{% endif %}>仅发出</option> <option value="sent" {% if p.showcase_visible == 'sent' %}selected{% endif %}>仅发出</option>
<option value="received" {% if p.showcase_visible == 'received' %}selected{% endif %}>仅收到</option> <option value="received" {% if p.showcase_visible == 'received' %}selected{% endif %}>仅收到</option>
</select> </select>
</div> </div>
</div>
</form> </form>
{% if p.showcase_enabled and (sent_cards or received_cards) %}
<div style="margin-top:.75rem;border-top:1px solid var(--border);padding-top:.75rem">
<p style="font-size:.8rem;color:var(--text-muted);margin-bottom:.5rem">单张明信片展示控制:</p>
{% if sent_cards %}
<div style="margin-bottom:.4rem">
<span style="font-size:.78rem;color:var(--text-muted);margin-right:.5rem">发出</span>
{% for pc in sent_cards %}
<form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.3rem;margin-right:.75rem;margin-bottom:.25rem;font-size:.85rem">
<span>{{ pc.card_number }}</span>
<label class="toggle-switch toggle-sm">
<input type="checkbox" name="showcase_hidden" value="1" {% if pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()">
<span class="toggle-slider"></span>
</label>
</form>
{% endfor %}
</div>
{% endif %}
{% if received_cards %}
<div>
<span style="font-size:.78rem;color:var(--text-muted);margin-right:.5rem">收到</span>
{% for pc in received_cards %}
<form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.3rem;margin-right:.75rem;margin-bottom:.25rem;font-size:.85rem">
<span>{{ pc.card_number }}</span>
<label class="toggle-switch toggle-sm">
<input type="checkbox" name="showcase_hidden" value="1" {% if pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()">
<span class="toggle-slider"></span>
</label>
</form>
{% endfor %}
</div>
{% endif %}
</div>
{% elif p.showcase_enabled %}
<p style="margin-top:.75rem;font-size:.8rem;color:var(--text-muted)">暂无明信片</p>
{% endif %}
</div> </div>
{% endfor %} {% endfor %}
{% else %} {% else %}

View File

@@ -1,5 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}{{ profile_user.username }} 的展示页 - 明信片管理器{% endblock %} {% block title %}{{ profile_user.username }} 的展示页{% endblock %}
{% block navbar %}{% endblock %}
{% block content %} {% block content %}
<div class="section-header"> <div class="section-header">
<h1>📮 {{ profile_user.username }} 的明信片</h1> <h1>📮 {{ profile_user.username }} 的明信片</h1>