tz/ERP
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面布局优化

Browse Source
This commit is contained in:
zzh 2026-01-15 14:48:40 +08:00
parent ae058ccf4f
commit e5a2be8aa6
9 changed files with 107 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/assets/styles.css
View File

@ -2572,8 +2572,10 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{
.topnav-item{position:relative;display:flex;align-items:center;gap:4px;padding:8px 14px;color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all 0.2s ease;white-space:nowrap} .topnav-item{position:relative;display:flex;align-items:center;gap:4px;padding:8px 14px;color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all 0.2s ease;white-space:nowrap}
.topnav-item:hover,.topnav-item.active{background:rgba(79,140,255,0.1);color:var(--text)} .topnav-item:hover,.topnav-item.active{background:rgba(79,140,255,0.1);color:var(--text)}
.topnav-item.active{color:var(--primary);background:rgba(79,140,255,0.15)} .topnav-item.active{color:var(--primary);background:rgba(79,140,255,0.15)}
.topnav-caret{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:14px;line-height:1;transition:transform 0.2s ease;opacity:.85} .topnav-caret{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:0;line-height:1;transition:all 0.2s ease;opacity:.85}
.topnav-item.has-dropdown:hover .topnav-caret,.topnav-item.has-dropdown.open .topnav-caret{transform:rotate(180deg)} .topnav-caret::before{content:'';position:absolute;width:6px;height:6px;background:var(--primary);border-radius:50%;box-shadow:0 0 6px var(--primary),0 0 12px var(--primary);opacity:0.6;transition:all 0.2s ease}
.topnav-item.has-dropdown:hover .topnav-caret::before,.topnav-item.has-dropdown.open .topnav-caret::before{opacity:1;box-shadow:0 0 8px var(--primary),0 0 16px var(--primary),0 0 24px var(--primary)}
.topnav-item.has-dropdown:hover .topnav-caret,.topnav-item.has-dropdown.open .topnav-caret{transform:none}
.topnav-dropdown{position:absolute;top:100%;left:0;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.2s ease;z-index:1000} .topnav-dropdown{position:absolute;top:100%;left:0;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.2s ease;z-index:1000}
.topnav-item.has-dropdown:hover .topnav-dropdown,.topnav-item.has-dropdown.open .topnav-dropdown{opacity:1;visibility:visible;transform:translateY(0)} .topnav-item.has-dropdown:hover .topnav-dropdown,.topnav-item.has-dropdown.open .topnav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:block;padding:10px 16px;color:var(--text-2);text-decoration:none;font-size:13px;transition:all 0.15s ease} .dropdown-item{display:block;padding:10px 16px;color:var(--text-2);text-decoration:none;font-size:13px;transition:all 0.15s ease}
@ -2622,7 +2624,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{
@media(max-width:768px){.product-card{flex-direction:column}.product-image-wrapper{flex:none;width:100%}.product-features{grid-template-columns:1fr}} @media(max-width:768px){.product-card{flex-direction:column}.product-image-wrapper{flex:none;width:100%}.product-features{grid-template-columns:1fr}}
[data-theme="light"] body{background:#f1f5f9} [data-theme="light"] body{background:#f1f5f9}
#app.trackit-layout{margin:16px;height:calc(100vh - 32px);border-radius:40px;overflow:hidden;background:#ffffff;border:1px solid rgba(255,255,255,.4);box-shadow:0 24px 64px rgba(15,23,42,.14);display:flex;flex-direction:row} #app.trackit-layout{margin:0;height:100vh;border-radius:0;overflow:hidden;background:#ffffff;border:none;box-shadow:none;display:flex;flex-direction:row}
#app.trackit-layout .content{background:rgba(248,250,252,.6);height:100%} #app.trackit-layout .content{background:rgba(248,250,252,.6);height:100%}
#app.trackit-layout .content.topbar-layout{height:100%;display:flex;flex-direction:column} #app.trackit-layout .content.topbar-layout{height:100%;display:flex;flex-direction:column}
#app.trackit-layout .content.topbar-layout .view{padding:24px;height:100%;overflow:hidden} #app.trackit-layout .content.topbar-layout .view{padding:24px;height:100%;overflow:hidden}
@ -2651,14 +2653,17 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{
#app.trackit-layout > #sidebar .topnav{flex:1;min-height:0;overflow:visible;padding-right:2px} #app.trackit-layout > #sidebar .topnav{flex:1;min-height:0;overflow:visible;padding-right:2px}
#app.trackit-layout > #sidebar .sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:12px} #app.trackit-layout > #sidebar .sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:12px}
#app.trackit-layout > #sidebar .sidebar-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 6px 2px;border-top:1px solid rgba(226,232,240,.85)} #app.trackit-layout > #sidebar .sidebar-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 6px 2px;border-top:1px solid rgba(226,232,240,.85)}
[data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-actions{border-top:1px solid rgba(255,255,255,.08)} [data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-actions{border-top:1px solid rgba(255,255,255,.08)}
#app.trackit-layout > #sidebar .sidebar-actions .notification-bell-btn{position:relative;background:none;border:none;cursor:pointer;padding:6px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;color:var(--text-2)}
#app.trackit-layout > #sidebar .sidebar-actions .notification-bell-btn:hover{background:rgba(79,140,255,0.1);color:var(--primary)}
#app.trackit-layout > #sidebar .sidebar-actions .notification-bell-btn .notification-badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;border-radius:10px;padding:2px 6px;font-size:10px;font-weight:700;min-width:18px;text-align:center;line-height:1.2;box-shadow:0 2px 4px rgba(239,68,68,0.3)}
#app.trackit-layout > #sidebar .sidebar-actions .user-avatar-btn{padding:0;opacity:1} #app.trackit-layout > #sidebar .sidebar-actions .user-avatar-btn{padding:0;opacity:1}
#app.trackit-layout > #sidebar .sidebar-actions .user-avatar-img{width:36px;height:36px} #app.trackit-layout > #sidebar .sidebar-actions .user-avatar-img{width:36px;height:36px}
#app.trackit-layout > #sidebar .sidebar-actions .user-name-display{display:none} #app.trackit-layout > #sidebar .sidebar-actions .user-name-display{display:none}
#app.trackit-layout > #sidebar .sidebar-actions .user-dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:8px} #app.trackit-layout > #sidebar .sidebar-actions .user-dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:8px}
#app.trackit-layout > #sidebar .sidebar-notification-card{position:relative;background:rgba(255,255,255,.78);border:1px solid rgba(226,232,240,.9);border-radius:18px;padding:12px 6px 10px;box-shadow:0 10px 30px rgba(15,23,42,.06),0 0 0 2px rgba(0,0,0,.15);height:220px;display:flex;flex-direction:column;cursor:default;margin:0 -12px;width:calc(100% + 24px)} #app.trackit-layout > #sidebar .sidebar-notification-card{position:relative;background:rgba(255,255,255,.78);border:1px solid rgba(226,232,240,.9);border-radius:18px;padding:12px 6px 10px;box-shadow:0 10px 30px rgba(15,23,42,.06),0 0 0 2px rgba(0,0,0,.15);height:220px;display:flex;flex-direction:column;cursor:default;margin:12px 0 0 0;width:100%;z-index:1}
[data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-notification-card{background:rgba(15,23,42,.25);border-color:rgba(255,255,255,.08);box-shadow:0 0 0 2px rgba(0,0,0,.4)} [data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-notification-card{background:rgba(15,23,42,.25);border-color:rgba(255,255,255,.08);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
#app.trackit-layout > #sidebar .sidebar-notification-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 6px;cursor:pointer} #app.trackit-layout > #sidebar .sidebar-notification-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 6px;cursor:pointer}
#app.trackit-layout > #sidebar .sidebar-notification-title{font-size:12px;font-weight:800;color:var(--text);letter-spacing:.02em} #app.trackit-layout > #sidebar .sidebar-notification-title{font-size:12px;font-weight:800;color:var(--text);letter-spacing:.02em}
@ -2792,10 +2797,14 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{
.notification-modal .notification-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.38);backdrop-filter:blur(6px)} .notification-modal .notification-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.38);backdrop-filter:blur(6px)}
.notification-modal .notification-modal-content{position:relative;width:min(720px,calc(100vw - 32px));max-height:min(80vh,680px);margin:10vh auto 0;background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);border-radius:22px;box-shadow:0 30px 90px rgba(15,23,42,.25);overflow:hidden;display:flex;flex-direction:column} .notification-modal .notification-modal-content{position:relative;width:min(720px,calc(100vw - 32px));max-height:min(80vh,680px);margin:10vh auto 0;background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);border-radius:22px;box-shadow:0 30px 90px rgba(15,23,42,.25);overflow:hidden;display:flex;flex-direction:column}
[data-theme="dark"] .notification-modal .notification-modal-content{background:rgba(15,23,42,.88);border-color:rgba(255,255,255,.12);box-shadow:none} [data-theme="dark"] .notification-modal .notification-modal-content{background:rgba(15,23,42,.88);border-color:rgba(255,255,255,.12);box-shadow:none}
.notification-modal .notification-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(226,232,240,.9)} .notification-modal .notification-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(226,232,240,.9);gap:12px}
[data-theme="dark"] .notification-modal .notification-modal-header{border-bottom:1px solid rgba(255,255,255,.10)} [data-theme="dark"] .notification-modal .notification-modal-header{border-bottom:1px solid rgba(255,255,255,.10)}
.notification-modal .notification-modal-title{font-size:14px;font-weight:800;color:var(--text)} .notification-modal .notification-modal-title{font-size:14px;font-weight:800;color:var(--text);flex:1}
.notification-modal .notification-modal-close{background:none;border:0;cursor:pointer;font-size:22px;line-height:1;color:var(--text);width:34px;height:34px;border-radius:10px} .notification-modal .notification-modal-actions{display:flex;align-items:center;gap:8px}
.notification-modal .notification-modal-actions .btn-text{padding:6px 12px;border-radius:8px;font-size:12px;background:none;border:1px solid var(--border);color:var(--text);cursor:pointer;transition:all 0.2s ease;font-weight:600}
.notification-modal .notification-modal-actions .btn-text:hover{background:rgba(79,140,255,0.1);border-color:var(--primary);color:var(--primary)}
.notification-modal .notification-modal-actions .btn-text.btn-danger:hover{background:rgba(239,68,68,0.1);border-color:var(--danger);color:var(--danger)}
.notification-modal .notification-modal-close{background:none;border:0;cursor:pointer;font-size:22px;line-height:1;color:var(--text);width:34px;height:34px;border-radius:10px;flex-shrink:0}
.notification-modal .notification-modal-close:hover{background:rgba(79,140,255,.12)} .notification-modal .notification-modal-close:hover{background:rgba(79,140,255,.12)}
.notification-modal .notification-modal-list{padding:14px 8px;overflow:auto} .notification-modal .notification-modal-list{padding:14px 8px;overflow:auto}
.notification-modal .notification-modal-list::-webkit-scrollbar{width:8px} .notification-modal .notification-modal-list::-webkit-scrollbar{width:8px}
@ -2808,3 +2817,12 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{
.notification-modal .notification-modal-list .notification-item{padding:12px 12px;border-radius:16px;border:1px solid transparent;background:rgba(248,250,252,.9);margin-bottom:10px;cursor:pointer} .notification-modal .notification-modal-list .notification-item{padding:12px 12px;border-radius:16px;border:1px solid transparent;background:rgba(248,250,252,.9);margin-bottom:10px;cursor:pointer}
[data-theme="dark"] .notification-modal .notification-modal-list .notification-item{background:rgba(2,6,23,.35)} [data-theme="dark"] .notification-modal .notification-modal-list .notification-item{background:rgba(2,6,23,.35)}
.notification-modal .notification-modal-list .notification-item.unread{border-color:rgba(79,140,255,.22)} .notification-modal .notification-modal-list .notification-item.unread{border-color:rgba(79,140,255,.22)}
/* Dashboard scrollbar */
.dashboard-container::-webkit-scrollbar{width:8px}
.dashboard-container::-webkit-scrollbar-track{background:var(--bg);border-radius:4px}
.dashboard-container::-webkit-scrollbar-thumb{background:rgba(79,140,255,0.3);border-radius:4px;transition:background 0.2s}
.dashboard-container::-webkit-scrollbar-thumb:hover{background:rgba(79,140,255,0.5)}
[data-theme="dark"] .dashboard-container::-webkit-scrollbar-track{background:var(--bg)}
[data-theme="dark"] .dashboard-container::-webkit-scrollbar-thumb{background:rgba(79,140,255,0.4)}
[data-theme="dark"] .dashboard-container::-webkit-scrollbar-thumb:hover{background:rgba(79,140,255,0.6)}

39
frontend/index.html
View File

@ -91,7 +91,7 @@
</span> </span>
<span class="topnav-text">上传</span> <span class="topnav-text">上传</span>
</span> </span>
<span class="topnav-caret">▾</span> <span class="topnav-caret"></span>
<div class="topnav-dropdown"> <div class="topnav-dropdown">
<a href="#/upload/mac" class="dropdown-item" data-route="upload-mac">MAC与批次</a> <a href="#/upload/mac" class="dropdown-item" data-route="upload-mac">MAC与批次</a>
<a href="#/upload/stats" class="dropdown-item" data-route="upload-stats">良/不良统计</a> <a href="#/upload/stats" class="dropdown-item" data-route="upload-stats">良/不良统计</a>
@ -110,7 +110,7 @@
</span> </span>
<span class="topnav-text">出货查询</span> <span class="topnav-text">出货查询</span>
</span> </span>
<span class="topnav-caret">▾</span> <span class="topnav-caret"></span>
<div class="topnav-dropdown"> <div class="topnav-dropdown">
<a href="#/shipments/query" class="dropdown-item" data-route="shipments-query">详细记录查询</a> <a href="#/shipments/query" class="dropdown-item" data-route="shipments-query">详细记录查询</a>
<a href="#/shipments/summary" class="dropdown-item" data-route="shipments-summary">汇总信息查询</a> <a href="#/shipments/summary" class="dropdown-item" data-route="shipments-summary">汇总信息查询</a>
@ -126,7 +126,7 @@
</span> </span>
<span class="topnav-text">生产管理</span> <span class="topnav-text">生产管理</span>
</span> </span>
<span class="topnav-caret">▾</span> <span class="topnav-caret"></span>
<div class="topnav-dropdown"> <div class="topnav-dropdown">
<a href="#/production-mgmt/work-order" class="dropdown-item" data-route="production-mgmt-work-order">生产工单下发中心</a> <a href="#/production-mgmt/work-order" class="dropdown-item" data-route="production-mgmt-work-order">生产工单下发中心</a>
</div> </div>
@ -143,7 +143,7 @@
</span> </span>
<span class="topnav-text">计划管理</span> <span class="topnav-text">计划管理</span>
</span> </span>
<span class="topnav-caret">▾</span> <span class="topnav-caret"></span>
<div class="topnav-dropdown"> <div class="topnav-dropdown">
<a href="#/plan-mgmt/bom" class="dropdown-item" data-route="plan-mgmt-bom">BOM物料清单</a> <a href="#/plan-mgmt/bom" class="dropdown-item" data-route="plan-mgmt-bom">BOM物料清单</a>
<a href="#/plan-mgmt/initial-stock" class="dropdown-item" data-route="plan-mgmt-initial-stock">期初库存</a> <a href="#/plan-mgmt/initial-stock" class="dropdown-item" data-route="plan-mgmt-initial-stock">期初库存</a>
@ -163,7 +163,7 @@
</span> </span>
<span class="topnav-text">采集</span> <span class="topnav-text">采集</span>
</span> </span>
<span class="topnav-caret">▾</span> <span class="topnav-caret"></span>
<div class="topnav-dropdown"> <div class="topnav-dropdown">
<a href="#/devices" class="dropdown-item" data-route="devices">设备状态</a> <a href="#/devices" class="dropdown-item" data-route="devices">设备状态</a>
<a href="#/environment" class="dropdown-item" data-route="environment">环境参数</a> <a href="#/environment" class="dropdown-item" data-route="environment">环境参数</a>
@ -185,7 +185,7 @@
</span> </span>
<span class="topnav-text">基站测试</span> <span class="topnav-text">基站测试</span>
</span> </span>
<span class="topnav-caret">▾</span> <span class="topnav-caret"></span>
<div class="topnav-dropdown"> <div class="topnav-dropdown">
<a href="#/test/meituan" class="dropdown-item" data-route="test-meituan">美团基站测试</a> <a href="#/test/meituan" class="dropdown-item" data-route="test-meituan">美团基站测试</a>
</div> </div>
@ -229,20 +229,6 @@
</a> </a>
</nav> </nav>
<div class="sidebar-footer"> <div class="sidebar-footer">
<div id="sidebar-notification-card" class="sidebar-notification-card" style="display:none;">
<span id="notification-badge" class="notification-badge" style="display:none;">0</span>
<div class="sidebar-notification-header">
<div class="sidebar-notification-title"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg> </div>
<div class="sidebar-notification-actions">
<button id="mark-all-read" class="btn-text" type="button">全部已读</button>
<button id="delete-read" class="btn-text btn-danger" type="button">删除已读</button>
</div>
</div>
<div id="notification-list" class="sidebar-notification-list">
<div class="notification-empty">暂无消息通知</div>
</div>
</div>
<div class="sidebar-actions"> <div class="sidebar-actions">
<!-- 主题切换按钮已隐藏 --> <!-- 主题切换按钮已隐藏 -->
<label class="switch" style="display: none;"> <label class="switch" style="display: none;">
@ -260,6 +246,13 @@
</svg> </svg>
</span> </span>
</label> </label>
<button id="notification-bell-btn" class="notification-bell-btn" title="消息通知">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
</svg>
<span id="notification-badge" class="notification-badge" style="display:none;">0</span>
</button>
<div class="user-menu-container"> <div class="user-menu-container">
<button id="user-avatar-btn" class="user-avatar-btn"> <button id="user-avatar-btn" class="user-avatar-btn">
<img id="user-avatar-img" src="./assets/user-avatar.svg" alt="用户头像" class="user-avatar-img" /> <img id="user-avatar-img" src="./assets/user-avatar.svg" alt="用户头像" class="user-avatar-img" />
@ -300,7 +293,11 @@
<div class="notification-modal-backdrop" data-close="1"></div> <div class="notification-modal-backdrop" data-close="1"></div>
<div class="notification-modal-content" role="dialog" aria-modal="true" aria-label="🔔"> <div class="notification-modal-content" role="dialog" aria-modal="true" aria-label="🔔">
<div class="notification-modal-header"> <div class="notification-modal-header">
<div class="notification-modal-title">🔔</div> <div class="notification-modal-title">🔔 消息通知</div>
<div class="notification-modal-actions">
<button id="modal-mark-all-read" class="btn-text" type="button">全部已读</button>
<button id="modal-delete-read" class="btn-text btn-danger" type="button">删除已读</button>
</div>
<button id="notification-modal-close" class="notification-modal-close" type="button" aria-label="关闭">×</button> <button id="notification-modal-close" class="notification-modal-close" type="button" aria-label="关闭">×</button>
</div> </div>
<div id="notification-modal-list" class="notification-modal-list"></div> <div id="notification-modal-list" class="notification-modal-list"></div>

2
frontend/js/components/ai-report.js
View File

@ -2,7 +2,7 @@ const AIReport = (() => {
// 生成AI报表卡片的HTML // 生成AI报表卡片的HTML
const generateAICard = () => { const generateAICard = () => {
return ` return `
<div class="card" style="flex:1;display:flex;flex-direction:column;background:var(--surface);cursor:pointer;position:relative;overflow:hidden" onclick="AIReport.generateReport()"> <div class="card" style="flex:1;display:flex;flex-direction:column;background:var(--surface);cursor:pointer;position:relative;overflow:hidden;min-height:400px" onclick="AIReport.generateReport()">
<!-- AI图标 --> <!-- AI图标 -->
<div style="position:absolute;top:12px;right:12px;width:24px;height:24px;z-index:1"> <div style="position:absolute;top:12px;right:12px;width:24px;height:24px;z-index:1">
<img src="./assets/大模型.png" style="width:24px;height:24px" alt="AI" /> <img src="./assets/大模型.png" style="width:24px;height:24px" alt="AI" />

18
frontend/js/components/dashboard.js
View File

@ -1979,7 +1979,7 @@ const Dashboard = (() => {
window.__auditTimer=setInterval(refreshAll, 10000); window.__auditTimer=setInterval(refreshAll, 10000);
},0); },0);
return ` return `
<div class="dashboard-container" style="display:flex;flex-direction:column;height:100%;overflow:hidden"> <div class="dashboard-container" style="display:flex;flex-direction:column;height:100%;overflow-y:auto;padding-right:8px">
<!-- 四个指标卡片 --> <!-- 四个指标卡片 -->
<div class="dashboard-metrics-4col" style="flex-shrink:0"> <div class="dashboard-metrics-4col" style="flex-shrink:0">
${metricsCard('直通良品数', data.fpyCount || 0, 'success')} ${metricsCard('直通良品数', data.fpyCount || 0, 'success')}
@ -2065,17 +2065,19 @@ const Dashboard = (() => {
<div style="display:flex;align-items:center;justify-content:center;position:relative"> <div style="display:flex;align-items:center;justify-content:center;position:relative">
<canvas id="donut-chart" style="width:160px;height:160px"></canvas> <canvas id="donut-chart" style="width:160px;height:160px"></canvas>
</div> </div>
<div style="display:flex;justify-content:center;gap:24px;margin-top:12px"> <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px">
<div style="text-align:center"> <div style="text-align:center">
<div id="donut-pdd-pct" style="font-size:20px;font-weight:700;color:#3B82F6">0%</div> <div id="donut-pdd-pct" style="font-size:20px;font-weight:700;color:#3B82F6">0%</div>
<div style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);margin-top:2px"> <div style="display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);margin-top:2px">
<span style="width:8px;height:8px;border-radius:50%;background:#3B82F6"></span>拼多多 <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#3B82F6;flex-shrink:0"></span>
<span>拼多多</span>
</div> </div>
</div> </div>
<div style="text-align:center"> <div style="text-align:center">
<div id="donut-yt-pct" style="font-size:20px;font-weight:700;color:#10B981">0%</div> <div id="donut-yt-pct" style="font-size:20px;font-weight:700;color:#10B981">0%</div>
<div style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);margin-top:2px"> <div style="display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);margin-top:2px">
<span style="width:8px;height:8px;border-radius:50%;background:#10B981"></span>圆通 <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#10B981;flex-shrink:0"></span>
<span>圆通</span>
</div> </div>
</div> </div>
</div> </div>
@ -2090,9 +2092,9 @@ const Dashboard = (() => {
</div> </div>
</div> </div>
</div> </div>
<div style="margin-top:12px;flex:1;min-height:0;display:flex;gap:12px"> <div style="margin-top:12px;flex:1;min-height:400px;display:flex;gap:12px">
<!-- 审计看板（压缩宽度） --> <!-- 审计看板（压缩宽度） -->
<div id="audit-card" class="card" style="flex:1;display:flex;flex-direction:column;min-height:0;background:var(--surface);cursor:pointer" onclick="window.Dashboard.showAuditModal()"> <div id="audit-card" class="card" style="flex:1;display:flex;flex-direction:column;min-height:400px;background:var(--surface);cursor:pointer" onclick="window.Dashboard.showAuditModal()">
<div style="font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:8px"> <div style="font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:8px">
<span style="display:flex;align-items:center;gap:8px">审计看板 <span style="font-size:11px;color:var(--text-2);font-weight:400">点击查看完整数据</span></span> <span style="display:flex;align-items:center;gap:8px">审计看板 <span style="font-size:11px;color:var(--text-2);font-weight:400">点击查看完整数据</span></span>
<div style="display:flex;gap:8px;align-items:center" onclick="event.stopPropagation()"> <div style="display:flex;gap:8px;align-items:center" onclick="event.stopPropagation()">

87
frontend/js/components/notifications.js
View File

@ -86,10 +86,10 @@
const list = data.list || []; const list = data.list || [];
const container = document.getElementById('notification-list'); const container = document.getElementById('notification-list');
const modalContainer = document.getElementById('notification-modal-list'); const modalContainer = document.getElementById('notification-modal-list');
if (!container) return; if (!container && !modalContainer) return;
if (list.length === 0) { if (list.length === 0) {
container.innerHTML = '<div class="notification-empty">暂无消息通知</div>'; if (container) container.innerHTML = '<div class="notification-empty">暂无消息通知</div>';
if (modalContainer) modalContainer.innerHTML = '<div class="notification-empty">暂无消息通知</div>'; if (modalContainer) modalContainer.innerHTML = '<div class="notification-empty">暂无消息通知</div>';
return; return;
} }
@ -103,27 +103,29 @@
</div> </div>
`).join(''); `).join('');
container.innerHTML = fullHtml; if (container) container.innerHTML = fullHtml;
if (modalContainer) modalContainer.innerHTML = fullHtml; if (modalContainer) modalContainer.innerHTML = fullHtml;
// 为每个通知项添加点击事件 // 为每个通知项添加点击事件
container.querySelectorAll('.notification-item').forEach(item => { if (container) {
item.addEventListener('click', async () => { container.querySelectorAll('.notification-item').forEach(item => {
const id = item.dataset.id; item.addEventListener('click', async () => {
if (item.classList.contains('unread')) { const id = item.dataset.id;
try { if (item.classList.contains('unread')) {
await API.markNotificationRead(id); try {
item.classList.remove('unread'); await API.markNotificationRead(id);
// 同步 modal 中对应项 item.classList.remove('unread');
const modalItem = document.querySelector(`#notification-modal-list .notification-item[data-id="${id}"]`); // 同步 modal 中对应项
if (modalItem) modalItem.classList.remove('unread'); const modalItem = document.querySelector(`#notification-modal-list .notification-item[data-id="${id}"]`);
await updateUnreadCount(); if (modalItem) modalItem.classList.remove('unread');
} catch (e) { await updateUnreadCount();
console.error('标记已读失败:', e); } catch (e) {
console.error('标记已读失败:', e);
}
} }
} });
}); });
}); }
if (modalContainer) { if (modalContainer) {
modalContainer.querySelectorAll('.notification-item').forEach(item => { modalContainer.querySelectorAll('.notification-item').forEach(item => {
@ -178,21 +180,24 @@
return; // 超级管理员和管理员才显示通知铃铛 return; // 超级管理员和管理员才显示通知铃铛
} }
// 显示侧边栏通知卡片 // 绑定铃铛按钮点击事件
const card = document.getElementById('sidebar-notification-card'); const bellBtn = document.getElementById('notification-bell-btn');
if (!card) { if (!bellBtn) {
console.error('[Notifications] 找不到侧边栏通知卡片元素'); console.error('[Notifications] 找不到铃铛按钮元素');
return; return;
} }
card.style.display = 'block';
console.log('[Notifications] 侧边栏通知卡片已显示'); // 移除旧的事件监听器
const newBellBtn = bellBtn.cloneNode(true);
// 点击卡片标题区域打开大弹窗（列表和按钮区域不触发） bellBtn.parentNode.replaceChild(newBellBtn, bellBtn);
card.addEventListener('click', (e) => {
if (e.target.closest('.sidebar-notification-actions')) return; newBellBtn.addEventListener('click', (e) => {
if (e.target.closest('.sidebar-notification-list')) return; e.preventDefault();
e.stopPropagation();
openModal(); openModal();
}); });
console.log('[Notifications] 铃铛按钮已绑定');
// 弹窗关闭 // 弹窗关闭
const closeBtn = document.getElementById('notification-modal-close'); const closeBtn = document.getElementById('notification-modal-close');
@ -209,13 +214,13 @@
if (isModalOpen && e.key === 'Escape') closeModal(); if (isModalOpen && e.key === 'Escape') closeModal();
}); });
// 绑定全部标记为已读按钮（移除旧的事件监听器） // 绑定弹窗中的全部标记为已读按钮
const markAllBtn = document.getElementById('mark-all-read'); const modalMarkAllBtn = document.getElementById('modal-mark-all-read');
if (markAllBtn) { if (modalMarkAllBtn) {
const newMarkAllBtn = markAllBtn.cloneNode(true); const newModalMarkAllBtn = modalMarkAllBtn.cloneNode(true);
markAllBtn.parentNode.replaceChild(newMarkAllBtn, markAllBtn); modalMarkAllBtn.parentNode.replaceChild(newModalMarkAllBtn, modalMarkAllBtn);
newMarkAllBtn.addEventListener('click', async (e) => { newModalMarkAllBtn.addEventListener('click', async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
await API.markAllNotificationsRead(); await API.markAllNotificationsRead();
@ -228,13 +233,13 @@
}); });
} }
// 绑定删除已读消息按钮（移除旧的事件监听器） // 绑定弹窗中的删除已读消息按钮
const deleteBtn = document.getElementById('delete-read'); const modalDeleteBtn = document.getElementById('modal-delete-read');
if (deleteBtn) { if (modalDeleteBtn) {
const newDeleteBtn = deleteBtn.cloneNode(true); const newModalDeleteBtn = modalDeleteBtn.cloneNode(true);
deleteBtn.parentNode.replaceChild(newDeleteBtn, deleteBtn); modalDeleteBtn.parentNode.replaceChild(newModalDeleteBtn, modalDeleteBtn);
newDeleteBtn.addEventListener('click', async (e) => { newModalDeleteBtn.addEventListener('click', async (e) => {
e.preventDefault(); e.preventDefault();
if (!confirm('确定要删除所有已读消息吗？')) { if (!confirm('确定要删除所有已读消息吗？')) {
return; return;

8
frontend/js/components/upload.js
View File

@ -191,7 +191,7 @@ const Upload = (() => {
<div style="margin-bottom:16px;display:flex;justify-content:flex-start"> <div style="margin-bottom:16px;display:flex;justify-content:flex-start">
<a href="#/upload/repairs-history" class="btn btn-secondary" style="font-size:12px;padding:6px 10px">📋 查看历史记录</a> <a href="#/upload/repairs-history" class="btn btn-secondary" style="font-size:12px;padding:6px 10px">📋 查看历史记录</a>
</div> </div>
<div id="repairs-upload-form"> <div id="repairs-upload-form" style="max-height:calc(100vh - 200px);overflow-y:auto;padding-right:8px">
<div class="form-group" style="margin-bottom:16px"> <div class="form-group" style="margin-bottom:16px">
<label style="display:block;font-weight:600;margin-bottom:6px"> <label style="display:block;font-weight:600;margin-bottom:6px">
设备SN <span style="color:#ef4444">*</span> 设备SN <span style="color:#ef4444">*</span>
@ -253,7 +253,7 @@ const Upload = (() => {
<div id="repair-image-error" style="color:#ef4444;font-size:12px;margin-top:4px;display:none"></div> <div id="repair-image-error" style="color:#ef4444;font-size:12px;margin-top:4px;display:none"></div>
</div> </div>
<div class="actions" style="display:flex;gap:12px"> <div class="actions" style="display:flex;gap:12px;position:sticky;bottom:0;background:var(--surface);padding-top:12px;border-top:1px solid var(--border)">
<button class="btn" id="repairs-upload" style="flex:1"> <button class="btn" id="repairs-upload" style="flex:1">
<span id="repairs-upload-text">提交</span> <span id="repairs-upload-text">提交</span>
<span id="repairs-upload-loading" style="display:none"> <span id="repairs-upload-loading" style="display:none">
@ -271,6 +271,10 @@ const Upload = (() => {
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#repair-image-dropzone:hover { background:rgba(79,140,255,0.12); border-color:var(--primary); } #repair-image-dropzone:hover { background:rgba(79,140,255,0.12); border-color:var(--primary); }
#repair-image-dropzone.dragover { background:rgba(79,140,255,0.15); border-color:var(--primary); border-style:solid; } #repair-image-dropzone.dragover { background:rgba(79,140,255,0.15); border-color:var(--primary); border-style:solid; }
#repairs-upload-form::-webkit-scrollbar { width: 8px; }
#repairs-upload-form::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
#repairs-upload-form::-webkit-scrollbar-thumb { background: rgba(79,140,255,0.3); border-radius: 4px; }
#repairs-upload-form::-webkit-scrollbar-thumb:hover { background: rgba(79,140,255,0.5); }
</style> </style>
</div> </div>
`); `);

0
server/uploads/repair_images/1768377511654_20260114110759_221_541.jpg Normal file
View File

0
server/uploads/repair_images/1768377511655_20260114155719_49_2.png Normal file
View File

BIN
server/uploads/repair_images/1768377852973_20260114111043_225_541.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 KiB