ux improve

app/templates/boxes/index.html

@@ -1,24 +1,37 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="breadcrumb">
+    <span>首页</span>
+    <span>/</span>
+    <strong>箱子</strong>
+</div>
 <div class="page-header">
     <div>
-        <h1>箱子</h1>
+        <div class="type-tag type-box">Box</div>
+        <h1>箱子总览</h1>
         <p class="muted">这里管理顶层搬家容器，例如纸箱、行李箱或大收纳箱。</p>
     </div>
     <a class="button" href="/boxes/new">新建箱子</a>
 </div>
 
 {% if boxes %}
-<div class="stack">
+<div class="dense-list">
     {% for box in boxes %}
-    <section class="card">
-        <h2><a href="/boxes/{{ box.id }}">{{ box.name }}</a></h2>
-        <p class="meta">物品数：{{ box.items|length }}</p>
-        {% if box.room %}<p>房间：{{ box.room }}</p>{% endif %}
-        {% if box.status %}<p>状态：{{ box.status }}</p>{% endif %}
-        {% if box.note %}<p>{{ box.note }}</p>{% endif %}
-        <div class="actions">
+    <section class="compact-row compact-row-box">
+        <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>
+            </div>
+            <div class="row-meta-grid">
+                <span>物品数：{{ box.items|length }}</span>
+                <span>房间：{{ box.room or '-' }}</span>
+                <span>状态：{{ box.status or '-' }}</span>
+            </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>