wangwenju
/
xiangqinxiangmu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>八字API配置助手</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 10px;
        }
        
        .header p {
            color: #666;
            font-size: 1.1rem;
        }
        
        .api-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .api-card {
            background: #fff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border: 2px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .api-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }
        
        .api-card.selected {
            border-color: #667eea;
            background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
        }
        
        .api-card .title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .api-card .icon {
            font-size: 2rem;
            margin-right: 12px;
        }
        
        .api-card .name {
            font-size: 1.3rem;
            font-weight: bold;
            color: #333;
        }
        
        .api-card .badge {
            margin-left: auto;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            color: #fff;
        }
        
        .badge.recommended { background: #4CAF50; }
        .badge.enterprise { background: #FF9800; }
        .badge.free { background: #2196F3; }
        
        .api-info {
            margin-bottom: 15px;
        }
        
        .price {
            font-size: 1.5rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 8px;
        }
        
        .description {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .features {
            list-style: none;
        }
        
        .features li {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            color: #555;
        }
        
        .features li::before {
            content: "✅";
            margin-right: 8px;
        }
        
        .pros-cons {
            margin-top: 15px;
            font-size: 0.9rem;
        }
        
        .pros {
            color: #4CAF50;
            margin-bottom: 5px;
        }
        
        .cons {
            color: #FF5722;
        }
        
        .config-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            margin-top: 30px;
        }
        
        .config-section h2 {
            color: #333;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .generated-config {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-top: 20px;
            overflow-x: auto;
        }
        
        .buttons {
            text-align: center;
            margin-top: 30px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            margin: 0 10px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: #fff;
        }
        
        .tips {
            background: #e8f4f8;
            border-left: 4px solid #2196F3;
            padding: 20px;
            margin-top: 30px;
            border-radius: 8px;
        }
        
        .tips h3 {
            color: #2196F3;
            margin-bottom: 15px;
        }
        
        .tips ul {
            padding-left: 20px;
        }
        
        .tips li {
            margin-bottom: 8px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔮 八字API配置助手</h1>
            <p>选择最适合您项目的专业八字API接口</p>
        </div>
        
        <div class="api-grid">
            <!-- 极速数据 -->
            <div class="api-card" data-api="JISU_API">
                <div class="title">
                    <span class="icon">🥇</span>
                    <span class="name">极速数据</span>
                    <span class="badge recommended">推荐</span>
                </div>
                <div class="api-info">
                    <div class="price">0.01元/次</div>
                    <div class="description">性价比之王，新用户100次免费</div>
                    <ul class="features">
                        <li>精确四柱计算</li>
                        <li>完整纳音五行</li>
                        <li>节气准确对应</li>
                        <li>响应速度快</li>
                    </ul>
                    <div class="pros-cons">
                        <div class="pros">✅ 价格便宜，功能齐全</div>
                        <div class="cons">❌ 高级分析功能较少</div>
                    </div>
                </div>
            </div>
            
            <!-- 聚合数据 -->
            <div class="api-card" data-api="JUHE_API">
                <div class="title">
                    <span class="icon">🏢</span>
                    <span class="name">聚合数据</span>
                    <span class="badge">全面</span>
                </div>
                <div class="api-info">
                    <div class="price">0.02元/次</div>
                    <div class="description">功能全面，分析详细</div>
                    <ul class="features">
                        <li>详细性格分析</li>
                        <li>运势预测</li>
                        <li>婚配建议</li>
                        <li>事业指导</li>
                    </ul>
                    <div class="pros-cons">
                        <div class="pros">✅ 分析内容丰富</div>
                        <div class="cons">❌ 价格略高</div>
                    </div>
                </div>
            </div>
            
            <!-- 阿里云市场 -->
            <div class="api-card" data-api="ALIYUN_API">
                <div class="title">
                    <span class="icon">🌟</span>
                    <span class="name">阿里云市场</span>
                    <span class="badge enterprise">企业级</span>
                </div>
                <div class="api-info">
                    <div class="price">0.015元/次</div>
                    <div class="description">企业级稳定，技术支持好</div>
                    <ul class="features">
                        <li>99.9%可用性</li>
                        <li>7x24技术支持</li>
                        <li>SLA保障</li>
                        <li>批量调用优化</li>
                    </ul>
                    <div class="pros-cons">
                        <div class="pros">✅ 稳定可靠，支持好</div>
                        <div class="cons">❌ 需要实名认证</div>
                    </div>
                </div>
            </div>
            
            <!-- 开源方案 -->
            <div class="api-card" data-api="OPEN_SOURCE">
                <div class="title">
                    <span class="icon">🆓</span>
                    <span class="name">开源方案</span>
                    <span class="badge free">免费</span>
                </div>
                <div class="api-info">
                    <div class="price">0元</div>
                    <div class="description">完全免费，功能基础</div>
                    <ul class="features">
                        <li>永久免费</li>
                        <li>无调用限制</li>
                        <li>代码可控</li>
                        <li>离线使用</li>
                    </ul>
                    <div class="pros-cons">
                        <div class="pros">✅ 零成本，可定制</div>
                        <div class="cons">❌ 准确度相对较低</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="config-section">
            <h2>📝 配置生成器</h2>
            
            <div class="form-group">
                <label for="selected-api">选择的API:</label>
                <select id="selected-api">
                    <option value="">请先选择上面的API卡片</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="api-key">API Key:</label>
                <input type="text" id="api-key" placeholder="请输入您的API Key">
            </div>
            
            <div class="form-group">
                <label for="strategy">选择策略:</label>
                <select id="strategy">
                    <option value="cost_first">成本优先</option>
                    <option value="accuracy_first">准确度优先</option>
                    <option value="speed_first">速度优先</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="daily-budget">每日预算 (元):</label>
                <input type="number" id="daily-budget" value="10" min="0" step="0.1">
            </div>
            
            <div class="generated-config" id="generated-config">
                <div style="color: #a0aec0;">// 请先选择API并填写配置信息</div>
            </div>
            
            <div class="buttons">
                <button class="btn btn-primary" onclick="generateConfig()">生成配置</button>
                <button class="btn btn-secondary" onclick="copyConfig()">复制配置</button>
            </div>
        </div>
        
        <div class="tips">
            <h3>💡 配置提示</h3>
            <ul>
                <li><strong>个人开发者</strong>：推荐选择极速数据，性价比最高</li>
                <li><strong>小型企业</strong>：推荐聚合数据或阿里云市场</li>
                <li><strong>大型企业</strong>：推荐阿里云市场，企业级支持</li>
                <li><strong>预算有限</strong>：可以选择开源方案作为起步</li>
                <li><strong>配置完成后</strong>：记得在小程序后台添加API域名到白名单</li>
            </ul>
        </div>
    </div>
    
    <script>
        const apiConfigs = {
            JISU_API: {
                name: '极速数据',
                baseUrl: 'https://api.jisuapi.com',
                endpoint: '/bazi/query',
                keyParam: 'appkey',
                domains: ['api.jisuapi.com']
            },
            JUHE_API: {
                name: '聚合数据',
                baseUrl: 'https://apis.juhe.cn',
                endpoint: '/bazi/query',
                keyParam: 'key',
                domains: ['apis.juhe.cn']
            },
            ALIYUN_API: {
                name: '阿里云市场',
                baseUrl: 'https://xxxxxxx.market.alicloudapi.com',
                endpoint: '/bazi',
                keyParam: 'Authorization',
                domains: ['*.market.alicloudapi.com']
            },
            OPEN_SOURCE: {
                name: '开源方案',
                baseUrl: 'local',
                endpoint: 'lunar-javascript',
                keyParam: 'none',
                domains: []
            }
        }
        
        let selectedAPI = null;
        
        // API卡片点击事件
        document.querySelectorAll('.api-card').forEach(card => {
            card.addEventListener('click', () => {
                // 移除其他选中状态
                document.querySelectorAll('.api-card').forEach(c => c.classList.remove('selected'));
                // 添加选中状态
                card.classList.add('selected');
                
                selectedAPI = card.dataset.api;
                const select = document.getElementById('selected-api');
                select.innerHTML = `<option value="${selectedAPI}">${apiConfigs[selectedAPI].name}</option>`;
                select.value = selectedAPI;
                
                generateConfig();
            });
        });
        
        // 生成配置代码
        function generateConfig() {
            if (!selectedAPI) {
                document.getElementById('generated-config').innerHTML = 
                    '<div style="color: #a0aec0;">// 请先选择API</div>';
                return;
            }
            
            const apiKey = document.getElementById('api-key').value || 'YOUR_API_KEY';
            const strategy = document.getElementById('strategy').value;
            const budget = document.getElementById('daily-budget').value;
            
            const config = apiConfigs[selectedAPI];
            
            let configCode = '';
            
            if (selectedAPI === 'OPEN_SOURCE') {
                configCode = `// 开源方案配置 - lunar-javascript
// 1. 安装依赖
// npm install lunar-javascript

// 2. 在页面中使用
import { Solar } from 'lunar-javascript';

// 八字计算示例
function calculateBaziOpenSource(year, month, day, hour) {
    const solar = Solar.fromYmdHms(year, month, day, hour, 0, 0);
    const lunar = solar.getLunar();
    const baZi = lunar.getEightChar();
    
    return {
        year: baZi.getYear(),
        month: baZi.getMonth(), 
        day: baZi.getDay(),
        hour: baZi.getTime(),
        yearGanZhi: baZi.getYearInGanZhi(),
        monthGanZhi: baZi.getMonthInGanZhi(),
        dayGanZhi: baZi.getDayInGanZhi(),
        hourGanZhi: baZi.getTimeInGanZhi()
    };
}`;
            } else {
                configCode = `// 配置文件：config/api-config.js
export const BAZI_API_CONFIG = {
    ${selectedAPI}: {
        BASE_URL: '${config.baseUrl}',
        API_KEY: '${apiKey}', // 请替换为您的真实API Key
        ENDPOINTS: {
            bazi: '${config.endpoint}'
        },
        PRIORITY: 1,
        COST_PER_CALL: ${selectedAPI === 'JISU_API' ? '0.01' : selectedAPI === 'JUHE_API' ? '0.02' : '0.015'},
        DESCRIPTION: '${config.name}'
    },
    
    SETTINGS: {
        ENABLE_VALIDATION: true,
        AUTO_FAILOVER: true,
        DAILY_BUDGET: ${budget},
        STRATEGY: '${strategy}',
        ENABLED_APIS: ['${selectedAPI}'],
        TIMEOUT: 10000,
        RETRY_COUNT: 2
    }
}

// 小程序域名白名单配置
// 需要在微信小程序后台添加以下域名：
${config.domains.map(domain => `// ${domain}`).join('\n')}`;
            }
            
            document.getElementById('generated-config').innerHTML = configCode;
        }
        
        // 复制配置代码
        function copyConfig() {
            const configText = document.getElementById('generated-config').textContent;
            navigator.clipboard.writeText(configText).then(() => {
                alert('配置代码已复制到剪贴板！');
            }).catch(() => {
                // 降级方案
                const textArea = document.createElement('textarea');
                textArea.value = configText;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                alert('配置代码已复制到剪贴板！');
            });
        }
        
        // 监听输入变化
        document.getElementById('api-key').addEventListener('input', generateConfig);
        document.getElementById('strategy').addEventListener('change', generateConfig);
        document.getElementById('daily-budget').addEventListener('input', generateConfig);
    </script>
</body>
</html>