azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish navigation and pipeline flow

Browse Source
This commit is contained in:
iye
2026-05-28 15:35:32 +08:00
parent bbe29622c2
commit df7b90934a
8 changed files with 782 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
电商AI平台/assets/icons.js
+2
View File
@@ -20,6 +20,8 @@
search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/>',
list: '<path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/>',
chevronLeft: '<path d="m15 18-6-6 6-6"/>',
chevronRight: '<path d="m9 18 6-6-6-6"/>',
check: '<path d="M20 6 9 17l-5-5"/>',
x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
plus: '<path d="M12 5v14"/><path d="M5 12h14"/>',
电商AI平台/assets/restraint.css
+100 -3
View File
@@ -218,7 +218,13 @@ img, svg, video { display: block; max-width: 100%; }
.divider { height: 1px; background: var(--border-faint); margin: 16px 0; }
/* ─── App shell ─── */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.app {
display: grid;
grid-template-columns: 248px 1fr;
min-height: 100vh;
transition: grid-template-columns var(--t-base);
}
body.sidebar-collapsed .app { grid-template-columns: 96px 1fr; }
/* ─── Sidebar ─── */
aside.sidebar {
@@ -229,12 +235,61 @@ aside.sidebar {
top: 0;
height: 100vh;
overflow-y: auto;
transition: padding var(--t-base);
}
.brand { display: flex; align-items: center; padding: 2px 8px 16px; min-height: 44px; }
.brand-logo { display: block; width: 142px; height: auto; margin: -8px 0 -6px -8px; object-fit: contain; }
.sidebar-head {
display: flex;
align-items: center;
padding: 2px 8px 16px;
min-height: 44px;
}
.brand { display: flex; align-items: center; min-width: 0; color: var(--accent-black); }
.brand-clip {
display: block;
width: 142px;
overflow: hidden;
transition: width var(--t-base);
}
.brand-logo { display: block; width: 142px; max-width: none; height: auto; margin: -8px 0 -6px -8px; object-fit: contain; }
.brand-mark, .flame { width: 22px; height: 22px; color: var(--heat); }
.brand-mark svg, .flame svg { width: 100%; height: 100%; }
.brand .name { font-weight: 600; font-size: 18px; letter-spacing: -.012em; color: var(--accent-black); }
.sidebar-toggle {
position: fixed;
top: 0;
left: 220px;
z-index: 70;
width: 28px;
height: 100vh;
border: 0;
border-radius: 0;
background: transparent;
color: var(--black-alpha-48);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
pointer-events: auto;
transition: color var(--t-base), background var(--t-base);
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
background: var(--black-alpha-4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--accent-black);
outline: none;
}
.sidebar-toggle-icon {
display: block;
opacity: 0;
line-height: 1;
transition: opacity var(--t-base);
}
.sidebar-toggle:hover .sidebar-toggle-icon,
.sidebar-toggle:focus-visible .sidebar-toggle-icon { opacity: 1; }
.sidebar-toggle-icon--expand { display: none; }
/* sidebar search · Ctrl K Inter Bold 平铺 */
.search-box {
@@ -323,6 +378,47 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
}
.user .em { font-size: 13px; color: var(--accent-black); }
body.sidebar-collapsed aside.sidebar { padding: 22px 12px; }
body.sidebar-collapsed .sidebar-head { gap: 6px; padding: 2px 0 16px; }
body.sidebar-collapsed .brand-clip {
width: 34px;
height: 34px;
display: flex;
align-items: center;
}
body.sidebar-collapsed .sidebar-toggle { left: 68px; }
body.sidebar-collapsed .sidebar-toggle-icon--collapse { display: none; }
body.sidebar-collapsed .sidebar-toggle-icon--expand { display: block; }
body.sidebar-collapsed .search-box {
justify-content: center;
gap: 0;
padding: 9px 0;
cursor: pointer;
}
body.sidebar-collapsed .search-box input,
body.sidebar-collapsed .search-box .kbd,
body.sidebar-collapsed aside.sidebar nav a span,
body.sidebar-collapsed aside.sidebar nav a .pill-mini,
body.sidebar-collapsed .user .em { display: none; }
body.sidebar-collapsed .nav-section {
height: 1px;
margin: 10px 0 8px;
padding: 0;
overflow: hidden;
color: transparent;
background: var(--border-faint);
}
body.sidebar-collapsed aside.sidebar nav a {
justify-content: center;
gap: 0;
padding: 10px 0;
}
body.sidebar-collapsed .aside-foot { padding-top: 12px; }
body.sidebar-collapsed .user {
justify-content: center;
padding: 8px 0;
}
/* ─── Main + grid background ─── */
main { position: relative; background: var(--background-base); min-width: 0; }
.grid-bg {
@@ -2028,6 +2124,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
@media (max-width: 1100px) {
.app { grid-template-columns: 1fr; }
aside.sidebar { display: none; }
.sidebar-toggle { display: none; }
.stats { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(2) { border-right: 0; }
.stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--border-faint); }
电商AI平台/assets/shell.js
+33 -4
View File
@@ -8,6 +8,7 @@
============================================================ */
const ShellIcon = (name, opts) => window.IconKit ? window.IconKit.svg(name, opts) : '';
const SHELL_SIDEBAR_COLLAPSED_KEY = 'airshelf:sidebar-collapsed';
const NAV = [
{
@@ -64,7 +65,7 @@ const SHELL_COMMANDS = [
window.Shell = {
render({ active = '', crumbs = [], balance = '¥327.40', topActions = '' } = {}) {
const navHtml = NAV.map(n => `
<a href="${n.href}" class="${active === n.id ? 'active' : ''}">
<a href="${n.href}" class="${active === n.id ? 'active' : ''}" title="${n.label}" aria-label="${n.label}">
${n.icon}
<span>${n.label}</span>
${n.badge ? `<span class="pill-mini">${n.badge}</span>` : ''}
@@ -73,10 +74,16 @@ window.Shell = {
const sidebar = `
<aside class="sidebar">
<div class="brand">
<img class="brand-logo" src="assets/logo.png" alt="Airshelf">
<div class="sidebar-head">
<a class="brand" href="index.html" aria-label="Airshelf 工作台">
<span class="brand-clip"><img class="brand-logo" src="assets/logo.png" alt="Airshelf"></span>
</a>
</div>
<div class="search-box" onclick="Shell.openCommandPalette()">
<button class="sidebar-toggle" type="button" onclick="Shell.toggleSidebarCollapse()" aria-label="收窄导航" title="收窄导航">
<span class="sidebar-toggle-icon sidebar-toggle-icon--collapse">${ShellIcon('chevronLeft', { size: 18, strokeWidth: 1.8 })}</span>
<span class="sidebar-toggle-icon sidebar-toggle-icon--expand">${ShellIcon('chevronRight', { size: 18, strokeWidth: 1.8 })}</span>
</button>
<div class="search-box" onclick="Shell.openCommandPalette()" title="搜索">
${ShellIcon('search')}
<input id="global-search" placeholder="搜索" readonly aria-label="打开全局搜索"/>
<span class="kbd">Ctrl K</span>
@@ -328,9 +335,11 @@ window.Shell = {
const app = document.createElement('div');
app.className = 'app';
app.innerHTML = sidebar + `<main>${decorations}${topbar}<div class="content" id="page-content">${cornerMarks}</div></main>`;
this.applySidebarCollapse(this.isSidebarCollapsed());
const src = document.getElementById('page');
document.body.prepend(app);
this.applySidebarCollapse(this.isSidebarCollapsed());
if (src) {
// 把页面 body 内容追加到 .content,保留 4 个 corner-mark SVG
document.getElementById('page-content').insertAdjacentHTML('beforeend', src.innerHTML);
@@ -352,6 +361,26 @@ window.Shell = {
this._bindGlobalChrome();
},
isSidebarCollapsed() {
return localStorage.getItem(SHELL_SIDEBAR_COLLAPSED_KEY) === '1';
},
applySidebarCollapse(collapsed) {
document.body.classList.toggle('sidebar-collapsed', !!collapsed);
const btn = document.querySelector('.sidebar-toggle');
if (!btn) return;
const label = collapsed ? '展开导航' : '收窄导航';
btn.setAttribute('aria-label', label);
btn.setAttribute('title', label);
btn.setAttribute('aria-pressed', collapsed ? 'true' : 'false');
},
toggleSidebarCollapse() {
const next = !this.isSidebarCollapsed();
localStorage.setItem(SHELL_SIDEBAR_COLLAPSED_KEY, next ? '1' : '0');
this.applySidebarCollapse(next);
},
_esc(s) {
return String(s ?? '').replace(/[&<>"']/g, c => ({
'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'