resources/views/business/pages/systemization-todos.blade.php

@@ -47,8 +47,13 @@
         .sys-todo-table [data-sys-todo-row-edit], .sys-todo-table [data-sys-todo-group-edit] { cursor:pointer; }
         .sys-todo-table [data-sys-todo-row-edit]:hover, .sys-todo-table [data-sys-todo-group-edit]:hover { background:#fff4cf; }
         .sys-todo-table [data-sys-todo-row-edit]:focus-visible, .sys-todo-table [data-sys-todo-group-edit]:focus-visible { outline:2px solid var(--sys-gold); outline-offset:-2px; }
-        .sys-todo-table__index-cell { width:3.6rem; min-width:3.6rem; text-align:center; }
+        .sys-todo-table__index-cell { width:4.8rem; min-width:4.8rem; text-align:center; }
+        .sys-todo-table__index-actions { display:inline-flex; align-items:center; justify-content:center; gap:.32rem; }
         .sys-todo-table__index { color:#6d5630; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
+        .sys-todo-table__insert-after { display:inline-flex; align-items:center; justify-content:center; width:1.45rem; height:1.45rem; padding:0; border:1px solid #d8c9aa; border-radius:999px; background:#fffaf0; color:var(--sys-gold); cursor:pointer; }
+        .sys-todo-table__insert-after:hover { border-color:var(--sys-gold); background:var(--sys-gold-soft); color:#6a5129; }
+        .sys-todo-table__insert-after:focus-visible { outline:2px solid var(--sys-gold); outline-offset:2px; }
+        .sys-todo-table__insert-after .material-icons-outlined { font-size:.95rem; line-height:1; }
         .sys-todo-table__group { padding-top:.9rem; padding-bottom:.9rem; background:#fcfaf5; font-weight:600; line-height:1.7; vertical-align:middle; }
         .sys-todo-table__group-content { display:inline-flex; align-items:flex-start; gap:.38rem; min-width:0; }
         .sys-todo-table__group-text { min-width:0; white-space:pre-line; overflow-wrap:anywhere; }
@@ -330,7 +335,7 @@
     @endphp
 
     <div class="sys-todo-table__add">
-        <span>共 {{ number_format($items->count()) }} 条，已全部显示。点击待办事项编辑详情；点击类型或内容可单独修改该组名称。</span>
+        <span>共 {{ number_format($items->count()) }} 条，已全部显示。点击序号旁的＋可在该条之后插入，原后续序号自动顺延；点击待办事项编辑详情，点击类型或内容可单独修改该组名称。</span>
         <button type="button" data-sys-todo-create
                 data-sys-todo-default-category="{{ $lastItem?->category ?? '' }}"
                 data-sys-todo-default-section="{{ $lastSectionLabel }}">
@@ -416,7 +421,21 @@
                             </span>
                         </td>
                     @endif
-                    <td class="sys-todo-table__index-cell"><span class="sys-todo-table__index" title="当前内容内待办序号">{{ (int) $item->item_sequence }}</span></td>
+                    <td class="sys-todo-table__index-cell">
+                        <span class="sys-todo-table__index-actions">
+                            <span class="sys-todo-table__index" title="当前内容内待办序号">{{ (int) $item->item_sequence }}</span>
+                            <button type="button" class="sys-todo-table__insert-after"
+                                    data-sys-todo-insert-after
+                                    data-sys-todo-insert-category="{{ $item->category ?? '' }}"
+                                    data-sys-todo-insert-section="{{ $sectionLabels[$loop->index] ?? '' }}"
+                                    data-sys-todo-insert-position="{{ (int) $item->item_sequence + 1 }}"
+                                    data-sys-todo-insert-after-sequence="{{ (int) $item->item_sequence }}"
+                                    title="在第 {{ (int) $item->item_sequence }} 条后新增一条"
+                                    aria-label="在第 {{ (int) $item->item_sequence }} 条后新增一条">
+                                <span class="material-icons-outlined" aria-hidden="true">add</span>
+                            </button>
+                        </span>
+                    </td>
                     <td class="sys-todo-table__title"
                         tabindex="0"
                         title="点击编辑待办"
@@ -955,7 +974,9 @@
                 form.reset();
                 methodInput.value = currentTodoId ? 'PATCH' : 'POST';
                 form.action = currentTodoId ? routes.update.replace('__TODO__', currentTodoId) : routes.store;
-                title.textContent = currentTodoId ? '编辑待办' : '新增待办';
+                title.textContent = currentTodoId
+                    ? '编辑待办'
+                    : (payload && payload.afterSequence ? '在第 ' + payload.afterSequence + ' 条后新增待办' : '新增待办');
                 deleteButton.hidden = !currentTodoId;
                 if (payload) {
                     setCategoryValue(payload.category);
@@ -984,6 +1005,12 @@
                         Math.max(requestedPosition, 1),
                         Math.max(positionSelect.options.length, 1)
                     ));
+                } else if (payload && Number(payload.insertPosition) > 0) {
+                    var insertPosition = Number(payload.insertPosition);
+                    positionSelect.value = String(Math.min(
+                        Math.max(insertPosition, 1),
+                        Math.max(positionSelect.options.length, 1)
+                    ));
                 }
 
                 existing.replaceChildren();
@@ -1057,6 +1084,16 @@
                     });
                     return;
                 }
