tliu93/2026-moving-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

ux refine

Browse Source
This commit is contained in:
Tianyu Liu
2026-04-19 14:06:31 +02:00
parent e7a2719fa1
commit bda23909bf
10 changed files with 257 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/boxes/form.html
+5 -3
View File
@@ -18,7 +18,7 @@
{% endif %}
</p>
</div>
<a href="/boxes">返回箱子列表</a>
<a class="button button-secondary button-small" href="/boxes">返回箱子列表</a>
</div>
<form method="post" action="{{ form_action }}" class="stack form-panel" enctype="multipart/form-data">
@@ -55,7 +55,7 @@
<img src="/boxes/{{ box.id }}/image" alt="{{ box.name }}" class="detail-image">
<button
type="submit"
class="link-button"
class="button button-danger button-small"
formaction="/boxes/{{ box.id }}/image/delete"
formmethod="post"
>
@@ -63,6 +63,8 @@
</button>
</section>
{% endif %}
<button type="submit">{{ submit_label }}</button>
<div class="form-actions">
<button type="submit" class="button button-primary">{{ submit_label }}</button>
</div>
</form>
{% endblock %}
app/templates/boxes/index.html
+11 -9
View File
@@ -12,17 +12,23 @@
<h1>箱子总览</h1>
<p class="muted">这里管理顶层搬家容器，例如纸箱、行李箱或大收纳箱。</p>
</div>
<a class="button" href="/boxes/new">新建箱子</a>
<a class="button button-primary" href="/boxes/new">新建箱子</a>
</div>
{% if boxes %}
<div class="dense-list">
<div class="overview-grid">
{% for box in boxes %}
<section class="compact-row compact-row-box">
<section
class="compact-row compact-row-box clickable-card overview-card overview-card-box"
data-href="/boxes/{{ box.id }}"
tabindex="0"
role="link"
aria-label="查看箱子 {{ box.name }}"
>
<div class="compact-main">
<div class="row-title-line">
<span class="type-tag type-box">Box</span>
<h2><a href="/boxes/{{ box.id }}">{{ box.name }}</a></h2>
<h2>{{ box.name }}</h2>
</div>
<div class="row-meta-grid">
<span>物品数：{{ box.items|length }}</span>
@@ -31,17 +37,13 @@
</div>
{% if box.note %}<p class="row-note">{{ box.note }}</p>{% endif %}
</div>
<div class="row-actions">
<a href="/boxes/{{ box.id }}">查看详情</a>
<a href="/boxes/{{ box.id }}/edit">编辑</a>
</div>
</section>
{% endfor %}
</div>
{% else %}
<section class="card">
<p>还没有箱子。</p>
<a href="/boxes/new">创建第一个箱子</a>
<a class="button button-primary" href="/boxes/new">创建第一个箱子</a>
</section>
{% endif %}
{% endblock %}
app/templates/boxes/show.html
+26 -25
View File
@@ -13,33 +13,44 @@
<p class="muted">查看这个箱子的基本信息，以及它下面的直接物品。</p>
</div>
<div class="actions">
<a href="/boxes">返回箱子列表</a>
<a href="/search">去搜索</a>
<a class="button" href="/boxes/{{ box.id }}/items/new">添加物品</a>
<a class="button button-secondary button-small" href="/boxes">返回箱子列表</a>
<a class="button button-secondary button-small" href="/search">去搜索</a>
<a class="button button-primary" href="/boxes/{{ box.id }}/items/new">添加物品</a>
</div>
</div>
<section class="card">
<section class="card detail-card detail-card-compact">
{% if box.image_blob %}
<img src="/boxes/{{ box.id }}/image" alt="{{ box.name }}" class="detail-image">
<img src="/boxes/{{ box.id }}/image" alt="{{ box.name }}" class="detail-image detail-image-compact">
{% endif %}
<p><strong>房间：</strong> {{ box.room or '-' }}</p>
<p><strong>状态：</strong> {{ box.status or '-' }}</p>
<p><strong>备注：</strong> {{ box.note or '-' }}</p>
<div class="detail-meta-grid">
<p><strong>房间：</strong> {{ box.room or '-' }}</p>
<p><strong>状态：</strong> {{ box.status or '-' }}</p>
<p class="detail-note"><strong>备注：</strong> {{ box.note or '-' }}</p>
</div>
<div class="actions">
<a href="/boxes/{{ box.id }}/edit">编辑箱子</a>
<a class="button button-secondary button-small" href="/boxes/{{ box.id }}/edit">编辑箱子</a>
<form method="post" action="/boxes/{{ box.id }}/delete">
<button type="submit" class="link-button">删除箱子</button>
<button type="submit" class="button button-danger button-small">删除箱子</button>
</form>
</div>
</section>
<section class="stack">
<h2>物品</h2>
<div class="section-heading">
<h2>内部物品</h2>
<p class="muted">重点浏览区域，点击任意一行可进入物品详情。</p>
</div>
{% if box.items %}
<div class="dense-list">
<div class="overview-grid">
{% for item in box.items %}
<article class="compact-row {{ 'compact-row-container' if item.is_container else 'compact-row-item' }}">
<article
class="compact-row clickable-card overview-card {{ 'compact-row-container' if item.is_container else 'compact-row-item' }}"
data-href="/items/{{ item.id }}"
tabindex="0"
role="link"
aria-label="查看物品 {{ item.name }}"
>
{% if item.image_blob %}
<img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="thumb-image compact-thumb">
{% endif %}
@@ -48,24 +59,14 @@
<span class="type-tag {{ 'type-container' if item.is_container else 'type-item' }}">
{{ "容器型 Item" if item.is_container else "Item" }}
</span>
<h3><a href="/items/{{ item.id }}">{{ item.name }}</a></h3>
<h3>{{ item.name }}</h3>
</div>
<div class="row-meta-grid">
<span>数量：{{ item.quantity if item.quantity is not none else 1 }}</span>
<span>是否容器：{{ "是" if item.is_container else "否" }}</span>
{% if item.note %}<span>有备注</span>{% endif %}
</div>
{% if item.note %}<p class="row-note">{{ item.note }}</p>{% endif %}
</div>
<div class="row-actions">
<a href="/items/{{ item.id }}">查看详情</a>
<a href="/items/{{ item.id }}/edit">编辑</a>
{% if item.is_container %}
<a href="/items/{{ item.id }}">查看内部内容</a>
{% endif %}
<form method="post" action="/items/{{ item.id }}/delete">
<button type="submit" class="link-button">删除</button>
</form>
</div>
</article>
{% endfor %}
</div>