lq/wb-java-nc-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化v1

Browse Source
This commit is contained in:
liqi
2026-01-11 18:14:42 +08:00
commit 641b03e8e2
297 changed files with 28656 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/main/resources/static/js/cookie-utils.js Normal file
View File

@@ -0,0 +1,70 @@
// Cookie工具类
const CookieUtils = {
/**
* 设置Cookie
* @param {string} name Cookie名称
* @param {string} value Cookie值
* @param {number} days 过期天数，默认7天
*/
set(name, value, days = 7) {
const expires = new Date();
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=/`;
},
/**
* 获取Cookie
* @param {string} name Cookie名称
* @returns {string|null} Cookie值，不存在返回null
*/
get(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) {
return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
}
return null;
},
/**
* 删除Cookie
* @param {string} name Cookie名称
*/
remove(name) {
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
},
/**
* 获取JSON格式的Cookie
* @param {string} name Cookie名称
* @returns {any|null} 解析后的JSON对象，不存在或解析失败返回null
*/
getJSON(name) {
const value = this.get(name);
if (!value) return null;
try {
return JSON.parse(value);
} catch (e) {
console.error(`Failed to parse cookie ${name}:`, e);
return null;
}
},
/**
* 设置JSON格式的Cookie
* @param {string} name Cookie名称
* @param {any} value 要存储的对象
* @param {number} days 过期天数，默认7天
*/
setJSON(name, value, days = 7) {
try {
this.set(name, JSON.stringify(value), days);
} catch (e) {
console.error(`Failed to stringify cookie ${name}:`, e);
}
}
};

356
src/main/resources/static/js/custom-modal.js Normal file
View File

@@ -0,0 +1,356 @@
/**
* 自定义模态框组件
* 符合项目UI设计规范，具有平滑过渡动画和响应式显示
*/
class CustomModal {
constructor(options = {}) {
this.id = options.id || 'customModal_' + Date.now();
this.title = options.title || '';
this.content = options.content || '';
this.size = options.size || 'medium'; // small, medium, large
this.showClose = options.showClose !== false;
this.onClose = options.onClose || null;
this.onConfirm = options.onConfirm || null;
this.confirmText = options.confirmText || '确定';
this.cancelText = options.cancelText || '取消';
this.showFooter = options.showFooter !== false;
this.backdrop = options.backdrop !== false;
this.modal = null;
}
show() {
// 创建模态框HTML
const modalHtml = this._createModalHtml();
// 移除已存在的模态框
const existing = document.getElementById(this.id);
if (existing) {
existing.remove();
}
// 添加到body
document.body.insertAdjacentHTML('beforeend', modalHtml);
this.modal = document.getElementById(this.id);
this.backdropEl = document.getElementById(this.id + '_backdrop');
// 添加显示动画
requestAnimationFrame(() => {
this.modal.classList.add('show');
if (this.backdropEl) {
this.backdropEl.classList.add('show');
}
document.body.style.overflow = 'hidden';
});
// 绑定事件
this._bindEvents();
}
hide() {
if (!this.modal) return;
this.modal.classList.remove('show');
if (this.backdropEl) {
this.backdropEl.classList.remove('show');
}
document.body.style.overflow = '';
// 动画结束后移除
setTimeout(() => {
if (this.modal && this.modal.parentNode) {
this.modal.remove();
}
if (this.backdropEl && this.backdropEl.parentNode) {
this.backdropEl.remove();
}
if (this.onClose) {
this.onClose();
}
}, 300);
}
_createModalHtml() {
const sizeClass = {
small: 'modal-sm',
medium: '',
large: 'modal-lg'
}[this.size];
const backdropHtml = this.backdrop ?
`<div class="custom-modal-backdrop" id="${this.id}_backdrop"></div>` : '';
return backdropHtml + `
<div class="custom-modal" id="${this.id}">
<div class="custom-modal-dialog ${sizeClass}">
<div class="custom-modal-content">
${this.title || this.showClose ? `
<div class="custom-modal-header">
${this.title ? `<h5 class="custom-modal-title">${this.title}</h5>` : ''}
${this.showClose ? `<button type="button" class="custom-modal-close" data-dismiss="modal">
<i class="bi bi-x-lg"></i>
</button>` : ''}
</div>
` : ''}
<div class="custom-modal-body">
${this.content}
</div>
${this.showFooter ? `
<div class="custom-modal-footer">
<button type="button" class="custom-modal-btn custom-modal-btn-cancel" data-dismiss="modal">
${this.cancelText}
</button>
${this.onConfirm ? `
<button type="button" class="custom-modal-btn custom-modal-btn-confirm">
${this.confirmText}
</button>
` : ''}
</div>
` : ''}
</div>
</div>
</div>
`;
}
_bindEvents() {
// 关闭按钮
const closeBtn = this.modal.querySelector('[data-dismiss="modal"]');
if (closeBtn) {
closeBtn.addEventListener('click', () => this.hide());
}
// 确认按钮
const confirmBtn = this.modal.querySelector('.custom-modal-btn-confirm');
if (confirmBtn && this.onConfirm) {
confirmBtn.addEventListener('click', () => {
if (this.onConfirm() !== false) {
this.hide();
}
});
}
// 点击背景关闭
if (this.backdropEl) {
this.backdropEl.addEventListener('click', () => this.hide());
}
// 点击内容区域不关闭
const content = this.modal.querySelector('.custom-modal-content');
if (content) {
content.addEventListener('click', (e) => e.stopPropagation());
}
}
updateContent(content) {
const body = this.modal?.querySelector('.custom-modal-body');
if (body) {
body.innerHTML = content;
}
}
}
// CSS样式（通过JavaScript注入，或单独引入CSS文件）
const customModalStyles = `
<style id="custom-modal-styles">
.custom-modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(4px);
}
.custom-modal-backdrop.show {
opacity: 1;
}
.custom-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.custom-modal.show {
opacity: 1;
pointer-events: auto;
}
.custom-modal-dialog {
width: 100%;
max-width: 500px;
margin: auto;
transform: scale(0.9) translateY(-20px);
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.custom-modal.show .custom-modal-dialog {
transform: scale(1) translateY(0);
}
.custom-modal-dialog.modal-sm {
max-width: 400px;
}
.custom-modal-dialog.modal-lg {
max-width: 800px;
}
.custom-modal-content {
background: #fff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.custom-modal-header {
padding: 20px 24px;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.custom-modal-title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.custom-modal-close {
background: none;
border: none;
font-size: 20px;
color: #94a3b8;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color 0.2s;
}
.custom-modal-close:hover {
color: #64748b;
}
.custom-modal-body {
padding: 24px;
overflow-y: auto;
flex: 1;
color: #334155;
font-size: 14px;
line-height: 1.6;
}
.custom-modal-footer {
padding: 16px 24px;
border-top: 1px solid #f1f5f9;
display: flex;
justify-content: flex-end;
gap: 12px;
flex-shrink: 0;
}
.custom-modal-btn {
padding: 10px 24px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.custom-modal-btn-cancel {
background: #f8fafc;
color: #64748b;
}
.custom-modal-btn-cancel:hover {
background: #f1f5f9;
}
.custom-modal-btn-confirm {
background: #0f172a;
color: #fff;
}
.custom-modal-btn-confirm:hover {
background: #1e293b;
transform: translateY(-1px);
}
.custom-modal-btn-confirm:active {
transform: translateY(0);
}
/* 响应式 */
@media (max-width: 576px) {
.custom-modal-dialog {
max-width: 100%;
margin: 0;
}
.custom-modal {
padding: 0;
align-items: flex-end;
}
.custom-modal-dialog {
transform: translateY(100%);
}
.custom-modal.show .custom-modal-dialog {
transform: translateY(0);
}
.custom-modal-content {
border-radius: 20px 20px 0 0;
max-height: 80vh;
}
}
</style>
`;
// 注入样式
if (!document.getElementById('custom-modal-styles')) {
document.head.insertAdjacentHTML('beforeend', customModalStyles);
}
// 导出到全局
window.CustomModal = CustomModal;
// 便捷方法
window.showCustomModal = function(options) {
const modal = new CustomModal(options);
modal.show();
return modal;
};
window.showCustomConfirm = function(message, title = '确认操作', onConfirm = null) {
return new CustomModal({
title: title,
content: `<p style="margin: 0;">${message}</p>`,
onConfirm: onConfirm,
showFooter: true
});
};

338
src/main/resources/static/js/merchant-common.js Normal file
View File

@@ -0,0 +1,338 @@
/**
* 商家后台通用脚本
* 提供侧边栏、加载状态、交互反馈等功能
*/
// 侧边栏HTML模板
function getSidebarHTML(activePage) {
const menuItems = [
{ href: '/merchant/dashboard.html', icon: 'bi-speedometer2', text: '首页', page: 'dashboard' },
{ href: '/merchant/products.html', icon: 'bi-box-seam', text: '商品管理', page: 'products' },
{ href: '/merchant/orders.html', icon: 'bi-receipt-cutoff', text: '订单管理', page: 'orders' },
{ href: '/merchant/inventory.html', icon: 'bi-archive', text: '库存管理', page: 'inventory' },
{ href: '/merchant/statistics.html', icon: 'bi-bar-chart', text: '数据统计', page: 'statistics' },
{ href: '/merchant/announcements.html', icon: 'bi-megaphone', text: '公告管理', page: 'announcements' },
{ href: '/merchant/messages.html', icon: 'bi-chat-dots', text: '留言管理', page: 'messages' },
{ href: '/merchant/reviews.html', icon: 'bi-star', text: '评价管理', page: 'reviews' },
{ href: '/merchant/users.html', icon: 'bi-people', text: '用户管理', page: 'users' }
];
const menuHTML = menuItems.map(item => {
const activeClass = item.page === activePage ? 'active' : '';
return `
<li class="nav-item">
<a class="nav-link ${activeClass}" href="${item.href}" data-page="${item.page}">
<i class="bi ${item.icon}"></i>
<span class="nav-text">${item.text}</span>
</a>
</li>
`;
}).join('');
return `
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="d-flex align-items-center">
<i class="bi bi-shop fs-4 me-2"></i>
<span class="sidebar-brand">商家后台</span>
</div>
<button class="btn btn-link text-white p-0 d-md-none" id="sidebarCloseBtn">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<ul class="nav flex-column">
${menuHTML}
</ul>
</nav>
<div class="sidebar-footer">
<a href="/merchant/logout" class="btn btn-outline-light w-100">
<i class="bi bi-box-arrow-right"></i>
<span class="ms-2">退出登录</span>
</a>
</div>
</div>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<nav class="top-navbar d-md-none">
<div class="container-fluid d-flex align-items-center">
<button class="btn btn-link text-white p-0" id="sidebarToggleBtn">
<i class="bi bi-list fs-4"></i>
</button>
<span class="ms-3 text-white fw-bold">商家后台</span>
</div>
</nav>
`;
}
// 侧边栏CSS样式
const sidebarCSS = `
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 260px;
height: 100vh;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
color: #fff;
z-index: 1050;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-brand {
font-size: 1.25rem;
font-weight: 600;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 1rem 0;
}
.sidebar-nav .nav-link {
color: rgba(255, 255, 255, 0.8);
padding: 0.75rem 1.5rem;
transition: all 0.3s;
border-left: 3px solid transparent;
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar-nav .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
border-left-color: #0d6efd;
}
.sidebar-nav .nav-link.active {
background-color: rgba(13, 110, 253, 0.2);
color: #fff;
border-left-color: #0d6efd;
font-weight: 600;
}
.sidebar-nav .nav-link i {
width: 24px;
font-size: 1.1rem;
margin-right: 0.75rem;
}
.sidebar-nav .nav-text {
flex: 1;
}
.sidebar-footer {
padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767.98px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show {
transform: translateX(0);
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1049;
display: none;
transition: opacity 0.3s;
}
.sidebar-overlay.show {
display: block;
}
.top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
z-index: 1048;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body {
padding-top: 56px;
}
}
@media (min-width: 768px) {
.main-content {
margin-left: 260px;
min-height: 100vh;
}
}
.sidebar-nav::-webkit-scrollbar {
width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.sidebar-nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
`;
// 初始化侧边栏
function initSidebar(activePage) {
// 添加CSS样式
if (!document.getElementById('merchant-sidebar-styles')) {
const style = document.createElement('style');
style.id = 'merchant-sidebar-styles';
style.textContent = sidebarCSS;
document.head.appendChild(style);
}
// 替换导航栏
const oldNav = document.querySelector('nav.navbar');
if (oldNav) {
oldNav.outerHTML = getSidebarHTML(activePage);
// 初始化交互
const sidebar = document.getElementById('sidebar');
const sidebarOverlay = document.getElementById('sidebarOverlay');
const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
const sidebarCloseBtn = document.getElementById('sidebarCloseBtn');
if (sidebarToggleBtn) {
sidebarToggleBtn.addEventListener('click', function() {
sidebar.classList.add('show');
sidebarOverlay.classList.add('show');
document.body.style.overflow = 'hidden';
});
}
function closeSidebar() {
sidebar.classList.remove('show');
sidebarOverlay.classList.remove('show');
document.body.style.overflow = '';
}
if (sidebarCloseBtn) {
sidebarCloseBtn.addEventListener('click', closeSidebar);
}
if (sidebarOverlay) {
sidebarOverlay.addEventListener('click', closeSidebar);
}
const navLinks = document.querySelectorAll('.sidebar-nav .nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function() {
if (window.innerWidth < 768) {
closeSidebar();
}
});
});
}
// 包装主内容区域
const container = document.querySelector('.container, .container-fluid');
if (container && !container.closest('.main-content')) {
const mainContent = document.createElement('div');
mainContent.className = 'main-content';
container.parentNode.insertBefore(mainContent, container);
mainContent.appendChild(container);
}
}
// 显示加载状态
function showLoading(elementId, message = '加载中...') {
const element = document.getElementById(elementId);
if (element) {
element.innerHTML = `
<div class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">${message}</span>
</div>
<p class="text-muted mt-3">${message}</p>
</div>
`;
}
}
// 显示成功提示
function showSuccess(message, duration = 3000) {
const toast = document.createElement('div');
toast.className = 'toast align-items-center text-white bg-success border-0';
toast.setAttribute('role', 'alert');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">${message}</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
</div>
`;
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
toastContainer.appendChild(toast);
const bsToast = new bootstrap.Toast(toast);
bsToast.show();
toast.addEventListener('hidden.bs.toast', () => toast.remove());
}
// 显示错误提示
function showError(message, duration = 3000) {
const toast = document.createElement('div');
toast.className = 'toast align-items-center text-white bg-danger border-0';
toast.setAttribute('role', 'alert');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">${message}</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
</div>
`;
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
toastContainer.appendChild(toast);
const bsToast = new bootstrap.Toast(toast);
bsToast.show();
toast.addEventListener('hidden.bs.toast', () => toast.remove());
}
// 创建Toast容器
function createToastContainer() {
const container = document.createElement('div');
container.id = 'toastContainer';
container.className = 'toast-container position-fixed top-0 end-0 p-3';
container.style.zIndex = '1060';
document.body.appendChild(container);
return container;
}
// 检测当前页面
function detectCurrentPage() {
const path = window.location.pathname;
if (path.includes('products')) return 'products';
if (path.includes('orders')) return 'orders';
if (path.includes('inventory')) return 'inventory';
if (path.includes('statistics')) return 'statistics';
if (path.includes('announcements')) return 'announcements';
if (path.includes('messages')) return 'messages';
if (path.includes('reviews')) return 'reviews';
if (path.includes('users')) return 'users';
return 'dashboard';
}
// 自动初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
initSidebar(detectCurrentPage());
});
} else {
initSidebar(detectCurrentPage());
}

297
src/main/resources/static/js/merchant-sidebar.js Normal file
View File

@@ -0,0 +1,297 @@
/**
* 商家后台侧边栏通用脚本
* 提供侧边栏的HTML结构和交互逻辑
*/
// 生成侧边栏HTML
function generateSidebarHTML(currentPage) {
const menuItems = [
{ href: '/merchant/dashboard.html', icon: 'bi-speedometer2', text: '首页', page: 'dashboard' },
{ href: '/merchant/products.html', icon: 'bi-box-seam', text: '商品管理', page: 'products' },
{ href: '/merchant/orders.html', icon: 'bi-receipt-cutoff', text: '订单管理', page: 'orders' },
{ href: '/merchant/inventory.html', icon: 'bi-archive', text: '库存管理', page: 'inventory' },
{ href: '/merchant/statistics.html', icon: 'bi-bar-chart', text: '数据统计', page: 'statistics' },
{ href: '/merchant/announcements.html', icon: 'bi-megaphone', text: '公告管理', page: 'announcements' },
{ href: '/merchant/messages.html', icon: 'bi-chat-dots', text: '留言管理', page: 'messages' },
{ href: '/merchant/reviews.html', icon: 'bi-star', text: '评价管理', page: 'reviews' },
{ href: '/merchant/users.html', icon: 'bi-people', text: '用户管理', page: 'users' }
];
const menuHTML = menuItems.map(item => {
const activeClass = item.page === currentPage ? 'active' : '';
return `
<li class="nav-item">
<a class="nav-link ${activeClass}" href="${item.href}" data-page="${item.page}">
<i class="bi ${item.icon}"></i>
<span class="nav-text">${item.text}</span>
</a>
</li>
`;
}).join('');
return `
<!-- 侧边栏导航 -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="d-flex align-items-center">
<i class="bi bi-shop fs-4 me-2"></i>
<span class="sidebar-brand">商家后台</span>
</div>
<button class="btn btn-link text-white p-0 d-md-none" id="sidebarCloseBtn">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<ul class="nav flex-column">
${menuHTML}
</ul>
</nav>
<div class="sidebar-footer">
<a href="/merchant/logout" class="btn btn-outline-light w-100">
<i class="bi bi-box-arrow-right"></i>
<span class="ms-2">退出登录</span>
</a>
</div>
</div>
<!-- 侧边栏遮罩层（移动端） -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- 顶部导航栏（移动端） -->
<nav class="top-navbar d-md-none">
<div class="container-fluid d-flex align-items-center">
<button class="btn btn-link text-white p-0" id="sidebarToggleBtn">
<i class="bi bi-list fs-4"></i>
</button>
<span class="ms-3 text-white fw-bold">商家后台</span>
</div>
</nav>
`;
}
// 添加侧边栏CSS样式
function addSidebarStyles() {
if (document.getElementById('sidebar-styles')) return;
const style = document.createElement('style');
style.id = 'sidebar-styles';
style.textContent = `
/* 侧边栏样式 */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 260px;
height: 100vh;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
color: #fff;
z-index: 1050;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-brand {
font-size: 1.25rem;
font-weight: 600;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 1rem 0;
}
.sidebar-nav .nav-link {
color: rgba(255, 255, 255, 0.8);
padding: 0.75rem 1.5rem;
transition: all 0.3s;
border-left: 3px solid transparent;
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar-nav .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
border-left-color: #0d6efd;
}
.sidebar-nav .nav-link.active {
background-color: rgba(13, 110, 253, 0.2);
color: #fff;
border-left-color: #0d6efd;
font-weight: 600;
}
.sidebar-nav .nav-link i {
width: 24px;
font-size: 1.1rem;
margin-right: 0.75rem;
}
.sidebar-nav .nav-text {
flex: 1;
}
.sidebar-footer {
padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* 移动端样式 */
@media (max-width: 767.98px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show {
transform: translateX(0);
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1049;
display: none;
transition: opacity 0.3s;
}
.sidebar-overlay.show {
display: block;
}
.top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
z-index: 1048;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body {
padding-top: 56px;
}
}
/* 桌面端主内容区域 */
@media (min-width: 768px) {
.main-content {
margin-left: 260px;
min-height: 100vh;
}
}
/* 滚动条样式 */
.sidebar-nav::-webkit-scrollbar {
width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.sidebar-nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
`;
document.head.appendChild(style);
}
// 初始化侧边栏交互
function initSidebar() {
const sidebar = document.getElementById('sidebar');
const sidebarOverlay = document.getElementById('sidebarOverlay');
const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
const sidebarCloseBtn = document.getElementById('sidebarCloseBtn');
if (!sidebar) return;
// 移动端切换侧边栏
if (sidebarToggleBtn) {
sidebarToggleBtn.addEventListener('click', function() {
sidebar.classList.add('show');
if (sidebarOverlay) sidebarOverlay.classList.add('show');
document.body.style.overflow = 'hidden';
});
}
// 关闭侧边栏
function closeSidebar() {
sidebar.classList.remove('show');
if (sidebarOverlay) sidebarOverlay.classList.remove('show');
document.body.style.overflow = '';
}
if (sidebarCloseBtn) {
sidebarCloseBtn.addEventListener('click', closeSidebar);
}
if (sidebarOverlay) {
sidebarOverlay.addEventListener('click', closeSidebar);
}
// 点击导航项时，移动端自动关闭侧边栏
const navLinks = document.querySelectorAll('.sidebar-nav .nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function() {
if (window.innerWidth < 768) {
closeSidebar();
}
});
});
}
// 初始化侧边栏（自动检测当前页面）
function initMerchantSidebar() {
addSidebarStyles();
// 检测当前页面
const path = window.location.pathname;
let currentPage = 'dashboard';
if (path.includes('products')) currentPage = 'products';
else if (path.includes('orders')) currentPage = 'orders';
else if (path.includes('inventory')) currentPage = 'inventory';
else if (path.includes('statistics')) currentPage = 'statistics';
else if (path.includes('announcements')) currentPage = 'announcements';
else if (path.includes('messages')) currentPage = 'messages';
else if (path.includes('reviews')) currentPage = 'reviews';
else if (path.includes('users')) currentPage = 'users';
// 查找并替换旧的导航栏
const oldNav = document.querySelector('nav.navbar');
if (oldNav) {
oldNav.outerHTML = generateSidebarHTML(currentPage);
initSidebar();
}
}
// 页面加载完成后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initMerchantSidebar);
} else {
initMerchantSidebar();
}

300
src/main/resources/static/js/sidebar-replacer.js Normal file
View File

@@ -0,0 +1,300 @@
/**
* 侧边栏自动替换脚本
* 自动检测并替换旧的导航栏为侧边栏
*/
(function() {
'use strict';
// 侧边栏CSS
const sidebarCSS = `
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 260px;
height: 100vh;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
color: #fff;
z-index: 1000;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-brand {
font-size: 1.25rem;
font-weight: 600;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 1rem 0;
}
.sidebar-nav .nav-link {
color: rgba(255, 255, 255, 0.8);
padding: 0.75rem 1.5rem;
transition: all 0.3s;
border-left: 3px solid transparent;
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar-nav .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
border-left-color: #0d6efd;
}
.sidebar-nav .nav-link.active {
background-color: rgba(13, 110, 253, 0.2);
color: #fff;
border-left-color: #0d6efd;
font-weight: 600;
}
.sidebar-nav .nav-link i {
width: 24px;
font-size: 1.1rem;
margin-right: 0.75rem;
}
.sidebar-nav .nav-text {
flex: 1;
}
.sidebar-footer {
padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767.98px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show {
transform: translateX(0);
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1049;
display: none;
transition: opacity 0.3s;
}
.sidebar-overlay.show {
display: block;
}
.top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
z-index: 1048;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body {
padding-top: 56px;
}
}
@media (min-width: 768px) {
.main-content {
margin-left: 260px;
min-height: 100vh;
position: relative;
z-index: 1;
width: calc(100% - 260px);
}
}
.sidebar-nav::-webkit-scrollbar {
width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.sidebar-nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
`;
// 菜单配置
const menuConfig = [
{ href: '/merchant/dashboard.html', icon: 'bi-speedometer2', text: '首页', page: 'dashboard' },
{ href: '/merchant/products.html', icon: 'bi-box-seam', text: '商品管理', page: 'products' },
{ href: '/merchant/orders.html', icon: 'bi-receipt-cutoff', text: '订单管理', page: 'orders' },
{ href: '/merchant/inventory.html', icon: 'bi-archive', text: '库存管理', page: 'inventory' },
{ href: '/merchant/statistics.html', icon: 'bi-bar-chart-line', text: '数据统计', page: 'statistics' },
{ href: '/merchant/announcements.html', icon: 'bi-megaphone', text: '公告管理', page: 'announcements' },
{ href: '/merchant/messages.html', icon: 'bi-chat-dots', text: '留言管理', page: 'messages' },
{ href: '/merchant/reviews.html', icon: 'bi-star', text: '评价管理', page: 'reviews' },
{ href: '/merchant/users.html', icon: 'bi-people', text: '用户管理', page: 'users' }
];
// 检测当前页面
function detectCurrentPage() {
const path = window.location.pathname;
for (const item of menuConfig) {
if (path.includes(item.page)) {
return item.page;
}
}
return 'dashboard';
}
// 生成侧边栏HTML
function generateSidebar(activePage) {
const menuHTML = menuConfig.map(item => {
const activeClass = item.page === activePage ? 'active' : '';
return `
<li class="nav-item">
<a class="nav-link ${activeClass}" href="${item.href}" data-page="${item.page}">
<i class="bi ${item.icon}"></i>
<span class="nav-text">${item.text}</span>
</a>
</li>
`;
}).join('');
return `
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="d-flex align-items-center">
<i class="bi bi-shop fs-4 me-2"></i>
<span class="sidebar-brand">商家后台</span>
</div>
<button class="btn btn-link text-white p-0 d-md-none" id="sidebarCloseBtn">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<ul class="nav flex-column">
${menuHTML}
</ul>
</nav>
<div class="sidebar-footer">
<a href="/merchant/logout" class="btn btn-outline-light w-100">
<i class="bi bi-box-arrow-right"></i>
<span class="ms-2">退出登录</span>
</a>
</div>
</div>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<nav class="top-navbar d-md-none">
<div class="container-fluid d-flex align-items-center">
<button class="btn btn-link text-white p-0" id="sidebarToggleBtn">
<i class="bi bi-list fs-4"></i>
</button>
<span class="ms-3 text-white fw-bold">商家后台</span>
</div>
</nav>
`;
}
// 初始化侧边栏
function initSidebar() {
// 添加CSS
if (!document.getElementById('merchant-sidebar-styles')) {
const style = document.createElement('style');
style.id = 'merchant-sidebar-styles';
style.textContent = sidebarCSS;
document.head.appendChild(style);
}
// 替换导航栏
const oldNav = document.querySelector('nav.navbar');
if (oldNav && !document.getElementById('sidebar')) {
const activePage = detectCurrentPage();
oldNav.outerHTML = generateSidebar(activePage);
// 包装主内容 - 确保不重复包装
let mainContent = document.querySelector('.main-content');
if (!mainContent) {
// 查找body的直接子元素中的container
const bodyChildren = Array.from(document.body.children);
let container = null;
// 优先查找container-fluid，然后是container
for (const child of bodyChildren) {
if (child.classList.contains('container-fluid') || child.classList.contains('container')) {
if (!child.closest('.main-content') && !child.closest('.sidebar') && !child.closest('.sidebar-overlay') && !child.closest('.top-navbar')) {
container = child;
break;
}
}
}
if (container) {
mainContent = document.createElement('div');
mainContent.className = 'main-content';
container.parentNode.insertBefore(mainContent, container);
mainContent.appendChild(container);
}
}
// 初始化交互
setupSidebarInteractions();
}
}
// 设置侧边栏交互
function setupSidebarInteractions() {
const sidebar = document.getElementById('sidebar');
const sidebarOverlay = document.getElementById('sidebarOverlay');
const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
const sidebarCloseBtn = document.getElementById('sidebarCloseBtn');
if (!sidebar) return;
function openSidebar() {
sidebar.classList.add('show');
if (sidebarOverlay) sidebarOverlay.classList.add('show');
document.body.style.overflow = 'hidden';
}
function closeSidebar() {
sidebar.classList.remove('show');
if (sidebarOverlay) sidebarOverlay.classList.remove('show');
document.body.style.overflow = '';
}
if (sidebarToggleBtn) {
sidebarToggleBtn.addEventListener('click', openSidebar);
}
if (sidebarCloseBtn) {
sidebarCloseBtn.addEventListener('click', closeSidebar);
}
if (sidebarOverlay) {
sidebarOverlay.addEventListener('click', closeSidebar);
}
// 点击导航项时，移动端自动关闭
const navLinks = document.querySelectorAll('.sidebar-nav .nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function() {
if (window.innerWidth < 768) {
closeSidebar();
}
});
});
}
// 页面加载完成后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initSidebar);
} else {
initSidebar();
}
})();

289
src/main/resources/static/js/ui-enhancements.js Normal file
View File

@@ -0,0 +1,289 @@
/**
* UI交互增强脚本
* 提供加载状态、视觉反馈、操作提示等功能
*/
// 创建Toast容器
function ensureToastContainer() {
let container = document.getElementById('toastContainer');
if (!container) {
container = document.createElement('div');
container.id = 'toastContainer';
container.className = 'toast-container position-fixed top-0 end-0 p-3';
container.style.zIndex = '1060';
document.body.appendChild(container);
}
return container;
}
// 显示成功提示
function showSuccess(message, duration = 3000) {
const container = ensureToastContainer();
const toast = document.createElement('div');
toast.className = 'toast align-items-center text-white bg-success border-0';
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-check-circle me-2"></i>${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
container.appendChild(toast);
const bsToast = new bootstrap.Toast(toast, { delay: duration });
bsToast.show();
toast.addEventListener('hidden.bs.toast', () => toast.remove());
}
// 显示错误提示
function showError(message, duration = 4000) {
const container = ensureToastContainer();
const toast = document.createElement('div');
toast.className = 'toast align-items-center text-white bg-danger border-0';
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-exclamation-circle me-2"></i>${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
container.appendChild(toast);
const bsToast = new bootstrap.Toast(toast, { delay: duration });
bsToast.show();
toast.addEventListener('hidden.bs.toast', () => toast.remove());
}
// 显示警告提示
function showWarning(message, duration = 3000) {
const container = ensureToastContainer();
const toast = document.createElement('div');
toast.className = 'toast align-items-center text-white bg-warning border-0';
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-exclamation-triangle me-2"></i>${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
container.appendChild(toast);
const bsToast = new bootstrap.Toast(toast, { delay: duration });
bsToast.show();
toast.addEventListener('hidden.bs.toast', () => toast.remove());
}
// 显示信息提示
function showInfo(message, duration = 3000) {
const container = ensureToastContainer();
const toast = document.createElement('div');
toast.className = 'toast align-items-center text-white bg-info border-0';
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-info-circle me-2"></i>${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
container.appendChild(toast);
const bsToast = new bootstrap.Toast(toast, { delay: duration });
bsToast.show();
toast.addEventListener('hidden.bs.toast', () => toast.remove());
}
// 显示加载状态
function showLoading(elementId, message = '加载中...') {
const element = document.getElementById(elementId);
if (element) {
element.innerHTML = `
<div class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">${message}</span>
</div>
<p class="text-muted mt-3">${message}</p>
</div>
`;
}
}
// 按钮加载状态
function setButtonLoading(button, loading = true, originalText = null) {
if (loading) {
if (!button.dataset.originalText) {
button.dataset.originalText = button.innerHTML;
}
button.disabled = true;
button.innerHTML = `
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
处理中...
`;
} else {
button.disabled = false;
button.innerHTML = button.dataset.originalText || originalText || '提交';
delete button.dataset.originalText;
}
}
// 增强的fetch函数（带加载状态和错误处理）
async function enhancedFetch(url, options = {}) {
const { showLoading: showLoadingId, button: loadingButton, ...fetchOptions } = options;
// 显示加载状态
if (showLoadingId) {
showLoading(showLoadingId);
}
// 按钮加载状态
if (loadingButton) {
setButtonLoading(loadingButton, true);
}
try {
const response = await fetch(url, fetchOptions);
const data = await response.json();
// 恢复按钮状态
if (loadingButton) {
setButtonLoading(loadingButton, false);
}
return { response, data };
} catch (error) {
// 恢复按钮状态
if (loadingButton) {
setButtonLoading(loadingButton, false);
}
showError('网络请求失败，请检查网络连接');
throw error;
}
}
// 确认对话框（使用自定义模态框）
function confirmAction(message, title = '确认操作', confirmText = '确定', cancelText = '取消') {
return new Promise((resolve) => {
// 确保自定义模态框已加载
if (typeof CustomModal === 'undefined') {
console.error('CustomModal未加载，请先引入custom-modal.js');
// 降级到原生confirm
resolve(confirm(message));
return;
}
const modal = new CustomModal({
title: title,
content: `<p style="margin: 0;">${message}</p>`,
confirmText: confirmText,
cancelText: cancelText,
onConfirm: () => {
resolve(true);
return true;
},
onClose: () => {
resolve(false);
}
});
modal.show();
});
}
// 表单验证增强
function validateForm(formId) {
const form = document.getElementById(formId);
if (!form) return false;
const requiredFields = form.querySelectorAll('[required]');
let isValid = true;
requiredFields.forEach(field => {
if (!field.value.trim()) {
field.classList.add('is-invalid');
isValid = false;
} else {
field.classList.remove('is-invalid');
field.classList.add('is-valid');
}
});
return isValid;
}
// 数字格式化
function formatNumber(num, decimals = 2) {
return parseFloat(num || 0).toFixed(decimals);
}
// 日期格式化
function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
if (!date) return '-';
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const hours = String(d.getHours()).padStart(2, '0');
const minutes = String(d.getMinutes()).padStart(2, '0');
const seconds = String(d.getSeconds()).padStart(2, '0');
return format
.replace('YYYY', year)
.replace('MM', month)
.replace('DD', day)
.replace('HH', hours)
.replace('mm', minutes)
.replace('ss', seconds);
}
// 防抖函数
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 节流函数
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// 导出到全局
window.UIEnhancements = {
showSuccess,
showError,
showWarning,
showInfo,
showLoading,
setButtonLoading,
enhancedFetch,
confirmAction,
validateForm,
formatNumber,
formatDate,
debounce,
throttle
};

BIN
src/main/resources/static/upload/product/3a9cb9e4-97a9-4be5-ba2f-6939bebe5ba5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
src/main/resources/static/upload/product/ad501998-b3c1-4568-ae4f-31e2d9ce0e3d.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
src/main/resources/static/upload/product/f6f49393-42c0-4c27-92fe-5d54aa04888f.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB