diff --git a/frontend/assets/moon.svg b/frontend/assets/moon.svg new file mode 100644 index 0000000..e8b5568 --- /dev/null +++ b/frontend/assets/moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/assets/styles.css b/frontend/assets/styles.css index 965e799..f1b7d31 100644 --- a/frontend/assets/styles.css +++ b/frontend/assets/styles.css @@ -25,17 +25,25 @@ body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui .caret{margin-left:auto;transition:transform .2s ease} .caret.rotate{transform:rotate(90deg)} +.theme-toggle-container{padding:16px;border-top:1px solid var(--border);margin-top:auto} +.theme-toggle-btn{width:100%;display:flex;align-items:center;justify-content:center;padding:10px;background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all 0.2s ease} +.theme-toggle-btn:hover{background:rgba(79,140,255,.12);border-color:var(--primary)} +.theme-icon{width:20px;height:20px;filter:invert(1);transition:transform 0.3s ease} +[data-theme="light"] .theme-icon{filter:invert(0)} +.theme-toggle-btn:hover .theme-icon{transform:rotate(20deg)} + .btn{border:0;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer;background:var(--primary);color:#ffffff} .btn:hover{background:var(--primary-600)} .btn-secondary{background:#253045;color:var(--text)} .btn-secondary:hover{background:#2b3750} [data-theme="light"] .btn-secondary{background:#e5e7eb;color:var(--text)} [data-theme="light"] .btn-secondary:hover{background:#d1d5db} -.content{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden} -.content-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;position:relative;z-index:10} +.content{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg)} +.content-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--bg) !important;flex-shrink:0;position:relative;z-index:10} +[data-theme="light"] .content-header{background:#f5f7fa !important} #breadcrumb{color:var(--text-2)} #actions{position:relative;z-index:999;display:flex;align-items:center;gap:8px} -.view{position:relative;padding:20px;flex:1;overflow-y:auto;overflow-x:hidden} +.view{position:relative;padding:20px;flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);min-height:100%} .card{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px} .grid{display:grid;gap:12px} .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} @@ -116,8 +124,8 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ .loader .dot:nth-child(2){animation-delay:.15s} .loader .dot:nth-child(3){animation-delay:.3s} @keyframes bounce{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-8px);opacity:1}} -.fade-enter{opacity:0;transform:translateY(6px)} -.fade-enter-active{transition:opacity .2s ease,transform .2s ease;opacity:1;transform:translateY(0)} +.fade-enter{opacity:0;transform:translateY(8px)} +.fade-enter-active{transition:opacity .25s ease-out,transform .25s ease-out;opacity:1;transform:translateY(0)} .error{color:#ffb4b4} .menu-toggle{display:none} @media(max-width:1024px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}} diff --git a/frontend/assets/sun.svg b/frontend/assets/sun.svg new file mode 100644 index 0000000..d3199ee --- /dev/null +++ b/frontend/assets/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/index.html b/frontend/index.html index 4394b2b..308ae97 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,7 +8,7 @@ - +
@@ -114,9 +114,14 @@
+
+ +
-
+
-
-
账户设置
@@ -124,28 +112,6 @@ Router.register('/settings', async () => { ` : ''}
`; setTimeout(() => { - // 主题切换 - const themeSelect = document.getElementById('theme-select'); - const savedTheme = localStorage.getItem('theme') || 'dark'; - if(themeSelect) { - themeSelect.value = savedTheme; - themeSelect.addEventListener('change', (e) => { - const theme = e.target.value; - localStorage.setItem('theme', theme); - document.documentElement.setAttribute('data-theme', theme); - API.toast(`已切换到${theme === 'dark' ? '深色' : '浅色'}主题`); - - // 触发自定义事件，通知其他组件主题已更改 - window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } })); - }); - } - - // 刷新页面按钮 - const refreshBtn = document.getElementById('refresh-page-btn'); - refreshBtn?.addEventListener('click', () => { - location.reload(); - }); - // 头像文件选择预览 const avatarFileInput = document.getElementById('avatar-file'); const previewAvatar = document.getElementById('preview-avatar'); diff --git a/frontend/js/components/shipment-summary.js b/frontend/js/components/shipment-summary.js new file mode 100644 index 0000000..504063e --- /dev/null +++ b/frontend/js/components/shipment-summary.js @@ -0,0 +1,125 @@ +Router.register('/shipments/summary', async () => { + setTimeout(async () => { + const queryBtn = document.getElementById('summary-query-btn'); + const startDateInput = document.getElementById('start-date'); + const endDateInput = document.getElementById('end-date'); + const resultDiv = document.getElementById('summary-result'); + + // 设置默认日期为当前月份 + const now = new Date(); + const firstDay = new Date(now.getFullYear(), now.getMonth(), 1); + const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0); + + if (startDateInput) { + startDateInput.value = firstDay.toISOString().split('T')[0]; + } + if (endDateInput) { + endDateInput.value = lastDay.toISOString().split('T')[0]; + } + + const performQuery = async () => { + const startDate = startDateInput?.value; + const endDate = endDateInput?.value; + + if (!startDate || !endDate) { + resultDiv.innerHTML = '
请选择开始和结束日期
'; + return; + } + + try { + resultDiv.innerHTML = '
查询中...
'; + + const res = await fetch(`/api/shipments/summary?start=${encodeURIComponent(startDate)}&end=${encodeURIComponent(endDate)}`, { + credentials: 'include' + }); + const data = await res.json(); + + if (data.records && data.records.length > 0) { + const totalQty = data.records.reduce((sum, r) => sum + (r.qty || 0), 0); + + const tableRows = data.records.map(record => ` + + ${record.date} + ${record.qty} + ${record.receiver || '-'} + ${record.ts || '-'} + + `).join(''); + + resultDiv.innerHTML = ` +
+
+
+
查询时间段
+
${startDate} 至 ${endDate}
+
+
+
总出货数量
+
${totalQty}
+
+
+
+ +
+ + + + + + + + + + + ${tableRows} + +
发货日期数量收货方录入时间
+
+ `; + } else { + resultDiv.innerHTML = ` +
+
未找到记录
+
该时间段内没有发货记录
+
+ `; + } + } catch (e) { + resultDiv.innerHTML = `
查询失败：${e.message}
`; + } + }; + + queryBtn?.addEventListener('click', performQuery); + + // 自动执行一次查询 + performQuery(); + }, 0); + + return `
+
发货汇总信息查询
+ +
+
+
+ + +
+
+ + +
+
+ +
+ +
+
`; +});