File size: 9,901 Bytes
7fcea49 339fff1 7fcea49 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
import React, { useState } from 'react';
import { HelpCircle, ChevronDown, ChevronUp, ExternalLink, Key, BookOpen, AlertTriangle, CheckCircle2 } from 'lucide-react';
interface HelpGuideProps {
defaultOpen?: boolean;
}
const HelpGuide: React.FC<HelpGuideProps> = ({ defaultOpen = false }) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
const [activeTab, setActiveTab] = useState<'usage' | 'api'>('usage');
return (
<div className="w-full max-w-md bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
{/* Header - Always visible */}
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full px-6 py-4 flex items-center justify-between bg-gradient-to-r from-indigo-50 to-purple-50 hover:from-indigo-100 hover:to-purple-100 transition-colors"
>
<div className="flex items-center gap-3">
<div className="bg-indigo-600 text-white p-2 rounded-lg">
<HelpCircle className="w-5 h-5" />
</div>
<div className="text-left">
<h3 className="font-bold text-gray-800">使用帮助</h3>
<p className="text-xs text-gray-500">点击展开查看详细教程</p>
</div>
</div>
{isOpen ? (
<ChevronUp className="w-5 h-5 text-gray-400" />
) : (
<ChevronDown className="w-5 h-5 text-gray-400" />
)}
</button>
{/* Expandable Content */}
{isOpen && (
<div className="animate-fade-in">
{/* Tab Buttons */}
<div className="flex border-b border-gray-100">
<button
onClick={() => setActiveTab('usage')}
className={`flex-1 px-4 py-3 text-sm font-bold flex items-center justify-center gap-2 transition-colors ${
activeTab === 'usage'
? 'text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50/50'
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
}`}
>
<BookOpen className="w-4 h-4" />
使用教程
</button>
<button
onClick={() => setActiveTab('api')}
className={`flex-1 px-4 py-3 text-sm font-bold flex items-center justify-center gap-2 transition-colors ${
activeTab === 'api'
? 'text-emerald-600 border-b-2 border-emerald-600 bg-emerald-50/50'
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
}`}
>
<Key className="w-4 h-4" />
API设置
</button>
</div>
{/* Content */}
<div className="p-5 max-h-96 overflow-y-auto">
{activeTab === 'usage' ? (
<div className="space-y-4 text-sm">
<h4 className="font-bold text-gray-800 flex items-center gap-2">
<span className="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold">1</span>
获取八字信息
</h4>
<p className="text-gray-600 pl-8">
打开
<a
href="https://pcbz.iwzwh.com/#/paipan/index"
target="_blank"
rel="noopener noreferrer"
className="text-indigo-600 hover:underline mx-1 inline-flex items-center gap-1"
>
问真八字排盘 <ExternalLink className="w-3 h-3" />
</a>
输入出生信息，点击【开始排盘】
</p>
<h4 className="font-bold text-gray-800 flex items-center gap-2">
<span className="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold">2</span>
记录关键信息
</h4>
<div className="text-gray-600 pl-8 space-y-1">
<p>选择【专业细盘】，记录以下内容：</p>
<ul className="list-disc list-inside space-y-1 text-gray-500">
<li>四柱：年柱、月柱、日柱、时柱</li>
<li>起运年龄：看"小运"右边第一个运上面的年龄（虚岁）</li>
<li>第一步大运：第一个大运的干支</li>
</ul>
</div>
<h4 className="font-bold text-gray-800 flex items-center gap-2">
<span className="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold">3</span>
填写表单
</h4>
<p className="text-gray-600 pl-8">
将信息填入本站表单，或使用【智能输入】模式自动计算。
</p>
<h4 className="font-bold text-gray-800 flex items-center gap-2">
<span className="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold">4</span>
生成报告
</h4>
<p className="text-gray-600 pl-8">
点击【生成比迹报告】，等待3-5分钟即可获得完整报告。
</p>
{/* Quick Link */}
<a
href="https://jcnjmxofi1yl.feishu.cn/wiki/OPa4woxiBiFP9okQ9yWcbcXpnEw"
target="_blank"
rel="noopener noreferrer"
className="mt-4 flex items-center justify-center gap-2 bg-indigo-50 text-indigo-600 px-4 py-2.5 rounded-lg hover:bg-indigo-100 transition-colors font-medium"
>
<ExternalLink className="w-4 h-4" />
查看图文详细教程
</a>
</div>
) : (
<div className="space-y-4 text-sm">
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3 flex gap-2">
<AlertTriangle className="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" />
<p className="text-amber-800 text-xs">
<strong>推荐使用免费模式</strong>：填写邮箱密码即可，系统自动注册登录。如需自定义API请参考以下教程。
</p>
</div>
<h4 className="font-bold text-gray-800 flex items-center gap-2">
<span className="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center text-xs font-bold">1</span>
购买API
</h4>
<p className="text-gray-600 pl-8">
去闲鱼搜索 <strong>"gemini API"</strong>，大概5块钱能用60次。
</p>
<h4 className="font-bold text-gray-800 flex items-center gap-2">
<span className="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center text-xs font-bold">2</span>
获取配置信息
</h4>
<div className="text-gray-600 pl-8 space-y-1">
<p>卖家会提供：</p>
<ul className="list-disc list-inside space-y-1 text-gray-500">
<li><strong>URL地址</strong>：如 https://xxx.com/v1</li>
<li><strong>API Key</strong>：sk-xxxxxxxx...</li>
<li><strong>推荐模型</strong>：gemini-3-pro-preview</li>
</ul>
</div>
<h4 className="font-bold text-gray-800 flex items-center gap-2">
<span className="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center text-xs font-bold">3</span>
填写API配置
</h4>
<p className="text-gray-600 pl-8">
在表单底部选择【自定义API】，填入URL、Key和模型名称。
</p>
<h4 className="font-bold text-gray-800 flex items-center gap-2 text-emerald-700">
<CheckCircle2 className="w-5 h-5" />
推荐模型
</h4>
<div className="pl-8 space-y-1">
<code className="block bg-gray-100 px-2 py-1 rounded text-xs">gemini-3-pro-preview</code>
<code className="block bg-gray-100 px-2 py-1 rounded text-xs">gemini-2.5-pro</code>
<code className="block bg-gray-100 px-2 py-1 rounded text-xs">grok-4</code>
</div>
{/* Common Errors */}
<div className="mt-4 p-3 bg-red-50 border border-red-100 rounded-lg">
<h5 className="font-bold text-red-700 text-xs mb-2">常见错误</h5>
<ul className="text-xs text-red-600 space-y-1">
<li><strong>Failed to fetch</strong>: 网络或VPN问题，尝试关闭VPN</li>
<li><strong>Invalid JSON</strong>: 换个模型试试</li>
<li><strong>超时</strong>: API拥堵，换个时间或模型</li>
</ul>
</div>
{/* Quick Link */}
<a
href="https://jcnjmxofi1yl.feishu.cn/wiki/JX0iwzoeqie3GEkJ8XQcMesan3c"
target="_blank"
rel="noopener noreferrer"
className="mt-4 flex items-center justify-center gap-2 bg-emerald-50 text-emerald-600 px-4 py-2.5 rounded-lg hover:bg-emerald-100 transition-colors font-medium"
>
<ExternalLink className="w-4 h-4" />
查看API详细教程
</a>
</div>
)}
</div>
</div>
)}
</div>
);
};
export default HelpGuide;
|