252 lines
10 KiB
HTML
252 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="進銷存管理系統">
|
|
<meta name="theme-color" content="#0d6efd">
|
|
<title>{% block title %}EVO進銷存{% endblock %}</title>
|
|
|
|
<!-- WebIcon -->
|
|
<link rel="icon" type="image/png" href="{{ url_for('static', filename='icon/favicon-96x96.png') }}" sizes="96x96"/>
|
|
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='icon/favicon.svg') }}"/>
|
|
<link rel="shortcut icon" href="{{ url_for('static', filename='icon/favicon.ico') }}"/>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icon/apple-touch-icon.png') }}"/>
|
|
<link rel="manifest" href="{{ url_for('static', filename='icon/site.webmanifest') }}"/>
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/sidebar.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/navbar.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/cards.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/tables.css') }}">
|
|
</head>
|
|
<body>
|
|
<!-- 側邊欄 -->
|
|
<nav class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="{{ url_for('index') }}" class="sidebar-brand">
|
|
<div class="brand-logo">
|
|
<img src="{{ url_for('static', filename='images/logo/logo.png') }}"
|
|
alt="系統 Logo"
|
|
class="logo-img">
|
|
</div>
|
|
<div class="brand-text">
|
|
<h1 class="brand-title">EVO進銷存</h1>
|
|
<div class="brand-version">Version {{ version }}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-content">
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">主要功能</div>
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint.startswith('product.') %}active{% endif %}"
|
|
href="{{ url_for('product.list_products') }}" onclick="closeSidebarOnMobile()">
|
|
<i class="bi bi-box"></i>
|
|
<span>商品管理</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint.startswith('transaction.') %}active{% endif %}"
|
|
href="{{ url_for('transaction.list_transactions') }}" onclick="closeSidebarOnMobile()">
|
|
<i class="bi bi-arrow-left-right"></i>
|
|
<span>交易管理</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">監控與報表</div>
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint.startswith('inventory.') %}active{% endif %}"
|
|
href="{{ url_for('inventory.alerts') }}" onclick="closeSidebarOnMobile()">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
<span>庫存警告</span>
|
|
{% set count = get_low_stock_count() %}
|
|
{% if count > 0 %}
|
|
<span class="badge bg-danger">{{ count }}</span>
|
|
{% endif %}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint.startswith('report.') %}active{% endif %}"
|
|
href="{{ url_for('report.index') }}" onclick="closeSidebarOnMobile()">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
<span>報表中心</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div>© 2024 進銷存系統</div>
|
|
<small>Build {{ build_version }}</small>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 遮罩層 -->
|
|
<div class="sidebar-overlay" id="overlay" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- 主要內容區域包裝器 -->
|
|
<div class="main-wrapper">
|
|
<!-- 頂部導航欄 -->
|
|
<nav class="top-navbar">
|
|
<button class="navbar-toggler" type="button" onclick="toggleSidebar()">
|
|
<i class="bi bi-list fs-4"></i>
|
|
</button>
|
|
<h1 class="page-title">{% block page_title %}{% endblock %}</h1>
|
|
<div class="navbar-tools">
|
|
<div class="time-display">
|
|
<i class="bi bi-clock"></i>
|
|
<span>{{ datetime.now().strftime('%Y-%m-%d %H:%M') }}</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主要內容區域 -->
|
|
<main class="main-content">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- 側邊欄控制腳本 -->
|
|
<script>
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('show');
|
|
document.getElementById('overlay').classList.toggle('show');
|
|
}
|
|
|
|
function closeSidebarOnMobile() {
|
|
if (window.innerWidth < 992) {
|
|
toggleSidebar();
|
|
}
|
|
}
|
|
|
|
window.addEventListener('resize', function () {
|
|
if (window.innerWidth >= 992) {
|
|
document.getElementById('sidebar').classList.remove('show');
|
|
document.getElementById('overlay').classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// 更新時間顯示
|
|
function updateTime() {
|
|
const timeDisplay = document.querySelector('.time-display span');
|
|
const now = new Date();
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
const date = now.getFullYear() + '-' +
|
|
String(now.getMonth() + 1).padStart(2, '0') + '-' +
|
|
String(now.getDate()).padStart(2, '0');
|
|
timeDisplay.textContent = `${date} ${hours}:${minutes}`;
|
|
}
|
|
|
|
// 每分鐘更新一次時間
|
|
setInterval(updateTime, 60000);
|
|
|
|
// 添加頁面載入動畫
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 添加頁面過渡效果
|
|
document.body.classList.add('page-loaded');
|
|
});
|
|
|
|
// 處理表格的響應式排序
|
|
document.querySelectorAll('th[data-sort]').forEach(header => {
|
|
header.addEventListener('click', function () {
|
|
const table = this.closest('table');
|
|
const index = Array.from(this.parentNode.children).indexOf(this);
|
|
const isAsc = this.classList.contains('asc');
|
|
|
|
// 清除其他列的排序狀態
|
|
this.parentNode.querySelectorAll('th').forEach(th => {
|
|
th.classList.remove('asc', 'desc');
|
|
});
|
|
|
|
// 設置當前列的排序狀態
|
|
this.classList.toggle('asc', !isAsc);
|
|
this.classList.toggle('desc', isAsc);
|
|
|
|
// 排序表格
|
|
const rows = Array.from(table.querySelectorAll('tbody tr'));
|
|
const sortedRows = rows.sort((a, b) => {
|
|
const aVal = a.children[index].textContent;
|
|
const bVal = b.children[index].textContent;
|
|
return isAsc ? bVal.localeCompare(aVal) : aVal.localeCompare(bVal);
|
|
});
|
|
|
|
// 更新表格內容
|
|
const tbody = table.querySelector('tbody');
|
|
tbody.innerHTML = '';
|
|
sortedRows.forEach(row => tbody.appendChild(row));
|
|
});
|
|
});
|
|
|
|
// 處理警告訊息自動消失
|
|
document.querySelectorAll('.alert').forEach(alert => {
|
|
setTimeout(() => {
|
|
const bsAlert = new bootstrap.Alert(alert);
|
|
bsAlert.close();
|
|
}, 5000);
|
|
});
|
|
|
|
|
|
// 處理側邊欄滾動陰影效果
|
|
const sidebarContent = document.querySelector('.sidebar-content');
|
|
if (sidebarContent) {
|
|
sidebarContent.addEventListener('scroll', function () {
|
|
const hasTopShadow = this.scrollTop > 0;
|
|
const hasBottomShadow = this.scrollTop < (this.scrollHeight - this.clientHeight);
|
|
|
|
this.classList.toggle('shadow-top', hasTopShadow);
|
|
this.classList.toggle('shadow-bottom', hasBottomShadow);
|
|
});
|
|
}
|
|
|
|
// 添加頁面載入進度指示器
|
|
document.addEventListener('readystatechange', function () {
|
|
if (document.readyState === 'interactive') {
|
|
// 頁面開始載入
|
|
const progress = document.createElement('div');
|
|
progress.className = 'page-loading-progress';
|
|
document.body.appendChild(progress);
|
|
} else if (document.readyState === 'complete') {
|
|
// 頁面載入完成
|
|
const progress = document.querySelector('.page-loading-progress');
|
|
if (progress) {
|
|
progress.style.width = '100%';
|
|
setTimeout(() => progress.remove(), 500);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|