ux refine

app/templates/boxes/index.html

@@ -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 %}