ux improve

app/templates/boxes/show.html

@@ -1,8 +1,14 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="breadcrumb">
+    <a href="/boxes">箱子</a>
+    <span>/</span>
+    <strong>{{ box.name }}</strong>
+</div>
 <div class="page-header">
     <div>
+        <div class="type-tag type-box">Box</div>
         <h1>{{ box.name }}</h1>
         <p class="muted">查看这个箱子的基本信息，以及它下面的直接物品。</p>
     </div>
@@ -31,16 +37,26 @@
 <section class="stack">
     <h2>物品</h2>
     {% if box.items %}
+        <div class="dense-list">
         {% for item in box.items %}
-        <article class="card">
+        <article class="compact-row {{ 'compact-row-container' if item.is_container else 'compact-row-item' }}">
             {% if item.image_blob %}
-            <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="thumb-image">
+            <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="thumb-image compact-thumb">
             {% endif %}
-            <h3><a href="/items/{{ item.id }}">{{ item.name }}</a></h3>
-            <p><strong>是否容器：</strong> {{ "是" if item.is_container else "否" }}</p>
-            {% if item.quantity is not none %}<p><strong>数量：</strong> {{ item.quantity }}</p>{% endif %}
-            {% if item.note %}<p><strong>备注：</strong> {{ item.note }}</p>{% endif %}
-            <div class="actions">
+            <div class="compact-main">
+                <div class="row-title-line">
+                    <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>
+                </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>
+                </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 %}
@@ -52,6 +68,7 @@
             </div>
         </article>
         {% endfor %}
+        </div>
     {% else %}
     <section class="card">
         <p>这个箱子里还没有物品。</p>