ux refine

app/templates/items/show.html

@@ -17,22 +17,23 @@
         <p class="muted">位于箱子 <a href="/boxes/{{ item.box.id }}">{{ item.box.name }}</a> 中</p>
     </div>
     <div class="actions">
-        <a href="/boxes/{{ item.box.id }}">返回箱子</a>
-        <a href="/search">去搜索</a>
-        <a href="/items/{{ item.id }}/edit">编辑物品</a>
+        <a class="button button-secondary button-small" href="/boxes/{{ item.box.id }}">返回箱子</a>
+        <a class="button button-secondary button-small" href="/search">去搜索</a>
+        <a class="button button-secondary button-small" href="/items/{{ item.id }}/edit">编辑物品</a>
     </div>
 </div>
 
-<section class="card">
+<section class="card detail-card detail-card-compact">
     {% if item.image_blob %}
-    <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="detail-image">
+    <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="detail-image detail-image-compact">
     {% endif %}
-    <p><strong>是否容器：</strong> {{ "是" if item.is_container else "否" }}</p>
-    <p><strong>数量：</strong> {{ item.quantity if item.quantity is not none else '-' }}</p>
-    <p><strong>备注：</strong> {{ item.note or '-' }}</p>
+    <div class="detail-meta-grid">
+        <p><strong>数量：</strong> {{ item.quantity if item.quantity is not none else '-' }}</p>
+        <p class="detail-note"><strong>备注：</strong> {{ item.note or '-' }}</p>
+    </div>
     <div class="actions">
         <form method="post" action="/items/{{ item.id }}/delete">
-            <button type="submit" class="link-button">删除物品</button>
+            <button type="submit" class="button button-danger button-small">删除物品</button>
         </form>
     </div>
 </section>
@@ -40,13 +41,22 @@
 {% if item.is_container %}
 <section class="stack">
     <div class="page-header">
-        <h2>子物品</h2>
-        <a class="button" href="/items/{{ item.id }}/subitems/new">添加子物品</a>
+        <div class="section-heading">
+            <h2>内部子物品</h2>
+            <p class="muted">当前容器里装的内容，点击任意一行可进入对应编辑上下文。</p>
+        </div>
+        <a class="button button-primary" href="/items/{{ item.id }}/subitems/new">添加子物品</a>
     </div>
     {% if item.subitems %}
-        <div class="dense-list">
+        <div class="overview-grid">
         {% for subitem in item.subitems %}
-        <article class="compact-row compact-row-subitem">
+        <article
+            class="compact-row clickable-card compact-row-subitem overview-card"
+            data-href="/subitems/{{ subitem.id }}/edit"
+            tabindex="0"
+            role="link"
+            aria-label="查看子物品 {{ subitem.name }}"
+        >
             {% if subitem.image_blob %}
             <img src="/subitems/{{ subitem.id }}/image" alt="{{ subitem.name }}" class="thumb-image compact-thumb">
             {% endif %}
@@ -61,12 +71,6 @@
                 </div>
                 {% if subitem.note %}<p class="row-note">备注：{{ subitem.note }}</p>{% endif %}
             </div>
-            <div class="row-actions">
-                <a href="/subitems/{{ subitem.id }}/edit">编辑</a>
-                <form method="post" action="/subitems/{{ subitem.id }}/delete">
-                    <button type="submit" class="link-button">删除</button>
-                </form>
-            </div>
         </article>
         {% endfor %}
         </div>