freedak/stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI/UX全面优化 — CSS变量体系/a11y无障碍/Admin角色化/骨架屏/打印样式

Browse Source
This commit is contained in:
selfrelease
2026-07-18 07:57:23 +08:00
parent 2b5a32ca1e
commit 4b42eb80fd
15 changed files with 1519 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stock-html/templates/admin.html
+9 -5
View File
@@ -8,17 +8,19 @@
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
:root {
--bg-dark: #0a0a0a;
--bg-dark: #020617;
--bg-glass: rgba(255, 255, 255, 0.05);
--bg-glass-hover: rgba(255, 255, 255, 0.08);
--bg-content: #0f172a;
--border-glass: rgba(255, 255, 255, 0.1);
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.4);
--accent: #ffffff;
--accent: #fbbf24;
--primary: #fbbf24;
--success: #00ff88;
--danger: #ff4444;
--warning: #ffaa00;
--warning: #fbbf24;
--info: #3b82f6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -29,12 +31,13 @@
color: var(--text-primary);
padding-bottom: env(safe-area-inset-bottom);
}
.admin-wrap { max-width: 800px; margin: 0 auto; padding: 20px 16px; padding-top: max(20px, env(safe-area-inset-top)); }
.admin-wrap { max-width: 800px; margin: 0 auto; padding: 20px 16px; padding-top: max(20px, env(safe-area-inset-top)); background: var(--bg-content); min-height: 100vh; }
/* Header */
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.admin-header h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
.admin-header h1 .icon { width: 22px; height: 22px; opacity: 0.9; }
.admin-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; background: rgba(251,191,36,0.15); color: var(--accent); border: 1px solid rgba(251,191,36,0.3); }
.back-link { color: var(--text-muted); text-decoration: none; font-size: 13px; display: flex; align-items: center; gap: 4px; transition: color 0.2s; }
.back-link:hover { color: var(--text-primary); }
.back-link svg { width: 14px; height: 14px; }
@@ -43,7 +46,7 @@
.nav-tabs { display: flex; gap: 2px; margin-bottom: 20px; background: var(--bg-glass); border-radius: 12px; padding: 3px; }
.nav-tab { flex: 1; padding: 8px 4px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 10px; font-size: 13px; font-weight: 500; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav-tab svg { width: 18px; height: 18px; opacity: 0.5; transition: opacity 0.2s; }
.nav-tab.active { background: var(--bg-glass-hover); color: var(--text-primary); }
.nav-tab.active { background: var(--bg-glass-hover); color: var(--accent); }
.nav-tab.active svg { opacity: 1; }
.nav-tab:hover:not(.active) { color: var(--text-secondary); }
@@ -265,6 +268,7 @@
<h1>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
管理后台
<span class="admin-badge">ADMIN</span>
</h1>
<a class="back-link" href="javascript:void(0)" onclick="if(window.opener||window.history.length<=1){window.close()}else{window.location.href='/'}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>