admin_gitea/YMhut-box-C-
1
1
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Add legacy Electron app
build-winui / winui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
QWQLwToo
2026-06-26 13:29:02 +08:00
parent 079ee4eaeb
commit 46a3674381
115 changed files with 55280 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
box-old/src/js/tools/carInfoTool.js
+203
View File
@@ -0,0 +1,203 @@
// src/js/tools/carInfoTool.js
import BaseTool from '../baseTool.js';
import i18n from '../i18n.js';
class CarInfoTool extends BaseTool {
constructor() {
super('car-info', '车辆信息查询');
this.dom = {};
this.apiUrl = 'https://api.jkyai.top/API/clxxcx.php';
}
render() {
return `
<div class="page-container car-info-tool-container" style="display: flex; flex-direction: column; height: 100%;">
<div class="content-area" style="padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto;">
<div class="settings-section" style="position: relative;">
<button id="back-to-toolbox-btn" class="back-btn ripple" style="position: absolute; top: 0; left: 0; z-index: 10;">
<i class="fas fa-arrow-left"></i> ${i18n.t('common.backToToolbox', '返回工具箱')}
</button>
<div style="text-align: center; margin-bottom: 20px;">
<h2><i class="fas fa-car"></i> ${i18n.t('tool.carInfo.title', '车辆信息查询')}</h2>
<p style="color: var(--text-secondary); margin-top: 8px;">${i18n.t('tool.carInfo.description', '查询车辆品牌、系列、价格等详细信息')}</p>
</div>
<div class="query-section" style="background: rgba(var(--card-background-rgb), 0.5); padding: 24px; border-radius: 12px; margin-bottom: 24px;">
<form id="car-info-query-form">
<div class="form-row" style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
<div class="form-group" style="flex: 1; min-width: 300px;">
<label for="car-info-msg" class="form-label" style="display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">${i18n.t('tool.carInfo.vehicleName', '车辆名称/品牌')}</label>
<input type="text" id="car-info-msg" name="msg" class="form-input" placeholder="${i18n.t('tool.carInfo.vehicleNamePlaceholder', '请输入车辆名称或品牌，例如：问界、比亚迪')}" required style="width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; font-weight: 500; box-sizing: border-box; height: 48px; background: var(--input-bg); color: var(--text-primary);">
</div>
<button type="submit" class="action-btn ripple" id="car-info-query-btn" style="min-width: 120px; height: 48px;">
<i class="fas fa-search"></i> ${i18n.t('tool.carInfo.query', '查询车辆信息')}
</button>
</div>
</form>
</div>
<div class="error-container" id="car-info-error-container" style="display: none; background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-radius: 8px; padding: 20px; color: #dc3545; margin-bottom: 30px;">
<div class="error-message" id="car-info-error-message"></div>
</div>
</div>
<div class="settings-section" id="car-info-result-section" style="display: none;">
<h2><i class="fas fa-list"></i> ${i18n.t('tool.carInfo.results', '查询结果')}</h2>
<div class="car-grid" id="car-info-car-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 30px;"></div>
</div>
<div class="loading-container" id="car-info-loading-container" style="display: none; text-align: center; padding: 60px 0; color: var(--text-secondary);">
<div class="loading-spinner" style="display: inline-block; width: 40px; height: 40px; border: 3px solid rgba(var(--primary-rgb), 0.1); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; margin-bottom: 16px;"></div>
<p>${i18n.t('tool.carInfo.loading', '正在查询车辆信息，请稍候...')}</p>
</div>
</div>
</div>
`;
}
init() {
this._log('车辆信息工具初始化');
this.dom = {
queryForm: document.getElementById('car-info-query-form'),
msgInput: document.getElementById('car-info-msg'),
queryBtn: document.getElementById('car-info-query-btn'),
resultSection: document.getElementById('car-info-result-section'),
carGrid: document.getElementById('car-info-car-grid'),
loadingContainer: document.getElementById('car-info-loading-container'),
errorContainer: document.getElementById('car-info-error-container'),
errorMessage: document.getElementById('car-info-error-message')
};
this.dom.queryForm.addEventListener('submit', (e) => {
e.preventDefault();
this.queryCarInfo();
});
// 返回工具箱按钮
document.getElementById('back-to-toolbox-btn')?.addEventListener('click', () => {
window.mainPage.navigateTo('toolbox');
window.mainPage.updateActiveNavButton(document.getElementById('toolbox-btn'));
});
}
async queryCarInfo() {
const msg = this.dom.msgInput.value.trim();
if (!msg) {
this.showError(i18n.t('tool.carInfo.enterVehicleName', '请输入车辆名称或品牌'));
return;
}
this.showLoading();
const startTime = Date.now();
try {
const params = new URLSearchParams();
params.append('msg', msg);
params.append('type', 'json');
const requestUrl = `${this.apiUrl}?${params.toString()}`;
const response = await fetch(requestUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP Error! Status code: ${response.status}`);
}
const data = await response.json();
const responseTime = Date.now() - startTime;
if ((data.code === 200 || data.code === 201) && data.data) {
this.showResults(data.data);
this._log(`成功查询车辆信息，耗时 ${responseTime}ms`);
} else {
this.showError(data.message || i18n.t('tool.carInfo.queryFailed', '查询失败'));
this._log(`查询车辆信息失败: ${data.message || '未知错误'}`);
}
} catch (error) {
console.error('Query failed:', error);
this.showError(i18n.t('tool.carInfo.queryFailed', '查询失败') + ': ' + error.message);
this._log(`查询车辆信息失败: ${error.message}`);
} finally {
this.hideLoading();
}
}
showResults(carList) {
this.dom.carGrid.innerHTML = '';
if (carList.length > 0) {
carList.forEach(car => {
const card = this.createCarCard(car);
this.dom.carGrid.appendChild(card);
});
} else {
this.dom.carGrid.innerHTML = `<div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-secondary);">${i18n.t('tool.carInfo.noResults', '未找到车辆信息')}</div>`;
}
this.dom.resultSection.style.display = 'block';
}
createCarCard(car) {
const card = document.createElement('div');
card.className = 'car-card';
card.style.cssText = 'background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: all 0.3s ease;';
card.innerHTML = `
<img src="${car.white_pic_url || 'https://via.placeholder.com/320x200'}" alt="${car.series_name || 'Vehicle Image'}" class="car-image" style="width: 100%; height: 200px; object-fit: cover; display: block;">
<div class="car-info" style="padding: 16px;">
<div class="car-brand" style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px;">${car.brand_name || i18n.t('tool.carInfo.unknownBrand', '未知品牌')}</div>
<div class="car-name" style="font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;">${car.series_name || i18n.t('tool.carInfo.unknownModel', '未知型号')}</div>
<div class="car-price" style="font-size: 16px; font-weight: 700; color: #d63031; margin-bottom: 8px;">${car.official_price || i18n.t('tool.carInfo.priceNegotiable', '价格面议')}</div>
<div class="car-level" style="font-size: 14px; color: var(--text-secondary);">${car.level || i18n.t('tool.carInfo.unknownLevel', '未知级别')}</div>
</div>
`;
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-2px)';
card.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
card.style.borderColor = 'var(--primary-color)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
card.style.boxShadow = 'none';
card.style.borderColor = 'var(--border-color)';
});
return card;
}
showLoading() {
this.dom.queryBtn.disabled = true;
this.dom.queryBtn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${i18n.t('tool.carInfo.querying', '查询中...')}`;
this.dom.loadingContainer.style.display = 'block';
this.dom.resultSection.style.display = 'none';
this.dom.errorContainer.style.display = 'none';
}
hideLoading() {
this.dom.queryBtn.disabled = false;
this.dom.queryBtn.innerHTML = `<i class="fas fa-search"></i> ${i18n.t('tool.carInfo.query', '查询车辆信息')}`;
this.dom.loadingContainer.style.display = 'none';
}
showError(message) {
this.dom.errorMessage.textContent = message;
this.dom.errorContainer.style.display = 'block';
this.dom.resultSection.style.display = 'none';
this.dom.loadingContainer.style.display = 'none';
this.dom.queryBtn.disabled = false;
this.dom.queryBtn.innerHTML = `<i class="fas fa-search"></i> ${i18n.t('tool.carInfo.query', '查询车辆信息')}`;
}
}
export default CarInfoTool;