ux refine

app/templates/base.html

@@ -15,6 +15,24 @@
         {% block content %}{% endblock %}
     </main>
     <script>
+        document.addEventListener("click", function (event) {
+            const card = event.target.closest(".clickable-card[data-href]");
+            if (!card) return;
+            if (event.target.closest("a, button, form, input, textarea, select, label")) return;
+
+            window.location.href = card.dataset.href;
+        });
+
+        document.addEventListener("keydown", function (event) {
+            const card = event.target.closest(".clickable-card[data-href]");
+            if (!card) return;
+            if (event.key !== "Enter" && event.key !== " ") return;
+            if (event.target.closest("a, button, form, input, textarea, select, label")) return;
+
+            event.preventDefault();
+            window.location.href = card.dataset.href;
+        });
+
         document.addEventListener("keydown", function (event) {
             if (event.key !== "Enter") return;
             if (event.target.tagName === "TEXTAREA") return;

app/templates/boxes/form.html

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

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

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

app/templates/items/form.html

@@ -23,7 +23,7 @@
             {% endif %}
         </p>
     </div>
-    <a href="/boxes/{{ box.id }}">返回箱子</a>
+    <a class="button button-secondary button-small" href="/boxes/{{ box.id }}">返回箱子</a>
 </div>
 
 <form method="post" action="{{ form_action }}" class="stack form-panel" enctype="multipart/form-data">
@@ -69,7 +69,7 @@
         <img src="/items/{{ item.id }}/image" alt="{{ item.name }}" class="detail-image">
         <button
             type="submit"
-            class="link-button"
+            class="button button-danger button-small"
             formaction="/items/{{ item.id }}/image/delete"
             formmethod="post"
         >
@@ -78,9 +78,9 @@
     </section>
     {% endif %}
     <div class="form-actions">
-        <button type="submit" name="submit_action" value="save">{{ submit_label }}</button>
+        <button type="submit" name="submit_action" value="save" class="button button-primary">{{ submit_label }}</button>
         {% if not item %}
-        <button type="submit" name="submit_action" value="save_and_add_next" class="button-secondary">
+        <button type="submit" name="submit_action" value="save_and_add_next" class="button button-secondary">
             保存并添加下一个
         </button>
         {% endif %}

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>

app/templates/search/index.html

@@ -16,7 +16,7 @@
             value="{{ query }}"
             placeholder="例如：锅、电源线、冬衣、文件袋"
         >
-        <button type="submit">搜索</button>
+        <button type="submit" class="button button-primary">搜索</button>
     </form>
 </section>
 

app/templates/subitems/form.html

@@ -23,7 +23,7 @@
             {% endif %}
         </p>
     </div>
-    <a href="/items/{{ item.id }}">返回物品</a>
+    <a class="button button-secondary button-small" href="/items/{{ item.id }}">返回物品</a>
 </div>
 
 <form method="post" action="{{ form_action }}" class="stack form-panel" enctype="multipart/form-data">
@@ -64,7 +64,7 @@
         <img src="/subitems/{{ subitem.id }}/image" alt="{{ subitem.name }}" class="detail-image">
         <button
             type="submit"
-            class="link-button"
+            class="button button-danger button-small"
             formaction="/subitems/{{ subitem.id }}/image/delete"
             formmethod="post"
         >
@@ -73,9 +73,9 @@
     </section>
     {% endif %}
     <div class="form-actions">
-        <button type="submit" name="submit_action" value="save">{{ submit_label }}</button>
+        <button type="submit" name="submit_action" value="save" class="button button-primary">{{ submit_label }}</button>
         {% if not subitem %}
-        <button type="submit" name="submit_action" value="save_and_add_next" class="button-secondary">
+        <button type="submit" name="submit_action" value="save_and_add_next" class="button button-secondary">
             保存并添加下一个
         </button>
         {% endif %}