feat: 完善文档和界面，增加盒子类型支持及批量新增功能

templates/index.html

@@ -13,19 +13,36 @@
 	</header>
 
 	<main class="container">
-		<h2>大盒列表</h2>
-		<section class="box-list">
-			{% for item in box_cards %}
-			<article class="box-card">
-				<h3>{{ item.box.name }}</h3>
-				<p>{{ item.box.description or '暂无描述' }}</p>
-				<p>已使用: {{ item.used_count }}/28</p>
-				<a class="btn" href="{{ url_for('view_box', box_id=item.box.id) }}">进入 28 宫格</a>
-			</article>
-			{% else %}
-			<p>暂无大盒数据，请先初始化数据库。</p>
-			{% endfor %}
+		<h2>容器列表</h2>
+
+		{% for key, meta in box_types.items() %}
+		<section class="group-panel panel">
+			<div class="group-title-row">
+				<h3>{{ meta.label }}</h3>
+				<span class="group-desc">{{ meta.default_desc }}</span>
+			</div>
+
+			<form class="new-box-form" method="post" action="{{ url_for('create_box') }}">
+				<input type="hidden" name="box_type" value="{{ key }}">
+				<input type="text" name="name" placeholder="新增盒子名称" required>
+				<input type="text" name="description" placeholder="备注(可选)">
+				<button class="btn" type="submit">新增盒子</button>
+			</form>
+
+			<section class="box-list">
+				{% for item in groups[key] %}
+				<article class="box-card">
+					<h4>{{ item.box.name }}</h4>
+					<p>{{ item.box.description or '暂无描述' }}</p>
+					<p>已使用: {{ item.used_count }}/{{ item.box.slot_capacity }}</p>
+					<a class="btn" href="{{ url_for('view_box', box_id=item.box.id) }}">进入列表</a>
+				</article>
+				{% else %}
+				<p>当前分类还没有盒子，先新增一个。</p>
+				{% endfor %}
+			</section>
 		</section>
+		{% endfor %}
 	</main>
 </body>
 </html>