+                var insertAfter = event.target.closest('[data-sys-todo-insert-after]');
+                if (insertAfter) {
+                    openDialog({
+                        category: insertAfter.getAttribute('data-sys-todo-insert-category') || '',
+                        section: insertAfter.getAttribute('data-sys-todo-insert-section') || '',
+                        insertPosition: Number(insertAfter.getAttribute('data-sys-todo-insert-position') || 1),
+                        afterSequence: Number(insertAfter.getAttribute('data-sys-todo-insert-after-sequence') || 0),
+                    });
+                    return;
+                }
                 var groupCell = event.target.closest('[data-sys-todo-group-edit]');
                 if (groupCell) {
                     var groupRow = groupCell.closest('tr');

tests/Feature/Business/SystemizationTodosTest.php

@@ -43,6 +43,7 @@ class SystemizationTodosTest extends FeatureTestCase
             ->assertSee('data-sys-todo-section-select', false)
             ->assertSee('data-sys-todo-new-section-input', false)
             ->assertSee('data-sys-todo-position', false)
+            ->assertSee('data-sys-todo-insert-after', false)
             ->assertSeeText('待办事项序号')
             ->assertDontSee('name="type_sequence"', false)
             ->assertDontSee('name="content_sequence"', false)
@@ -52,6 +53,7 @@ class SystemizationTodosTest extends FeatureTestCase
             ->assertDontSee('sys-todo-table__clamp', false)
             ->assertSeeText('＋ 新增类型')
             ->assertSeeText('＋ 新增内容')
+            ->assertSeeText('点击序号旁的＋可在该条之后插入')
             ->assertSee('data-sys-todo-choose-files', false)
             ->assertSee('data-sys-todo-open-delete', false)
             ->assertSee('id="sysTodoDeleteConfirm"', false)
@@ -151,6 +153,17 @@ class SystemizationTodosTest extends FeatureTestCase
             );
         }
 
+        $initialPage = $this->get(route('business.pages.show', [
+            'section' => 'other',
+            'page' => 'systemization-todos',
+        ]))->assertOk()
+            ->assertSee('title="在第 3 条后新增一条"', false)
+            ->assertSee('data-sys-todo-insert-position="4"', false);
+        $this->assertMatchesRegularExpression(
+            '/id="sys-todo-row-' . $items[3]->id . '".*?data-sys-todo-insert-position="4"/s',
+            (string) $initialPage->getContent(),
+        );
+
         $this->post(route('business.systemization-todos.store'), [
             'category' => '收入',
             'section' => '平台收入核对',