ux improve

app/templates/boxes/form.html

@@ -1,29 +1,51 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="breadcrumb">
+    <a href="/boxes">箱子</a>
+    <span>/</span>
+    <strong>{{ "新建 Box" if not box else "编辑 Box" }}</strong>
+</div>
 <div class="page-header">
-    <h1>{{ page_title }}</h1>
+    <div>
+        <div class="type-tag type-box">Box</div>
+        <h1>{{ page_title }}</h1>
+        <p class="muted">
+            {% if box %}
+            你当前正在编辑一个顶层箱子。
+            {% else %}
+            你当前正在创建一个新的顶层箱子。
+            {% endif %}
+        </p>
+    </div>
     <a href="/boxes">返回箱子列表</a>
 </div>
 
-<form method="post" action="{{ form_action }}" class="stack" enctype="multipart/form-data">
-    <label>
+<form method="post" action="{{ form_action }}" class="stack form-panel" enctype="multipart/form-data">
+    <section class="context-panel">
+        <div class="context-title">当前操作</div>
+        <div class="context-body">
+            <span class="type-tag type-box">Box</span>
+            <span>{{ "创建顶层箱子" if not box else "编辑顶层箱子" }}</span>
+        </div>
+    </section>
+    <label class="form-field">
         名称
-        <input type="text" name="name" value="{{ box.name if box else '' }}" required>
+        <input type="text" name="name" value="{{ box.name if box else '' }}" required autofocus>
     </label>
-    <label>
+    <label class="form-field">
         房间
         <input type="text" name="room" value="{{ box.room if box and box.room else '' }}">
     </label>
-    <label>
+    <label class="form-field">
         状态
         <input type="text" name="status" value="{{ box.status if box and box.status else '' }}">
     </label>
-    <label>
+    <label class="form-field">
         备注
         <textarea name="note" rows="4">{{ box.note if box and box.note else '' }}</textarea>
     </label>
-    <label>
+    <label class="form-field">
         图片
         <input type="file" name="image_file" accept="image/*">
     </label>