侧边栏：搜索框右侧增加常用网址入口
- 搜索框右侧新增书签按钮，点开显示 config/sidebar_links.php 中配置的网址，新标签页打开 - 未配置时给出去哪里加的提示 - 补充导航测试
This commit is contained in:
parent
efb6d9c992
commit
b22eb61541
12
config/sidebar_links.php
Normal file
12
config/sidebar_links.php
Normal file
@ -0,0 +1,12 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| 侧边栏「常用网址」
|
||||
|--------------------------------------------------------------------------
|
||||
| 搜索框右侧的网址入口，按数组顺序展示，点击在新标签页打开。
|
||||
| 例：['title' => '聚水潭 ERP', 'url' => 'https://example.com'],
|
||||
*/
|
||||
|
||||
return [
|
||||
];
|
||||
@ -162,6 +162,32 @@
|
||||
}
|
||||
.prototype-tag-filter input::placeholder { color: rgba(240, 228, 191, 0.45); }
|
||||
.prototype-tag-filter input:focus { border-color: var(--vip-sidebar-gold, #F0E4BF); background: rgba(240, 228, 191, 0.12); }
|
||||
.prototype-tag-filter__row { display: flex; align-items: center; gap: 0.375rem; }
|
||||
.prototype-tag-filter__row input { flex: 1 1 auto; width: auto; min-width: 0; }
|
||||
.sidebar-links__toggle {
|
||||
display: inline-flex;
|
||||
height: 2rem;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
padding: 0 0.4rem;
|
||||
border: 1px solid rgba(240, 228, 191, 0.25);
|
||||
border-radius: 0.375rem;
|
||||
background: rgba(240, 228, 191, 0.06);
|
||||
color: var(--vip-sidebar-gold, #F0E4BF);
|
||||
font: inherit;
|
||||
font-size: 0.6875rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sidebar-links__toggle:hover,
|
||||
.sidebar-links__toggle[aria-expanded="true"] { border-color: rgba(240, 228, 191, 0.45); background: rgba(240, 228, 191, 0.14); }
|
||||
.sidebar-links__toggle:focus-visible { outline: 2px solid var(--vip-sidebar-gold, #F0E4BF); outline-offset: 2px; }
|
||||
.sidebar-links__toggle .material-icons-outlined { font-size: 1rem; }
|
||||
.sidebar-links__panel { margin: 0.375rem 0 0; padding: 0.25rem; border: 1px solid rgba(240, 228, 191, 0.18); border-radius: 0.375rem; background: rgba(5, 5, 6, 0.4); max-height: 15rem; overflow-y: auto; }
|
||||
.sidebar-links__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 0.25rem; color: var(--vip-sidebar-gold-soft, #DDD0AA); font-size: 0.75rem; text-decoration: none; }
|
||||
.sidebar-links__item:hover { background: rgba(240, 228, 191, 0.08); color: var(--vip-sidebar-gold, #F0E4BF); }
|
||||
.sidebar-links__item .material-icons-outlined { font-size: 0.875rem; }
|
||||
.sidebar-links__empty { padding: 0.4rem 0.5rem; color: rgba(240, 228, 191, 0.55); font-size: 0.6875rem; line-height: 1.4; }
|
||||
.prototype-tag-empty { padding: 0.35rem 0.75rem; color: rgba(240, 228, 191, 0.5); font-size: 0.75rem; }
|
||||
.prototype-tag-navigation { margin: 0 -0.25rem 1.25rem; }
|
||||
.prototype-tag-group { margin-bottom: 1.15rem; }
|
||||
@ -175,7 +201,46 @@
|
||||
</style>
|
||||
|
||||
<div class="prototype-tag-filter">
|
||||
<input type="search" id="prototype-menu-filter" placeholder="搜索菜单，如：快递应付" autocomplete="off" aria-label="搜索菜单">
|
||||
@php
|
||||
$sidebarLinks = collect(config('sidebar_links', []))
|
||||
->filter(fn ($link) => is_array($link) && ! empty($link['url']))
|
||||
->values();
|
||||
@endphp
|
||||
<div class="prototype-tag-filter__row">
|
||||
<input type="search" id="prototype-menu-filter" placeholder="搜索菜单，如：快递应付" autocomplete="off" aria-label="搜索菜单">
|
||||
<button type="button" class="sidebar-links__toggle" data-sidebar-links-toggle aria-expanded="false" aria-controls="sidebar-links-panel" title="常用网址">
|
||||
<span class="material-icons-outlined" aria-hidden="true">bookmarks</span>
|
||||
@if ($sidebarLinks->isNotEmpty())
|
||||
<span>{{ $sidebarLinks->count() }}</span>
|
||||
@endif
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar-links__panel" id="sidebar-links-panel" data-sidebar-links hidden>
|
||||
@forelse ($sidebarLinks as $link)
|
||||
<a class="sidebar-links__item" href="{{ $link['url'] }}" target="_blank" rel="noopener noreferrer">
|
||||
<span class="material-icons-outlined" aria-hidden="true">open_in_new</span>
|
||||
<span>{{ $link['title'] ?? $link['url'] }}</span>
|
||||
</a>
|
||||
@empty
|
||||
<p class="sidebar-links__empty">还没有配置网址，把网址发给我就能加进来。</p>
|
||||
@endforelse
|
||||
</div>
|
||||
<script>
|
||||
(() => {
|
||||
const toggle = document.querySelector('[data-sidebar-links-toggle]');
|
||||
const panel = document.querySelector('[data-sidebar-links]');
|
||||
|
||||
if (!toggle || !panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const open = panel.hidden;
|
||||
panel.hidden = !open;
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="prototype-tag-navigation" aria-label="税务功能导航">
|
||||
|
||||
@ -205,7 +205,28 @@ class NavigationTest extends FeatureTestCase
|
||||
->assertSee('data-open-tabs-list', false)
|
||||
->assertSee('caiwu.open-pages.v1.', false)
|
||||
// 目录 iframe 里的子页面不再重复渲染这条标签栏。
|
||||
->assertSee('window.self !== window.top', false);
|
||||
->assertSee('window.self !== window.top', false)
|
||||
// 搜索框右侧的常用网址入口。
|
||||
->assertSee('data-sidebar-links-toggle', false)
|
||||
->assertSee('data-sidebar-links', false);
|
||||
}
|
||||
|
||||
public function test_sidebar_quick_links_render_from_config(): void
|
||||
{
|
||||
config(['sidebar_links' => [
|
||||
['title' => '聚水潭 ERP', 'url' => 'https://example.com/jst'],
|
||||
['title' => '京麦工作台', 'url' => 'https://example.com/jd'],
|
||||
]]);
|
||||
|
||||
$this->loginAs()
|
||||
->get(route('business.pages.show', [
|
||||
'section' => 'financial-risk-control',
|
||||
'page' => 'store-violation-alert',
|
||||
]))
|
||||
->assertOk()
|
||||
->assertSee('href="https://example.com/jst"', false)
|
||||
->assertSeeText('聚水潭 ERP')
|
||||
->assertSee('target="_blank"', false);
|
||||
}
|
||||
|
||||
public function testProcessStatisticsPageIsAvailableUnderRiskControl(): void
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user