TrustDataSpace/assets/js/main.js

// 组件加载器类
class ComponentLoader {
    static async loadComponent(elementSelector, componentPath) {
        try {
            const response = await fetch(componentPath);
            const html = await response.text();
            document.querySelector(elementSelector).innerHTML = html;
            
            const componentName = componentPath.split('/').slice(-2)[0];
            const scriptPath = componentPath.replace('.html', '.js');
            const scriptExists = await fetch(scriptPath).then(() => true).catch(() => false);
            
            if (scriptExists) {
                const script = document.createElement('script');
                script.src = scriptPath;
                document.body.appendChild(script);
            }
        } catch (error) {
            console.error(`Error loading component ${componentPath}:`, error);
        }
    }

    static init() {
        const pathDepth = window.location.pathname.split('/').length - 2;
        const basePath = '../'.repeat(pathDepth);
        
        this.loadComponent('header', `${basePath}components/header/header.html`);
        this.loadComponent('footer', `${basePath}components/footer/footer.html`);
    }
}

// 图片模态框功能
function showImageModal(imgElement) {
    const modal = document.getElementById('imageModal');
    const modalImg = document.getElementById('modalImage');
    modalImg.src = imgElement.src;
    modalImg.alt = imgElement.alt;
    
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', () => {
    // 初始化组件
    ComponentLoader.init();

    // 初始化工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    // 案例切换功能初始化
    initCaseTabs();

    // 表单步骤功能初始化
    initFormSteps();
});

// 案例切换功能
function initCaseTabs() {
    document.querySelectorAll('.case-tab').forEach(tab => {
        tab.addEventListener('click', function() {
            document.querySelector('.case-tab.active').classList.remove('active');
            this.classList.add('active');
            
            const type = this.textContent;
            document.querySelectorAll('.case-item').forEach(item => {
                item.style.display = item.dataset.type === type ? 'block' : 'none';
            });
        });
    });

    // 初始化显示政府案例
    document.querySelectorAll('.case-item').forEach(item => {
        if(item.dataset.type !== '政府案例') {
            item.style.display = 'none';
        }
    });
}

// 表单步骤功能
function initFormSteps() {
    const form = document.getElementById('dataAccessForm');
    if (!form) return; // 如果页面上没有表单，直接返回

    const steps = document.querySelectorAll('.form-step');
    const progressSteps = document.querySelectorAll('.step');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentStep = 0;

    function updateSteps() {
        steps.forEach((step, index) => {
            step.classList.toggle('d-none', index !== currentStep);
        });

        progressSteps.forEach((step, index) => {
            if (index === currentStep) {
                step.classList.add('active');
            } else if (index < currentStep) {
                step.classList.add('completed');
                step.classList.remove('active');
            } else {
                step.classList.remove('active', 'completed');
            }
        });

        prevBtn.disabled = currentStep === 0;
        nextBtn.textContent = currentStep === steps.length - 1 ? '提交' : '下一步';
    }

    function validateCurrentStep() {
        const currentStepElement = steps[currentStep];
        const inputs = currentStepElement.querySelectorAll('input, select');
        let isValid = true;

        inputs.forEach(input => {
            if (input.hasAttribute('required') && !input.value) {
                isValid = false;
                input.classList.add('is-invalid');
            } else {
                input.classList.remove('is-invalid');
            }
        });

        return isValid;
    }

    // 初始化接入方式选择
    initAccessMethodSelect();

    // 按钮事件监听
    prevBtn?.addEventListener('click', () => {
        if (currentStep > 0) {
            currentStep--;
            updateSteps();
        }
    });

    nextBtn?.addEventListener('click', () => {
        if (!validateCurrentStep()) return;

        if (currentStep < steps.length - 1) {
            currentStep++;
            updateSteps();
        } else if (form.checkValidity()) {
            alert('表单提交成功！');
            // 这里添加实际的表单提交逻辑
        }
    });

    updateSteps();
}

// 接入方式选择功能
function initAccessMethodSelect() {
    const accessMethodSelect = document.querySelector('select');
    const accessMethodForms = document.getElementById('accessMethodForms');
    
    if (!accessMethodSelect || !accessMethodForms) return;

    accessMethodSelect.addEventListener('change', function(e) {
        const method = e.target.value;
        accessMethodForms.innerHTML = getAccessMethodHTML(method);
    });
}

function getAccessMethodHTML(method) {
    const templates = {
        file: `
            <div class="mb-3">
                <label class="form-label">选择文件</label>
                <input type="file" class="form-control" required>
                <div class="form-text">支持的格式：CSV, Excel, JSON</div>
            </div>
        `,
        api: `
            <div class="mb-3">
                <label class="form-label">API 地址</label>
                <input type="url" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">认证令牌</label>
                <input type="text" class="form-control" required>
            </div>
            <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
        `,
        database: `
            <div class="mb-3">
                <label class="form-label">数据库类型</label>
                <select class="form-select" required>
                    <option value="mysql">MySQL</option>
                    <option value="postgresql">PostgreSQL</option>
                    <option value="sqlserver">SQL Server</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">连接字符串</label>
                <input type="text" class="form-control" required>
            </div>
            <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
        `
    };
    
    return templates[method] || '';
}

// 测试连接功能
window.testConnection = function() {
    const btn = event.target;
    const originalText = btn.textContent;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 测试中...';

    setTimeout(() => {
        btn.disabled = false;
        btn.textContent = originalText;
        alert('连接测试成功！');
    }, 2000);
};