diff --git a/电商AI平台/assets/icons.js b/电商AI平台/assets/icons.js
index 44ff598..eda9f3d 100644
--- a/电商AI平台/assets/icons.js
+++ b/电商AI平台/assets/icons.js
@@ -20,6 +20,8 @@
search: '',
bell: '',
list: '',
+ chevronLeft: '',
+ chevronRight: '',
check: '',
x: '',
plus: '',
diff --git a/电商AI平台/assets/restraint.css b/电商AI平台/assets/restraint.css
index c574e03..bcf4a78 100644
--- a/电商AI平台/assets/restraint.css
+++ b/电商AI平台/assets/restraint.css
@@ -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); }
diff --git a/电商AI平台/assets/shell.js b/电商AI平台/assets/shell.js
index 38a5ebb..8bd3bd9 100644
--- a/电商AI平台/assets/shell.js
+++ b/电商AI平台/assets/shell.js
@@ -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 => `
-
+
${n.icon}
${n.label}
${n.badge ? `${n.badge}` : ''}
@@ -73,10 +74,16 @@ window.Shell = {
const sidebar = `