From a884da7057100ee2beb055e2749607db9ff6590f Mon Sep 17 00:00:00 2001
From: renshen <1005457301@qq.com>
Date: Tue, 13 Oct 2026 14:57:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=20+=20=E5=B7=B2=E6=89=93=E5=BC=80=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=87=E7=AD=BE=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1）侧边栏菜单上方新增搜索框：按关键字过滤菜单项（如输「快递应付」直接定位），
   无匹配时给出提示，Esc 清空。
2）页面顶部新增「已打开页面」标签栏：点开过的业务页面并排固定在页面上方，
   点标签直接切回（回到最近一次带筛选的地址）；同一张页面按路径去重；
   标签按账号存在浏览器本地（localStorage），没退出登录就一直保留；
   支持单个关闭和「清空（保留当前页）」，最多并排 15 个，超出横向滚动。
   钉钉单页入口模式下不显示这个标签栏。
---
 .../pages/partials/open-page-tabs.blade.php   | 177 ++++++++++++++++++
 .../views/components/layouts/admin.blade.php  |   4 +
 .../components/layouts/admin/menu.blade.php   |  65 +++++++
 .../Business/StoreViolationAlertPageTest.php  |   1 +
 tests/Feature/Settings/NavigationTest.php     |  17 ++
 5 files changed, 264 insertions(+)
 create mode 100644 resources/views/business/pages/partials/open-page-tabs.blade.php

