feat(admin-ui): 平台订单筛选区可折叠并记忆状态
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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 !!}">
|
||||
@@ -391,7 +397,8 @@
|
||||
<button class="btn btn-sm" type="submit">应用筛选</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="grid-3 mb-20">
|
||||
<div class="card">
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user