订阅付费中心

选择最适合你的方案，解锁 AI 无限可能

{(['month', 'quarter', 'year'] as const).map((cycle) => ( ))}

{subscribeMsg &&

{subscribeMsg}

}

{plans.map((plan: any, idx: number) => { const isCurrent = currentPlanLevel === plan.level; const price = getPrice(plan, billingCycle); const isPopular = idx === 1; return (

{isPopular && (

最受欢迎

)} {isCurrent &&

当前方案

}

{plan.name}

${price === 0 ? '0' : formatYuan(price)} {getCycleLabel(billingCycle)}

日赠 {formatYuan(plan.daily_free_tokens)} Tokens

{(plan.features || []).map((feat: string, i: number) => (

{feat}

))}

); })}

{/* 增值服务 - 四大类 */}

增值服务

{services.map((svc) => { const config = SERVICE_TYPE_CONFIG[svc.type] || SERVICE_TYPE_CONFIG.app_custom; const actionInfo = getServiceAction(svc); return (

{config.icon}

{config.label}

{svc.name}

{svc.description}

{(svc.features && svc.features.length > 0) && (

{svc.features.map((feat: string, i: number) => ( {feat} ))}

)}

{svc.price > 0 ? ( {formatYuan(svc.price)} 元起 ) : ( 免费咨询 )}

); })} {services.length === 0 &&

暂无增值服务

}

{/* 优惠券 */}

优惠券

{coupons.map((cp) => { const isPercent = cp.type === 'percent'; return (

{isPercent ? `${cp.value}%` : `$${cp.value}`} {isPercent ? '折扣券' : '立减券'}

{cp.code}

满 {formatYuan(cp.min_amount || 0)} 元可用

有效期至 {cp.expire_at || '--'}

{cp.status === 'active' ? '可使用' : cp.status}

); })} {coupons.length === 0 &&

暂无可用优惠券

}

{/* 支付方式 */}

支付方式

微信支付

支付宝

{/* ===== Modal - 应用定制服务 ===== */} {showModal && showModal.startsWith('app_custom_') && (

setShowModal(null)}>

e.stopPropagation()}>

应用定制服务

请选择您需要的定制类型

{[ { type: 'skill', label: 'Skills', desc: '自定义技能开发，扩展AI能力边界' }, { type: 'agent', label: 'Agent', desc: '智能体定制，构建专属AI助手' }, { type: 'mcp', label: 'MCP', desc: 'MCP协议开发，连接外部数据源' }, ].map((item) => (

setAppCustomType(item.type)} >

{item.label}

{item.desc}

))}

)} {/* ===== Modal - 平台代理申请 ===== */} {showModal && showModal.startsWith('platform_proxy_') && (

setShowModal(null)}>

e.stopPropagation()}>

平台代理申请

填写以下信息，提交代理申请

公司名称 * setPlatformForm({ ...platformForm, companyName: e.target.value })} />

联系人 setPlatformForm({ ...platformForm, contactName: e.target.value })} />

用途说明

setPlatformForm({ ...platformForm, usage: e.target.value })}
                />
              </div>
            </div>
            <div className="pricing-modal-actions">
              <button className="pricing-modal-btn-cancel" onClick={() => setShowModal(null)}>取消</button>
              <button
                className="pricing-modal-btn-confirm"
                disabled={submitLoading}
                onClick={() => handlePlatformProxySubmit(showModal.replace('platform_proxy_', ''))}
              >{submitLoading ? '提交中...' : '提交申请'}</button>
            </div>
          </div>
        </div>
      )}

{/* ===== Modal - 数据定制服务 ===== */}
      {showModal && showModal.startsWith('data_custom_') && (
        <div className="pricing-modal-overlay" onClick={() => setShowModal(null)}>
          <div className="pricing-modal" onClick={e => e.stopPropagation()}>
            <h3 className="pricing-modal-title">数据定制服务</h3>
            <p className="pricing-modal-subtitle">请描述您的数据定制需求</p>
            <div className="pricing-modal-form">
              <div className="pricing-modal-form-group">
                <label>需求标题 <span className="required">*</span></label>
                <input
                  type="text"
                  placeholder="请输入需求标题"
                  value={dataRequestForm.title}
                  onChange={e => setDataRequestForm({ ...dataRequestForm, title: e.target.value })}
                />
              </div>
              <div className="pricing-modal-form-group">
                <label>需求描述</label>
                <textarea
                  placeholder="请描述您的数据定制需求详情"
                  rows={3}
                  value={dataRequestForm.description}
                  onChange={e => setDataRequestForm({ ...dataRequestForm, description: e.target.value })}
                />
              </div>
              <div className="pricing-modal-form-group">
                <label>具体要求</label>
                <textarea
                  placeholder="请说明数据格式、数量、交付时间等具体要求"
                  rows={2}
                  value={dataRequestForm.requirements}
                  onChange={e => setDataRequestForm({ ...dataRequestForm, requirements: e.target.value })}
                />
              </div>
            </div>
            <div className="pricing-modal-actions">
              <button className="pricing-modal-btn-cancel" onClick={() => setShowModal(null)}>取消</button>
              <button
                className="pricing-modal-btn-confirm"
                disabled={submitLoading}
                onClick={() => handleDataCustomSubmit(showModal.replace('data_custom_', ''))}
              >{submitLoading ? '提交中...' : '提交需求'}</button>
            </div>
          </div>
        </div>
      )}

{/* ===== Modal - 私有化项目服务 ===== */}
      {showModal && showModal.startsWith('private_project_') && (
        <div className="pricing-modal-overlay" onClick={() => setShowModal(null)}>
          <div className="pricing-modal" onClick={e => e.stopPropagation()}>
            <h3 className="pricing-modal-title">私有化项目服务</h3>
            <p className="pricing-modal-subtitle">请描述您的私有化部署需求，我们将为您提供专业方案</p>
            <div className="pricing-modal-form">
              <div className="pricing-modal-form-group">
                <label>项目标题 <span className="required">*</span></label>
                <input
                  type="text"
                  placeholder="请输入项目标题"
                  value={privateProjectForm.title}
                  onChange={e => setPrivateProjectForm({ ...privateProjectForm, title: e.target.value })}
                />
              </div>
              <div className="pricing-modal-form-group">
                <label>项目描述</label>
                <textarea
                  placeholder="请描述您的私有化部署需求"
                  rows={3}
                  value={privateProjectForm.description}
                  onChange={e => setPrivateProjectForm({ ...privateProjectForm, description: e.target.value })}
                />
              </div>
              <div className="pricing-modal-form-group">
                <label>具体要求</label>
                <textarea
                  placeholder="请说明部署规模、安全要求、时间计划等"
                  rows={2}
                  value={privateProjectForm.requirements}
                  onChange={e => setPrivateProjectForm({ ...privateProjectForm, requirements: e.target.value })}
                />
              </div>
            </div>
            <div className="pricing-modal-actions">
              <button className="pricing-modal-btn-cancel" onClick={() => setShowModal(null)}>取消</button>
              <button
                className="pricing-modal-btn-confirm"
                disabled={submitLoading}
                onClick={() => handlePrivateProjectSubmit(showModal.replace('private_project_', ''))}
              >{submitLoading ? '提交中...' : '提交咨询'}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default PricingPage;