From 8133faf65f1e439147b4c0977109c9265eaeea8b Mon Sep 17 00:00:00 2001 From: zzh Date: Tue, 30 Dec 2025 14:35:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/assets/styles.css | 184 +++- frontend/index.html | 244 +++-- frontend/js/app.js | 4 +- frontend/js/components/customer-order.js | 102 ++- frontend/js/components/dashboard.js | 460 +++++++--- frontend/js/components/menu-search.js | 327 +++++++ frontend/js/components/notifications.js | 123 ++- frontend/js/components/operations-log.js | 48 +- frontend/js/components/reconciliation.js | 149 +++- frontend/js/components/settings.js | 3 +- frontend/js/components/shipment-query.js | 8 +- frontend/js/components/shipment-summary.js | 6 +- frontend/js/components/upload.js | 843 ++++++++++++------ frontend/js/router.js | 1 + server/app.py | 19 +- .../1766120385979_20251219125803_22_56.png | Bin 0 -> 57599 bytes .../1766121162179_20251219131050_23_56.png | Bin 0 -> 57406 bytes .../1766123577056_20251219134956_24_56.png | Bin 0 -> 57858 bytes 18 files changed, 1950 insertions(+), 571 deletions(-) create mode 100644 frontend/js/components/menu-search.js create mode 100644 server/uploads/repair_images/1766120385979_20251219125803_22_56.png create mode 100644 server/uploads/repair_images/1766121162179_20251219131050_23_56.png create mode 100644 server/uploads/repair_images/1766123577056_20251219134956_24_56.png diff --git a/frontend/assets/styles.css b/frontend/assets/styles.css index 0abafe7..092d155 100644 --- a/frontend/assets/styles.css +++ b/frontend/assets/styles.css @@ -830,7 +830,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ .filter-actions{display:flex;gap:8px;align-items:flex-end} .filter-actions .btn{padding:10px 20px;font-size:14px} -.table-container{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px} +.table-container{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:auto;margin-bottom:20px;max-height:calc(100vh - 280px)} .data-table{width:100%;border-collapse:collapse;font-size:13px} .data-table thead{background:var(--surface-2);position:sticky;top:0;z-index:1} .data-table th{padding:12px 16px;text-align:left;font-weight:600;color:var(--text);border-bottom:2px solid var(--border);white-space:nowrap} @@ -949,8 +949,9 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; - overflow-x: auto; + overflow: auto; margin-bottom: 20px; + max-height: calc(100vh - 250px); } .data-table { @@ -1555,7 +1556,7 @@ 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: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-caret{font-size:10px;transition:transform 0.2s ease} +.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-item.has-dropdown:hover .topnav-caret,.topnav-item.has-dropdown.open .topnav-caret{transform:rotate(180deg)} .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)} @@ -1571,7 +1572,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ .topbar .user-avatar-btn:hover{background:rgba(79,140,255,0.1)} .topbar .user-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover} .topbar .user-name-display{color:var(--text);font-size:14px;font-weight:500} -.topbar .user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);z-index:1000} +.topbar .user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);z-index:1000;max-height:calc(100vh - 80px);overflow-y:auto} .topbar .user-menu-container{position:relative} .topbar-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;color:var(--text-2);text-decoration:none;transition:all 0.2s ease} .topbar-icon-btn:hover{background:rgba(79,140,255,0.1);color:var(--text)} @@ -1603,3 +1604,178 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ .spec-label{font-size:14px;color:var(--text-2)} .spec-value{font-size:14px;color:var(--text);font-weight:500} @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} +#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 .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 .view{padding:24px;height:100%;overflow:hidden} + +#app.trackit-layout > #sidebar.sidebar{border-right:1px solid rgba(226,232,240,.9);background:rgba(255,255,255,.75);backdrop-filter:blur(10px);height:100%} +[data-theme="dark"] #app.trackit-layout > #sidebar.sidebar{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-right:1px solid var(--border);backdrop-filter:none} + +#app.trackit-layout > #sidebar.topbar{height:auto;padding:18px 16px;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:18px} +#app.trackit-layout > #sidebar .topbar-left{flex-direction:column;align-items:stretch;gap:16px;flex:1;min-height:0} +#app.trackit-layout > #sidebar .brand{width:100%;justify-content:space-between} +#app.trackit-layout > #sidebar .brand-name{font-size:18px;font-weight:800;color:var(--text)} + + #app.trackit-layout > #sidebar .sidebar-search{position:relative;padding:0 4px} + #app.trackit-layout > #sidebar .sidebar-search .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:rgba(100,116,139,.8);display:inline-flex;align-items:center;justify-content:center} + #app.trackit-layout > #sidebar .sidebar-search .search-icon svg{width:16px;height:16px} + #app.trackit-layout > #sidebar .sidebar-search-input{width:100%;height:38px;border-radius:14px;border:1px solid transparent;background:rgba(248,250,252,1);padding:0 12px 0 40px;font-size:13px;color:var(--text);outline:none;transition:all .15s ease} + #app.trackit-layout > #sidebar .sidebar-search-input:focus{border-color:rgba(79,140,255,.25);background:#ffffff;box-shadow:0 10px 18px rgba(15,23,42,.08)} + [data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-search-input{background:rgba(15,23,42,.25);border-color:rgba(255,255,255,.06)} + [data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-search-input:focus{background:rgba(15,23,42,.35);border-color:rgba(79,140,255,.35)} + +#app.trackit-layout > #sidebar .topnav{flex-direction:column;align-items:stretch;gap:2px} +#app.trackit-layout > #sidebar .topnav-item{width:100%;justify-content:space-between;border-radius:14px;padding:10px 5px} +#app.trackit-layout > #sidebar .topnav-item:hover,#app.trackit-layout > #sidebar .topnav-item.active{background:rgba(255,255,255,.85)} +[data-theme="dark"] #app.trackit-layout > #sidebar .topnav-item:hover,[data-theme="dark"] #app.trackit-layout > #sidebar .topnav-item.active{background:rgba(79,140,255,.12)} + + #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-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)} + [data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-actions{border-top:1px solid rgba(255,255,255,.08)} + #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-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-notification-card{position:relative;background:rgba(255,255,255,.78);border:1px solid rgba(226,232,240,.9);border-radius:18px;padding:12px 12px 10px;box-shadow:0 10px 30px rgba(15,23,42,.06);height:220px;display:flex;flex-direction:column;cursor:default} + [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:none} + #app.trackit-layout > #sidebar .sidebar-notification-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;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-right{display:flex;align-items:center;gap:10px} + #app.trackit-layout > #sidebar .sidebar-notification-card .notification-badge{position:absolute;top:-8px;right:-8px;transform:none} + #app.trackit-layout > #sidebar .sidebar-notification-actions{display:flex;align-items:center;gap:8px} + #app.trackit-layout > #sidebar .sidebar-notification-actions .btn-text{padding:2px 6px;border-radius:10px;font-size:11px} + #app.trackit-layout > #sidebar .sidebar-notification-actions .btn-text{position:relative;z-index:1} + #app.trackit-layout > #sidebar .sidebar-notification-list{flex:1;min-height:0;max-height:150px;overflow-y:auto;overflow-x:hidden;padding-right:2px;-webkit-overflow-scrolling:touch;cursor:auto} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-item{padding:8px 10px;border-radius:14px;border:1px solid transparent;background:rgba(248,250,252,.85);margin-bottom:8px;cursor:pointer} + [data-theme="dark"] #app.trackit-layout > #sidebar .sidebar-notification-list .notification-item{background:rgba(2,6,23,.35)} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-item:last-child{margin-bottom:0} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-action,#app.trackit-layout > #sidebar .sidebar-notification-list .notification-detail{word-break:break-word} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-username{font-size:12px;font-weight:700;color:var(--text)} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-action{font-size:12px;color:var(--text);margin-top:4px} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-detail{font-size:11px;color:var(--text-2);margin-top:4px} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-time{font-size:11px;color:var(--text-2);margin-top:6px} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-item.unread{border-color:rgba(79,140,255,.22);border-left-width:3px;padding-left:18px} + #app.trackit-layout > #sidebar .sidebar-notification-list .notification-empty{color:var(--text-2);font-size:12px;padding:10px 6px} + + #app.trackit-layout > #sidebar .nav-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1} + #app.trackit-layout > #sidebar .nav-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:rgba(100,116,139,.85)} + #app.trackit-layout > #sidebar .nav-icon svg{width:20px;height:20px} + #app.trackit-layout > #sidebar .topnav-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} + #app.trackit-layout > #sidebar .topnav-caret{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:14px;line-height:1;transform-origin:center} + #app.trackit-layout > #sidebar .topnav-item.active .nav-icon{color:var(--primary)} + #app.trackit-layout > #sidebar .topnav-item:hover .nav-icon{color:var(--primary)} + +#app.trackit-layout > #sidebar .topnav-dropdown{top:0;left:100%;margin-left:10px;transform:translateX(8px);border-radius:14px} +#app.trackit-layout > #sidebar .topnav-item.has-dropdown:hover .topnav-dropdown,#app.trackit-layout > #sidebar .topnav-item.has-dropdown.open .topnav-dropdown{transform:translateX(0)} + + #app.trackit-layout > #sidebar.sidebar.collapsed .topnav-text{display:none} + #app.trackit-layout > #sidebar.sidebar.collapsed .topnav-caret{display:none} + #app.trackit-layout > #sidebar.sidebar.collapsed.topbar{padding:14px 6px} + #app.trackit-layout > #sidebar.sidebar.collapsed .topnav-item{justify-content:center;padding:10px 0;margin:4px 0} + #app.trackit-layout > #sidebar.sidebar.collapsed .nav-left{justify-content:center} + #app.trackit-layout > #sidebar.sidebar.collapsed .nav-icon{margin-left:0} + #app.trackit-layout > #sidebar.sidebar.collapsed .sidebar-search{display:none} + + #app.trackit-layout > #sidebar.sidebar.collapsed .sidebar-footer{border-top:0;padding-top:0} + #app.trackit-layout > #sidebar.sidebar.collapsed .sidebar-actions{flex-direction:column;gap:12px;justify-content:flex-start;padding:0 0 2px} + #app.trackit-layout > #sidebar.sidebar.collapsed .sidebar-notification-card{display:none !important} + + #app.trackit-layout > #sidebar.sidebar.collapsed .brand-name{display:none} + #app.trackit-layout > #sidebar.sidebar.collapsed .brand{position:relative;justify-content:center;flex-direction:column;align-items:center;gap:10px} + #app.trackit-layout > #sidebar.sidebar.collapsed .coin-wrapper{margin:0 auto} + #app.trackit-layout > #sidebar.sidebar.collapsed .sidebar-toggle{position:static;right:auto;top:auto;transform:none;margin-top:2px} + +#app.trackit-layout .content-header.trackit-content-header{background:transparent !important;border-bottom:0;padding:18px 24px 8px} +#app.trackit-layout .trackit-header-left{display:flex;align-items:center;gap:12px} +#app.trackit-layout .trackit-header-badge{width:40px;height:40px;border-radius:14px;background:rgba(99,102,241,.15);display:flex;align-items:center;justify-content:center;color:#4f46e5;font-weight:800} +#app.trackit-layout .trackit-header-title{font-size:14px;font-weight:800;color:var(--text);line-height:1} +#app.trackit-layout .trackit-breadcrumb{font-size:11px;color:var(--text-2);margin-top:4px} + + #app.trackit-layout .trackit-content-header .topbar-right{display:flex;align-items:center;gap:22px} + #app.trackit-layout .trackit-content-header .notification-bell{position:relative;background:none;border:none;cursor:pointer;font-size:34px;padding:2px;line-height:1} + #app.trackit-layout .trackit-content-header .notification-badge{top:-6px;right:-6px;padding:3px 7px;font-size:12px;min-width:20px} + #app.trackit-layout .trackit-content-header .user-avatar-btn{display:flex;align-items:center;gap:0;background:none;border:none;cursor:pointer;padding:0;border-radius:999px;transition:opacity 0.2s} + #app.trackit-layout .trackit-content-header .user-avatar-btn:hover{background:transparent;opacity:.92} + #app.trackit-layout .trackit-content-header .user-avatar-img{width:40px;height:40px;border-radius:999px} + #app.trackit-layout .trackit-content-header .user-name-display{display:none} + + /* Theme Switch (Uiverse) */ + #app.trackit-layout .switch{ + font-size:13px; + position:relative; + display:inline-block; + width:4em; + height:2.2em; + border-radius:30px; + box-shadow:0 0 10px rgba(0,0,0,0.1); + } + #app.trackit-layout .switch input{opacity:0;width:0;height:0} + #app.trackit-layout .switch .slider{ + position:absolute; + cursor:pointer; + top:0;left:0;right:0;bottom:0; + background-color:#00a6ff; + transition:0.4s; + border-radius:30px; + overflow:hidden; + } + #app.trackit-layout .switch .slider:before{ + position:absolute; + content:""; + height:1.2em; + width:1.2em; + border-radius:20px; + left:0.5em; + bottom:0.5em; + transition:0.4s; + transition-timing-function:cubic-bezier(0.81,-0.04,0.38,1.5); + transform:translateX(1.8em); + box-shadow:inset 15px -4px 0px 15px #ffcf48; + } + #app.trackit-layout .switch input:checked + .slider{background-color:#2a2a2a} + #app.trackit-layout .switch input:checked + .slider:before{ + transform:translateX(0); + box-shadow:inset 8px -4px 0px 0px #fff; + } + #app.trackit-layout .switch .star{ + background-color:#fff; + border-radius:50%; + position:absolute; + width:5px; + height:5px; + transition:all 0.4s; + opacity:0; + } + #app.trackit-layout .switch .star_1{left:2.5em;top:0.5em} + #app.trackit-layout .switch .star_2{left:2.2em;top:1.2em} + #app.trackit-layout .switch .star_3{left:3em;top:0.9em} + #app.trackit-layout .switch input:checked ~ .slider .star{opacity:1} + #app.trackit-layout .switch .cloud{ + width:3.2em; + position:absolute; + bottom:-1.4em; + left:-1.1em; + opacity:1; + transition:all 0.4s; + } + #app.trackit-layout .switch input:checked ~ .slider .cloud{opacity:0} + + .notification-modal{position:fixed;inset:0;z-index:2000;display:none} + .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} + [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)} + [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-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-close:hover{background:rgba(79,140,255,.12)} + .notification-modal .notification-modal-list{padding:14px 16px;overflow:auto} + .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)} + .notification-modal .notification-modal-list .notification-item.unread{border-color:rgba(79,140,255,.22)} diff --git a/frontend/index.html b/frontend/index.html index e6fec06..e478426 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -12,9 +12,9 @@ -
+
-
+
-
-