feat(admin-ui): 平台订单筛选区可折叠并记忆状态

This commit is contained in:
萝卜
2026-03-15 17:49:13 +08:00
parent 3011619ee2
commit 7c264d4d12
4 changed files with 96 additions and 4 deletions

View File

@@ -108,6 +108,24 @@
line-height:1.5;
}
/* 可复用:折叠面板(参考 Ant Design Pro 的筛选区交互:可折叠、摘要做成一条可点 Header */
.collapsible > summary{
list-style:none;
cursor:pointer;
}
.collapsible > summary::-webkit-details-marker{
display:none;
}
.collapsible-summary{
user-select:none;
}
.collapsible-body{
margin-top:10px;
}
/* 平台订单:工具区(两列分组卡片化,避免表单散落) */
.tool-grid{
display:grid;

View File

@@ -43,6 +43,37 @@
});
})();
// 通用折叠面板collapsible记忆展开状态localStorage
// 用法:<details data-role="collapsible" data-storage-key="xxx">
(function () {
var nodes = document.querySelectorAll('details[data-role="collapsible"][data-storage-key]');
if (!nodes || nodes.length === 0) {
return;
}
nodes.forEach(function (d) {
var key = d.getAttribute('data-storage-key');
if (!key) {
return;
}
try {
var saved = window.localStorage.getItem(key);
if (saved === 'open') {
d.open = true;
} else if (saved === 'closed') {
d.open = false;
}
} catch (e) {}
d.addEventListener('toggle', function () {
try {
window.localStorage.setItem(key, d.open ? 'open' : 'closed');
} catch (e) {}
});
});
})();
// 通用:将后端 flash 信息同步到 toast更像 Ant Design Pro 的反馈方式)
// 说明:渐进增强。页面仍保留原本的提示块,不依赖 JS。
(function () {

View File

@@ -295,8 +295,14 @@
</div>
</div>
<div class="card mb-20">
<h3>筛选条件</h3>
<details class="card mb-20 collapsible" data-role="collapsible" data-storage-key="admin.platform_orders.filters" open>
<summary class="collapsible-summary">
<div class="flex-between items-center">
<h3 class="mb-0">筛选条件</h3>
<span class="muted muted-xs">点击收起/展开</span>
</div>
</summary>
<div class="collapsible-body">
<form method="get" action="/admin/platform-orders" class="grid-3">
@if($safeBackForLinks !== '')
<input type="hidden" name="back" value="{!! $safeBackForLinks !!}">
@@ -392,6 +398,7 @@
</div>
</form>
</div>
</details>
<div class="grid-3 mb-20">
<div class="card">

View File

@@ -0,0 +1,36 @@
<?php
namespace Tests\Feature;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class AdminPlatformOrderIndexFilterPanelShouldBeCollapsibleTest extends TestCase
{
use RefreshDatabase;
protected function loginAsPlatformAdmin(): void
{
$this->seed();
$this->post('/admin/login', [
'email' => 'platform.admin@demo.local',
'password' => 'Platform@123456',
])->assertRedirect('/admin');
}
public function test_index_filter_panel_should_be_collapsible(): void
{
$this->loginAsPlatformAdmin();
$res = $this->get('/admin/platform-orders');
$res->assertOk();
$html = (string) $res->getContent();
$this->assertStringContainsString('data-role="collapsible"', $html);
$this->assertStringContainsString('data-storage-key="admin.platform_orders.filters"', $html);
$this->assertStringContainsString('<summary', $html);
$this->assertStringContainsString('筛选条件', $html);
}
}