feat: 批量处理页面与导航

- 新增 web/batch.html + batch.js：目录树选择器（懒加载，本地后端提供 roots/dirs 接口）、工作流下拉、进度与产物下载 - 四个页面导航栏增加"批量处理"入口；styles.css 补齐批量页样式
2026-08-23 16:25:11 +08:00
parent 711867e79f
commit cc707dda75
7 changed files with 587 additions and 0 deletions
@@ -346,3 +346,150 @@ th {
  pointer-events: auto;
  cursor: crosshair;
 }
+
+/* 批量处理页：明细行的内嵌表格样式。 */
+.batch-detail-row td {
+  background: #fafbfc;
+  padding: 8px 12px;
+}
+
+/* 内嵌表格：无边框、行距紧凑，嵌入批量任务明细行中。 */
+.inner-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.inner-table th {
+  text-align: left;
+  font-size: 12px;
+  color: #666;
+  padding: 4px 8px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.inner-table td {
+  padding: 4px 8px;
+  font-size: 13px;
+  border-bottom: 1px solid #f0f1f3;
+}
+
+/* 批量页创建表单的复选框与标签同行展示。 */
+.form-row .inline {
+  margin-left: 16px;
+  font-weight: 400;
+}
+
+/* 批量页：路径输入框 + "选择文件夹"按钮同行。 */
+.path-picker {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+}
+
+.path-picker input {
+  flex: 1;
+  background: #f7f8fa;
+}
+
+/* 目录树选择器：全屏遮罩 + 居中面板。 */
+.dir-picker {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dir-picker.hidden {
+  display: none;
+}
+
+.dir-picker-panel {
+  width: min(560px, 92vw);
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+}
+
+.dir-picker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+/* 关闭按钮（✕）：无边框文本按钮。 */
+.dir-picker-head .plain {
+  border: none;
+  background: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #666;
+}
+
+.dir-tree {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 0;
+  min-height: 160px;
+}
+
+/* 目录节点行：悬停高亮，选中项加深。 */
+.dir-node {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.dir-node:hover {
+  background: #f3f6fa;
+}
+
+.dir-node.selected {
+  background: #e3edf7;
+  font-weight: 600;
+}
+
+.dir-arrow {
+  width: 20px;
+  color: #888;
+  user-select: none;
+}
+
+.dir-name {
+  margin-left: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dir-empty {
+  padding: 4px 12px 4px 56px;
+  font-size: 13px;
+}
+
+.dir-picker-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.dir-picker-foot .muted {
+  flex: 1;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}