' +
+ '| ' + escapeHtml(plan.provider) + ' | ' +
+ '' + escapeHtml(getDisplayRegion(plan)) + ' | ' +
+ '' + escapeHtml(plan.name) + ' | ' +
+ '' + showVal(plan.vcpu) + ' | ' +
+ '' + showVal(plan.memory_gb, ' GB') + ' | ' +
+ '' + showVal(plan.storage_gb, ' GB') + ' | ' +
+ '' + showVal(plan.bandwidth_mbps, ' Mbps') + ' | ' +
+ '' + (plan.traffic ? escapeHtml(plan.traffic) : '—') + ' | ' +
+ '' + formatPrice(plan) + ' | ' +
+ '' +
+ '' +
+ (url ? '官网' : '') +
+ ' | ' +
+ '
'
+ );
+ }).join('');
+
+ setTimeout(function() {
+ tableBody.style.opacity = '1';
+ attachFavoriteListeners();
+ }, 10);
+ }
+
+ function attachFavoriteListeners() {
+ document.querySelectorAll('.btn-favorite').forEach(function(btn) {
+ btn.addEventListener('click', function(e) {
+ e.preventDefault();
+ const planId = parseInt(this.getAttribute('data-id'));
+ toggleFavorite(planId);
+ });
+ });
+ }
+
+ function updateResultCount(count) {
+ const existingCount = document.querySelector('.result-count');
+ if (existingCount) {
+ existingCount.textContent = '共 ' + count + ' 条结果';
+ }
+ }
+
+ function refresh() {
+ if (isLoading) return;
+ filteredPlans = applyFilters();
+ const sortedPlans = sortPlans(filteredPlans, currentSort.column, currentSort.order);
+ renderTable(sortedPlans);
+ updateResultCount(filteredPlans.length);
+ updateURL();
+ }
+
+ // ========== URL 同步 ==========
+ function updateURL() {
+ const params = new URLSearchParams();
+ if (filterProvider.value) params.set('provider', filterProvider.value);
+ if (filterRegion.value) params.set('region', filterRegion.value);
+ if (filterMemory.value !== '0') params.set('memory', filterMemory.value);
+ if (filterPrice.value !== '0') params.set('price', filterPrice.value);
+ if (filterCurrency.value !== 'CNY') params.set('currency', filterCurrency.value);
+ if (searchInput.value) params.set('search', searchInput.value);
+ if (currentSort.column) {
+ params.set('sort', currentSort.column);
+ params.set('order', currentSort.order);
+ }
+
+ const newURL = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
+ window.history.replaceState({}, '', newURL);
+ }
+
+ function loadFromURL() {
+ const params = new URLSearchParams(window.location.search);
+ if (params.get('provider')) filterProvider.value = params.get('provider');
+ if (params.get('region')) filterRegion.value = params.get('region');
+ if (params.get('memory')) filterMemory.value = params.get('memory');
+ if (params.get('price')) filterPrice.value = params.get('price');
+ if (params.get('currency')) filterCurrency.value = params.get('currency');
+ if (params.get('search')) searchInput.value = params.get('search');
+ if (params.get('sort')) {
+ currentSort.column = params.get('sort');
+ currentSort.order = params.get('order') || 'asc';
+ }
+ }
+
+ // ========== 事件监听 ==========
+ // 筛选器变化
+ filterProvider.addEventListener('change', refresh);
+ filterRegion.addEventListener('change', refresh);
+ filterMemory.addEventListener('change', refresh);
+ filterPrice.addEventListener('change', refresh);
+ filterCurrency.addEventListener('change', refresh);
+
+ // 搜索输入（防抖）
+ let searchTimeout;
+ searchInput.addEventListener('input', function() {
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(refresh, 300);
+ });
+
+ // 重置按钮
+ btnReset.addEventListener('click', function () {
+ filterProvider.value = '';
+ filterRegion.value = '';
+ filterMemory.value = '0';
+ filterPrice.value = '0';
+ filterCurrency.value = 'CNY';
+ searchInput.value = '';
+ currentSort = { column: null, order: 'asc' };
+ updateSortIcons();
+ refresh();
+ });
+
+ // 表头排序点击
+ document.querySelectorAll('.sortable').forEach(function(th) {
+ th.style.cursor = 'pointer';
+ th.addEventListener('click', function() {
+ const column = this.getAttribute('data-sort');
+
+ if (currentSort.column === column) {
+ currentSort.order = currentSort.order === 'asc' ? 'desc' : 'asc';
+ } else {
+ currentSort.column = column;
+ currentSort.order = 'asc';
+ }
+
+ updateSortIcons();
+ refresh();
+ });
+ });
+
+ // ========== 初始化 ==========
+ isLoading = true;
+ showLoadingSkeleton();
+
+ fetch('/api/plans')
+ .then(function (res) {
+ if (!res.ok) throw new Error('Network response was not ok');
+ return res.json();
+ })
+ .then(function (plans) {
+ allPlans = plans;
+ fillFilterOptions();
+ loadFromURL();
+ isLoading = false;
+ updateSortIcons();
+ refresh();
+
+ // 添加结果计数显示
+ const filters = document.querySelector('.filters');
+ if (filters && !document.querySelector('.result-count')) {
+ const countEl = document.createElement('div');
+ countEl.className = 'result-count';
+ countEl.style.cssText = 'margin-left: auto; color: var(--text-muted); font-size: 0.9rem; font-weight: 500;';
+ countEl.textContent = '共 ' + plans.length + ' 条结果';
+ filters.appendChild(countEl);
+ }
+ })
+ .catch(function (error) {
+ isLoading = false;
+ console.error('加载失败:', error);
+ tableBody.innerHTML = '
+
+
+
@@ -78,6 +83,17 @@
+
+
+
+