jianf/HomeDash
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(web): 搜索框收起态 + admin 入口 + 修正多余滚动

Browse Source 
- 搜索栏默认收起为左下角放大镜悬浮球（52/56px），点它展开成输入框，
  输入框内左侧仍是同一个放大镜，点它收起；Esc 也可收起
- Dashy 页面补右下角 /admin/ 悬浮入口（原先没有任何管理入口）
- 短页面不再凭空可滚动：body 留白 104->84px，并给 #dashy 扣掉同样高度
  （Dashy 的 #dashy 本已撑满 100vh，叠加留白就多出约 134px 滚动）
- 补的备案号页脚改为固定在搜索栏正上方，不再参与文档流撑高页面
- 弹层打开时搜索栏与管理入口一并让位
This commit is contained in:
HomeDash Bot
2026-09-11 17:03:33 +08:00
parent 73f23927d9
commit 80b0e5f51e
2 changed files with 246 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
web/navi.css
View File

@ -10,7 +10,13 @@ html[data-theme] body {
min-width: 0;
overflow-x: hidden;
/* 悬浮搜索栏固定在底部，给内容留出空间，避免遮挡页脚备案号。 */
padding-bottom: 104px !important;
padding-bottom: 84px !important;
}
/* Dashy 的 #dashy 本身撑满 100vh；不扣掉留给悬浮搜索栏的高度，
短页面（极简视图/工作空间）就会凭空多出约 134px 的纵向滚动。 */
html[data-theme] #dashy {
min-height: calc(100vh - 84px) !important;
}
/* Dashy's native filter/settings strip duplicates the portal search and breaks on phones. */
@ -19,7 +25,8 @@ html[data-theme] .minimal-home .title-and-search > form {
display: none !important;
}
html[data-theme] body:has(.modal-overlay) > .navi-search-bar {
html[data-theme] body:has(.modal-overlay) > .navi-search-bar,
html[data-theme] body:has(.modal-overlay) > .navi-footer-host {
visibility: hidden !important;
pointer-events: none !important;
}
@ -84,35 +91,102 @@ html[data-theme] a.item .item-url {
white-space: nowrap;
}
/* 底部搜索：悬浮固定在视口下侧，任何页面/任何滚动位置都可见。 */
/* ── 底部搜索：左下角放大镜悬浮球 ──
收起态只显示一个放大镜图标；点它展开成输入框；
展开后输入框内左侧仍是同一个放大镜按钮，点它收起。 */
html[data-theme] .navi-search-bar {
box-sizing: border-box !important;
position: fixed !important;
left: 50% !important;
left: calc(16px + env(safe-area-inset-left, 0px)) !important;
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
transform: translateX(-50%) !important;
width: min(760px, calc(100% - 28px)) !important;
min-height: 58px !important;
margin: 0 !important;
padding: 7px 8px 7px 18px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
gap: 8px !important;
z-index: 900 !important;
color: #475569 !important;
background: rgba(255, 255, 255, .68) !important;
border: 1px solid rgba(255, 255, 255, .88) !important;
border-radius: 20px !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%) !important;
overflow: hidden !important;
}
html[data-theme] .navi-search-bar > span {
flex: 0 0 20px;
height: 20px;
display: grid;
place-items: center;
html[data-theme] .navi-search-bar[data-state="collapsed"] {
width: 56px !important;
height: 56px !important;
padding: 0 !important;
border-radius: 50% !important;
}
html[data-theme] .navi-search-bar[data-state="open"] {
width: min(560px, calc(100% - 96px)) !important;
min-height: 58px !important;
padding: 7px 8px !important;
border-radius: 20px !important;
}
html[data-theme] .navi-search-bar[data-state="collapsed"] input,
html[data-theme] .navi-search-bar[data-state="collapsed"] .navi-search-submit {
display: none !important;
}
html[data-theme] .navi-search-toggle {
flex: 0 0 42px !important;
width: 42px !important;
height: 42px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
color: #0f172a !important;
background: transparent !important;
border: 0 !important;
border-radius: 50% !important;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme] .navi-search-toggle:hover {
color: #0284c7 !important;
background: rgba(14, 165, 233, .12) !important;
transform: scale(1.06);
}
/* 右侧管理入口：Dashy 页面本身没有去 /admin/ 的链接 */
html[data-theme] .navi-admin-entry {
position: fixed !important;
right: calc(16px + env(safe-area-inset-right, 0px)) !important;
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
width: 52px !important;
height: 52px !important;
display: grid !important;
place-items: center !important;
z-index: 900 !important;
color: #334155 !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
border-radius: 50% !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%) !important;
transition: transform .22s cubic-bezier(.22, 1, .36, 1), color .2s ease, background .2s ease !important;
}
html[data-theme] .navi-admin-entry:hover {
color: #0284c7 !important;
background: rgba(255, 255, 255, .94) !important;
transform: translateY(-1px) scale(1.05);
}
html[data-theme] .navi-admin-entry svg {
width: 22px !important;
height: 22px !important;
}
html[data-theme] body:has(.modal-overlay) > .navi-admin-entry {
visibility: hidden !important;
pointer-events: none !important;
}
html[data-theme] .navi-search-bar input {
@ -134,7 +208,7 @@ html[data-theme] .navi-search-bar input::placeholder {
opacity: 1;
}
html[data-theme] .navi-search-bar button {
html[data-theme] .navi-search-submit {
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
@ -149,7 +223,8 @@ html[data-theme] .navi-search-bar button {
cursor: pointer;
}
html[data-theme] .navi-search-bar button svg {
html[data-theme] .navi-search-toggle svg,
html[data-theme] .navi-search-submit svg {
width: 20px;
height: 20px;
}
@ -334,12 +409,39 @@ html[data-theme] .minimal-section-inner a.item {
}
html[data-theme] .navi-search-bar {
width: calc(100% - 20px) !important;
min-height: 56px !important;
left: calc(10px + env(safe-area-inset-left, 0px)) !important;
bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
padding-left: 15px !important;
}
html[data-theme] .navi-search-bar[data-state="collapsed"] {
width: 52px !important;
height: 52px !important;
}
html[data-theme] .navi-search-bar[data-state="open"] {
width: calc(100% - 86px) !important;
min-height: 56px !important;
border-radius: 18px !important;
}
html[data-theme] .navi-admin-entry {
width: 48px !important;
height: 48px !important;
right: calc(10px + env(safe-area-inset-right, 0px)) !important;
bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-theme] body {
padding-bottom: 78px !important;
}
html[data-theme] #dashy {
min-height: calc(100vh - 78px) !important;
}
html[data-theme] .navi-footer-host {
bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ── 页脚：备案号胶囊 ──
@ -356,10 +458,22 @@ html[data-theme] footer > div {
padding: 0 !important;
}
/* 极简/工作空间视图补的备案号页脚：固定悬浮在搜索栏正上方。
它是「底部固定家具」的一部分，不能再参与文档流，否则会把页面撑高导致多余滚动。 */
html[data-theme] .navi-footer-host {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 890 !important;
display: flex !important;
justify-content: center !important;
padding: 0 8px 6px !important;
padding: 0 8px !important;
pointer-events: none !important;
}
html[data-theme] .navi-footer-host .navi-footer {
pointer-events: auto !important;
}
html[data-theme] .navi-footer {
@ -400,11 +514,6 @@ html[data-theme] .navi-footer-sep {
}
/* ── 工作空间：侧栏与内容区同样走玻璃圆角 ── */
html[data-theme] .work-space,
html[data-theme] .web-content {
padding-bottom: 104px !important;
}
html[data-theme] nav.side-bar {
background: rgba(255, 255, 255, .62) !important;
border-right: 1px solid rgba(255, 255, 255, .6) !important;
@ -439,8 +548,8 @@ html[data-theme] nav.side-bar .side-bar-item:hover {
}
@keyframes navi-bar-in {
from { opacity: 0; transform: translate(-50%, 16px); }
to { opacity: 1; transform: translate(-50%, 0); }
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
html[data-theme] html,
@ -458,20 +567,25 @@ html[data-theme] .work-space {
/* 悬浮搜索栏：从下侧滑入 */
html[data-theme] .navi-search-bar {
animation: navi-bar-in .36s cubic-bezier(.22, 1, .36, 1) both;
transition: box-shadow .24s ease, border-color .24s ease, background .24s ease !important;
transition: box-shadow .24s ease, border-color .24s ease, background .24s ease,
width .28s cubic-bezier(.22, 1, .36, 1), border-radius .28s ease !important;
}
html[data-theme] .navi-search-bar button {
html[data-theme] .navi-admin-entry {
animation: navi-fade-in .42s ease both;
}
html[data-theme] .navi-search-submit {
transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, filter .2s ease !important;
}
html[data-theme] .navi-search-bar button:hover {
html[data-theme] .navi-search-submit:hover {
filter: brightness(1.06);
transform: translateY(-1px) scale(1.04);
box-shadow: 0 12px 26px rgba(37, 99, 235, .34) !important;
}
html[data-theme] .navi-search-bar button:active {
html[data-theme] .navi-search-submit:active {
transform: translateY(0) scale(.96);
}
@ -557,6 +671,7 @@ html[data-theme] .navi-footer a {
html[data-theme] .minimal-section-inner.selected,
html[data-theme] .work-space,
html[data-theme] .navi-search-bar,
html[data-theme] .navi-admin-entry,
html[data-theme] .navi-footer-host,
html[data-theme] div.collapsible-content .item-wrapper,
html[data-theme] .minimal-section-inner .item-wrapper {

141
web/navi.js
View File

@ -5,6 +5,44 @@
const EXT_ATTR = 'data-navi-ext';
const INSTALL_SELECTOR = 'a[href*="/extension/install"]';
const SVG_NS = 'http://www.w3.org/2000/svg';
function svg(paths, opts = {}) {
const el = document.createElementNS(SVG_NS, 'svg');
el.setAttribute('viewBox', opts.viewBox || '0 0 24 24');
el.setAttribute('fill', 'none');
el.setAttribute('stroke', 'currentColor');
el.setAttribute('stroke-width', opts.width || '2.2');
el.setAttribute('stroke-linecap', 'round');
el.setAttribute('stroke-linejoin', 'round');
el.setAttribute('aria-hidden', 'true');
if (opts.size) {
el.setAttribute('width', opts.size);
el.setAttribute('height', opts.size);
}
paths.forEach((p) => {
const node = document.createElementNS(SVG_NS, p.tag);
Object.keys(p.attrs).forEach((k) => node.setAttribute(k, p.attrs[k]));
el.append(node);
});
return el;
}
const magnifierIcon = () => svg([
{ tag: 'circle', attrs: { cx: '11', cy: '11', r: '7.5' } },
{ tag: 'line', attrs: { x1: '20.5', y1: '20.5', x2: '16.2', y2: '16.2' } },
], { size: '20' });
const arrowIcon = () => svg([
{ tag: 'line', attrs: { x1: '5', y1: '12', x2: '19', y2: '12' } },
{ tag: 'polyline', attrs: { points: '13 6 19 12 13 18' } },
]);
const gearIcon = () => svg([
{ tag: 'circle', attrs: { cx: '12', cy: '12', r: '3.2' } },
{ tag: 'path', attrs: { d: 'M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.03 1.56V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 8.9 19.3a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.56-1.03H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.7 8.9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6h.09A1.7 1.7 0 0 0 10.6 3.04V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1.03 1.56 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9v.09a1.7 1.7 0 0 0 1.56 1.03H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1.03z' } },
], { size: '20', width: '1.9' });
function extensionInstalled() {
return document.documentElement.hasAttribute(EXT_ATTR);
}
@ -19,71 +57,83 @@
});
}
// 底部搜索栏：默认收起成一个放大镜悬浮球（左下角），
// 点放大镜展开成输入框，再点输入框里的放大镜收起。
function mountSearch() {
if (document.querySelector('.navi-search-bar')) return;
const form = document.createElement('form');
form.className = 'navi-search-bar';
form.dataset.state = 'collapsed';
form.method = 'GET';
form.action = '/search';
form.target = '_blank';
form.setAttribute('role', 'search');
const icon = document.createElement('span');
const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
iconSvg.setAttribute('width', '18');
iconSvg.setAttribute('height', '18');
iconSvg.setAttribute('viewBox', '0 0 24 24');
iconSvg.setAttribute('fill', 'none');
iconSvg.setAttribute('stroke', 'currentColor');
iconSvg.setAttribute('stroke-width', '2.5');
iconSvg.setAttribute('stroke-linecap', 'round');
iconSvg.setAttribute('stroke-linejoin', 'round');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '11');
circle.setAttribute('cy', '11');
circle.setAttribute('r', '8');
const searchLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
searchLine.setAttribute('x1', '21');
searchLine.setAttribute('y1', '21');
searchLine.setAttribute('x2', '16.65');
searchLine.setAttribute('y2', '16.65');
iconSvg.append(circle, searchLine);
icon.append(iconSvg);
icon.setAttribute('aria-hidden', 'true');
const toggle = document.createElement('button');
toggle.type = 'button';
toggle.className = 'navi-search-toggle';
toggle.setAttribute('aria-label', '展开搜索');
toggle.setAttribute('aria-expanded', 'false');
toggle.append(magnifierIcon());
const input = document.createElement('input');
input.type = 'search';
input.name = 'q';
input.placeholder = '搜索…';
input.autocomplete = 'off';
input.setAttribute('aria-label', '搜索');
input.tabIndex = -1;
input.setAttribute('aria-label', '搜索内容');
const button = document.createElement('button');
button.type = 'submit';
const arrowSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
arrowSvg.setAttribute('viewBox', '0 0 24 24');
arrowSvg.setAttribute('fill', 'none');
arrowSvg.setAttribute('stroke', 'currentColor');
arrowSvg.setAttribute('stroke-width', '2.4');
arrowSvg.setAttribute('stroke-linecap', 'round');
arrowSvg.setAttribute('stroke-linejoin', 'round');
arrowSvg.setAttribute('aria-hidden', 'true');
const arrowLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
arrowLine.setAttribute('x1', '5');
arrowLine.setAttribute('y1', '12');
arrowLine.setAttribute('x2', '19');
arrowLine.setAttribute('y2', '12');
const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
arrowHead.setAttribute('points', '13 6 19 12 13 18');
arrowSvg.append(arrowLine, arrowHead);
button.append(arrowSvg);
button.title = '搜索';
button.setAttribute('aria-label', '搜索');
const submit = document.createElement('button');
submit.type = 'submit';
submit.className = 'navi-search-submit';
submit.setAttribute('aria-label', '开始搜索');
submit.append(arrowIcon());
form.append(icon, input, button);
const setState = (state) => {
const open = state === 'open';
form.dataset.state = open ? 'open' : 'collapsed';
toggle.setAttribute('aria-expanded', String(open));
toggle.setAttribute('aria-label', open ? '收起搜索' : '展开搜索');
input.tabIndex = open ? 0 : -1;
if (open) {
input.focus({ preventScroll: true });
} else {
input.value = '';
input.blur();
}
};
toggle.addEventListener('click', (evt) => {
evt.preventDefault();
setState(form.dataset.state === 'open' ? 'collapsed' : 'open');
});
// Esc 收起（不阻止其它默认行为）
form.addEventListener('keydown', (evt) => {
if (evt.key === 'Escape' && form.dataset.state === 'open') {
evt.stopPropagation();
setState('collapsed');
}
});
form.append(toggle, input, submit);
document.body.append(form);
}
// Dashy 页面没有管理入口：右下角补一个悬浮链接到 /admin/。
function mountAdminEntry() {
if (document.querySelector('.navi-admin-entry')) return;
const link = document.createElement('a');
link.className = 'navi-admin-entry';
link.href = '/admin/';
link.title = '导航管理';
link.setAttribute('aria-label', '导航管理');
link.append(gearIcon());
document.body.append(link);
}
// 极简视图（/minimal）与工作空间视图不渲染 Dashy 页脚，备案号会整段消失。
// 这里从只读的 pageinfo 取回页脚 HTML 补一份，保证每个视图都能看到备案信息。
let footerPending = false;
@ -115,6 +165,7 @@
function run() {
mountSearch();
mountAdminEntry();
hideInstallEntry();
mountFooter();
}