diff --git a/resources/views/business/pages/partials/open-page-tabs.blade.php b/resources/views/business/pages/partials/open-page-tabs.blade.php
new file mode 100644
index 00000000..931d2de6
--- /dev/null
+++ b/resources/views/business/pages/partials/open-page-tabs.blade.php
@@ -0,0 +1,177 @@
+{{--
+    已打开页面标签栏：点开过的业务页面固定在顶部并排显示，方便来回切换；
+    只要没退出登录就一直保留（按账号存在浏览器本地，不外传）。
+--}}
+<div class="open-tabs" data-open-tabs data-user-id="{{ user()->id }}" hidden>
+    <div class="open-tabs__scroll">
+        <div class="open-tabs__list" data-open-tabs-list role="tablist" aria-label="已打开页面"></div>
+    </div>
+    <button type="button" class="open-tabs__clear" data-open-tabs-clear title="清空已打开页面（当前页面保留）">清空</button>
+</div>
+
+<style>
+    .open-tabs {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin: 0 0 0.75rem;
+        padding: 0.35rem 0.5rem;
+        border: 1px solid var(--vip-border, #e7e0d5);
+        border-radius: 0.625rem;
+        background: var(--vip-surface, #fff);
+    }
+    .open-tabs[hidden] { display: none; }
+    .open-tabs__scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
+    .open-tabs__list { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
+    .open-tabs__tab {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        max-width: 15rem;
+        padding: 0.3rem 0.5rem 0.3rem 0.65rem;
+        border: 1px solid var(--vip-border, #e7e0d5);
+        border-radius: 0.5rem;
+        background: #fbf8f0;
+        color: var(--vip-content-ink, #171717);
+        font-size: 0.75rem;
+        text-decoration: none;
+    }
+    .open-tabs__tab:hover { border-color: var(--vip-content-accent, #b9954f); color: var(--vip-content-accent-dark, #856632); }
+    .open-tabs__tab.is-active {
+        border-color: var(--vip-content-accent-dark, #856632);
+        background: var(--vip-content-accent-soft, #f7f0de);
+        color: var(--vip-content-accent-dark, #856632);
+        font-weight: 600;
+    }
+    .open-tabs__label { overflow: hidden; text-overflow: ellipsis; }
+    .open-tabs__close {
+        flex: 0 0 auto;
+        width: 1rem;
+        height: 1rem;
+        padding: 0;
+        border: 0;
+        border-radius: 50%;
+        background: transparent;
+        color: inherit;
+        font-size: 0.875rem;
+        line-height: 1;
+        cursor: pointer;
+        opacity: 0.55;
+    }
+    .open-tabs__close:hover { background: rgba(133, 102, 50, 0.15); opacity: 1; }
+    .open-tabs__clear {
+        flex: 0 0 auto;
+        height: 1.6rem;
+        padding: 0 0.5rem;
+        border: 1px solid var(--vip-border, #e7e0d5);
+        border-radius: 0.5rem;
+        background: #fff;
+        color: var(--vip-content-muted, #595959);
+        font-size: 0.6875rem;
+        cursor: pointer;
+    }
+    .open-tabs__clear:hover { border-color: var(--vip-content-accent-dark, #856632); color: var(--vip-content-accent-dark, #856632); }
+</style>
+
+<script>
+    (() => {
+        const root = document.querySelector('[data-open-tabs]');
+        if (!root) {
+            return;
+        }
+        const list = root.querySelector('[data-open-tabs-list]');
+        const storageKey = 'caiwu.open-pages.v1.' + (root.dataset.userId || 'anon');
+        const maxTabs = 15;
+
+        const read = () => {
+            try {
+                const parsed = JSON.parse(window.localStorage.getItem(storageKey) || '[]');
+                return Array.isArray(parsed) ? parsed.filter((item) => item && typeof item.url === 'string' && typeof item.path === 'string') : [];
+            } catch (_) {
+                return [];
+            }
+        };
+        const save = (items) => {
+            try {
+                window.localStorage.setItem(storageKey, JSON.stringify(items));
+            } catch (_) { /* 隐私模式下忽略 */ }
+        };
+
+        const currentUrl = window.location.pathname + window.location.search;
+        const currentPath = window.location.pathname;
+        const isBusinessPage = /^\/\d+\/workspace\//.test(window.location.pathname);
+        const pageTitle = () => (document.title || '').split(' - ')[0].trim() || window.location.pathname;
+
+        let items = read();
+        if (isBusinessPage) {
+            // 同一张页面（按路径去重）只保留一个标签，点击标签回到最近一次带筛选的地址。
+            const existing = items.find((item) => item.path === currentPath);
+            if (existing) {
+                existing.title = pageTitle();
+                existing.url = currentUrl;
+            } else {
+                items.push({ path: currentPath, url: currentUrl, title: pageTitle() });
+            }
+            items = items.slice(-maxTabs);
+            save(items);
+        }
+
+        if (!items.length) {
+            return;
+        }
+        root.hidden = false;
+
+        const render = () => {
+            list.innerHTML = items.map((item) => {
+                const active = item.path === currentPath ? ' is-active' : '';
+                const title = String(item.title || item.url).replace(/[&<>"']/g, (ch) => ({
+                    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+                }[ch]));
+                const href = item.url.replace(/[&<>"']/g, (ch) => ({
+                    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+                }[ch]));
+
+                return '<a class="open-tabs__tab' + active + '" href="' + href + '" role="tab"'
+                    + (active ? ' aria-current="page"' : '') + ' title="' + title + '">'
+                    + '<span class="open-tabs__label">' + title + '</span>'
+                    + '<button type="button" class="open-tabs__close" data-open-tab-close="' + href + '" aria-label="关闭 ' + title + '">×</button>'
+                    + '</a>';
+            }).join('');
+        };
+
+        render();
+
+        list.addEventListener('click', (event) => {
+            const button = event.target.closest('[data-open-tab-close]');
+            if (!button) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const url = button.getAttribute('data-open-tab-close');
+            const index = items.findIndex((item) => item.url === url);
+            const wasActive = items[index] ? items[index].path === currentPath : false;
+            items = items.filter((item) => item.url !== url);
+            save(items);
+            if (wasActive) {
+                const fallback = items[Math.max(0, index - 1)] || items[0];
+                if (fallback && fallback.url) {
+                    window.location.assign(fallback.url);
+                    return;
+                }
+            }
+            render();
+        });
+
+        root.querySelector('[data-open-tabs-clear]')?.addEventListener('click', () => {
+            items = items.filter((item) => item.path === currentPath);
+            save(items);
+            if (!items.length) {
+                root.hidden = true;
+                list.innerHTML = '';
+                return;
+            }
+            render();
+        });
+    })();
+</script>
diff --git a/resources/views/components/layouts/admin.blade.php b/resources/views/components/layouts/admin.blade.php
index 1075224e..026eec1b 100644
--- a/resources/views/components/layouts/admin.blade.php
+++ b/resources/views/components/layouts/admin.blade.php
@@ -92,6 +92,10 @@
                         </x-slot>
                     </x-layouts.admin.header>
 
+                    @unless ($focusEntry)
+                        @include('business.pages.partials.open-page-tabs')
+                    @endunless
+
                     <x-layouts.admin.content>
                         <livewire:notification.browser />
 
diff --git a/resources/views/components/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
index 75ff220f..687c82cb 100644
--- a/resources/views/components/layouts/admin/menu.blade.php
+++ b/resources/views/components/layouts/admin/menu.blade.php
@@ -199,6 +199,22 @@
         @endphp
 
         <style>
+            .prototype-tag-filter { margin: 0 0 1rem; }
+            .prototype-tag-filter input {
+                width: 100%;
+                height: 2rem;
+                padding: 0 0.6rem;
+                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.75rem;
+                outline: none;
+            }
+            .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-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; }
             .prototype-tag-group-title { padding: 0 0.75rem 0.45rem; color: var(--vip-sidebar-gold-soft, #DDD0AA); font-size: 0.6875rem; line-height: 1rem; }
@@ -210,6 +226,10 @@
             .prototype-tag-link > span:nth-child(2) { flex: 1; white-space: nowrap; }
         </style>
 
+        <div class="prototype-tag-filter">
+            <input type="search" id="prototype-menu-filter" placeholder="搜索菜单，如：快递应付" autocomplete="off" aria-label="搜索菜单">
+        </div>
+
         <div class="prototype-tag-navigation" aria-label="税务功能导航">
             @foreach ($prototypeGroups as $group)
                 <section class="prototype-tag-group">
@@ -226,6 +246,7 @@
                     @endforeach
                 </section>
             @endforeach
+            <div class="prototype-tag-empty" data-menu-filter-empty hidden>没有匹配的菜单</div>
         </div>
 
         <div class="main-menu transform">
@@ -347,3 +368,47 @@
 </div>
 
 @stack('menu_end')
+
+<script>
+    // 侧边栏菜单搜索：按关键字过滤菜单项，方便快速找到页面。
+    (() => {
+        const input = document.getElementById('prototype-menu-filter');
+        if (!input) {
+            return;
+        }
+        const nav = document.querySelector('.prototype-tag-navigation');
+        if (!nav) {
+            return;
+        }
+        const groups = Array.from(nav.querySelectorAll('.prototype-tag-group'));
+        const empty = nav.querySelector('[data-menu-filter-empty]');
+
+        const apply = () => {
+            const keyword = input.value.trim().toLowerCase();
+            let total = 0;
+            groups.forEach((group) => {
+                let visible = 0;
+                group.querySelectorAll('.prototype-tag-link').forEach((link) => {
+                    const match = keyword === '' || link.textContent.trim().toLowerCase().includes(keyword);
+                    link.style.display = match ? '' : 'none';
+                    if (match) {
+                        visible += 1;
+                    }
+                });
+                group.style.display = visible > 0 ? '' : 'none';
+                total += visible;
+            });
+            if (empty) {
+                empty.hidden = total > 0;
+            }
+        };
+
+        input.addEventListener('input', apply);
+        input.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                input.value = '';
+                apply();
+            }
+        });
+    })();
+</script>
diff --git a/tests/Feature/Business/StoreViolationAlertPageTest.php b/tests/Feature/Business/StoreViolationAlertPageTest.php
index 171b7a1a..2b2e3259 100644
--- a/tests/Feature/Business/StoreViolationAlertPageTest.php
+++ b/tests/Feature/Business/StoreViolationAlertPageTest.php
@@ -149,6 +149,7 @@ class StoreViolationAlertPageTest extends FeatureTestCase
             ]))
             ->assertOk()
             ->assertDontSee('id="sidenav-main"', false)
+            ->assertDontSee('data-open-tabs', false)
             ->assertSeeText('店铺违规信息预警');
 
         // 同目录下的另一个页面（流程统计）在钉钉里同样是单页模式。
diff --git a/tests/Feature/Settings/NavigationTest.php b/tests/Feature/Settings/NavigationTest.php
index 851c5832..f92217f9 100644
--- a/tests/Feature/Settings/NavigationTest.php
+++ b/tests/Feature/Settings/NavigationTest.php
@@ -188,6 +188,23 @@ class NavigationTest extends FeatureTestCase
             ->assertSee('/workspace/financial-risk-control/store-violation-alert', false);
     }
 
+    public function test_business_pages_render_menu_filter_and_open_page_tabs(): void
+    {
+        $this->loginAs()
+            ->get(route('business.pages.show', [
+                'section' => 'financial-risk-control',
+                'page' => 'store-violation-alert',
+            ]))
+            ->assertOk()
+            // 侧边栏菜单搜索框（方便按名称找页面）。
+            ->assertSee('id="prototype-menu-filter"', false)
+            ->assertSee('prototype-menu-filter', false)
+            // 已打开页面标签栏（固定在页面上方，点开的页面并排显示）。
+            ->assertSee('data-open-tabs', false)
+            ->assertSee('data-open-tabs-list', false)
+            ->assertSee('caiwu.open-pages.v1.', false);
+    }
+
     public function testProcessStatisticsPageIsAvailableUnderRiskControl(): void
     {
         $this->loginAs()