const { useState, useMemo, useEffect } = React;
const { Plus, Users, User, Wallet, ArrowRightLeft, Share2, ChevronLeft, Trash2, Check, CreditCard, Camera } = window;
const initialTrips = [
{
id: 'trip_1',
name: '周末露营',
coverColor: 'from-indigo-400 to-purple-400',
members: [
{ id: 'm1', name: '小李', isGroup: false },
{ id: 'm2', name: '小王', isGroup: false },
{ id: 'm3', name: '情侣组(陈)', isGroup: true }
],
expenses: [
{ id: 'e1', description: '租车费', amount: 600, payerId: 'm2', beneficiaryIds: ['m1', 'm2', 'm3'], date: Date.now() }
]
},
{
id: 'trip_2',
name: '周五火锅局',
coverColor: 'from-orange-400 to-pink-400',
members: [
{ id: 'm4', name: '老张', isGroup: false },
{ id: 'm5', name: '老李', isGroup: false },
{ id: 'm6', name: '老王', isGroup: false }
],
expenses: [
{ id: 'e2', description: '食材采购', amount: 328.5, payerId: 'm4', beneficiaryIds: ['m4', 'm5', 'm6'], date: Date.now() - 86400000 }
]
}
];
function App() {
const [trips, setTrips] = useState(() => window.loadTrips(initialTrips));
const [activeTripId, setActiveTripId] = useState(null);
const [view, setView] = useState('list');
const [warningMessage, setWarningMessage] = useState(null);
const [newTripName, setNewTripName] = useState('');
const [newExpense, setNewExpense] = useState({ amount: '', description: '', payerId: '', beneficiaryIds: [] });
const [editingExpenseId, setEditingExpenseId] = useState(null);
const [newMemberName, setNewMemberName] = useState('');
const [isNewMemberGroup, setIsNewMemberGroup] = useState(false);
const [newMemberCount, setNewMemberCount] = useState(2);
const [memberCountInput, setMemberCountInput] = useState('2');
const activeTrip = useMemo(() => trips.find(t => t.id === activeTripId) || null, [trips, activeTripId]);
const { balances, settlements, totalSpent } = useMemo(() => {
if (!activeTrip) return { balances: {}, settlements: [], totalSpent: 0 };
const result = window.calculateSettlements(activeTrip.members, activeTrip.expenses);
const total = activeTrip.expenses.reduce((acc, curr) => acc + parseFloat(curr.amount), 0);
return { ...result, totalSpent: total };
}, [activeTrip]);
const updateActiveTrip = updates => {
setTrips(prev => prev.map(t => (t.id === activeTripId ? { ...t, ...updates } : t)));
};
const formatMoney = window.formatMoney;
const showWarning = message => {
setWarningMessage(message);
setTimeout(() => setWarningMessage(null), 3000);
};
useEffect(() => { window.saveTrips(trips); }, [trips]);
const renderTripList = () => (
{trips.map(trip => {
const tripTotal = trip.expenses.reduce((acc, curr) => acc + parseFloat(curr.amount), 0);
return (
{ setActiveTripId(trip.id); setView('tripHome'); }} className="group relative w-full h-48 cursor-pointer transition-all hover:scale-[1.02]">
{trip.members.length} 成员
{trip.name}
总支出
{formatMoney(tripTotal)}
);
})}
);
const renderCreateTrip = () => (
);
const renderTripHome = () => { if (!activeTrip) return null; return (
总支出
{formatMoney(totalSpent)}
{activeTrip.members.length} 成员{activeTrip.expenses.length} 笔账目
参与人
{activeTrip.members.map(m => (
{m.name}
{m.isGroup && }
{m.isGroup && ·{m.member_count || 2}人}
))}
支出明细
{activeTrip.expenses.length === 0 ? (
暂无支出，记一笔吧
) : (
{activeTrip.expenses.map(exp => { const payer = activeTrip.members.find(m => m.id === exp.payerId); const weightedTotal = exp.beneficiaryIds.reduce((s,id)=>{ const mem = activeTrip.members.find(m=>m.id===id); const cnt = mem && typeof mem.member_count==='number' ? mem.member_count : ((mem && mem.isGroup)?2:1); return s+cnt; },0); const perPerson = (Math.round((parseFloat(exp.amount)/(weightedTotal||1))*100)/100); return (
{ setNewExpense({ amount: String(exp.amount), description: exp.description, payerId: exp.payerId, beneficiaryIds: exp.beneficiaryIds }); setEditingExpenseId(exp.id); setView('addExpense'); }}>
{(payer && payer.name ? payer.name[0] : '')}
{exp.description}
{(payer && payer.name) || ''} 付款·{weightedTotal}人平摊
-{formatMoney(exp.amount)}
); })}
)}
); };
const renderAddMember = () => (
管理参与人
setNewMemberName(e.target.value)} />
是否为小组/情侣?
{isNewMemberGroup && (
)}
当前成员
{activeTrip.members.map(m => (
{m.isGroup ? : m.name[0]}
{m.name}{m.isGroup &&
小组}
))}
);
const renderAddExpense = () => { const toggleBeneficiary = id => { const current = newExpense.beneficiaryIds; if (current.includes(id)) { setNewExpense({ ...newExpense, beneficiaryIds: current.filter(x => x !== id) }); } else { setNewExpense({ ...newExpense, beneficiaryIds: [...current, id] }); } }; return (
{editingExpenseId ? '编辑支出' : '记一笔'}
setNewExpense({ ...newExpense, description: e.target.value })} />
付款人
{activeTrip.members.map(m => ())}
受益人 (分摊)
{activeTrip.members.map(m => { const selected = newExpense.beneficiaryIds.includes(m.id); return (
); })}
); };
const [confirmOpen, setConfirmOpen] = useState(false);
const [shareModalOpen, setShareModalOpen] = useState(false);
const [shareUrl, setShareUrl] = useState('');
const [generatedTime, setGeneratedTime] = useState('');
// 生成分享链接
const generateShareData = () => {
const time = new Date().toLocaleString('zh-CN', {
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit'
});
setGeneratedTime(time);
const shareData = {
tripName: activeTrip.name,
members: activeTrip.members,
expenses: activeTrip.expenses,
createdAt: time
};
const encoded = btoa(encodeURIComponent(JSON.stringify(shareData)));
const url = `${window.location.origin}/share.html?data=${encoded}`;
setShareUrl(url);
return url;
};
// 保存到相册（截图）
const handleSaveImage = async () => {
const time = new Date().toLocaleString('zh-CN', {
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit'
});
setGeneratedTime(time);
// 显示时间元素
const timeEl = document.getElementById('settlement-time');
if (timeEl) timeEl.style.display = 'block';
// 等待渲染
await new Promise(r => setTimeout(r, 100));
const element = document.getElementById('settlement-screenshot');
if (!element) return;
try {
// 使用 canvas 截图
const canvas = await html2canvas(element, {
backgroundColor: '#ffffff',
scale: 2,
useCORS: true,
allowTaint: true
});
// 下载图片
const link = document.createElement('a');
link.download = `${activeTrip.name}_结算方案_${time.replace(/[\/:\s]/g, '-')}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
showWarning('图片已保存');
} catch (err) {
console.error('截图失败:', err);
showWarning('保存失败，请重试');
} finally {
if (timeEl) setTimeout(() => timeEl.style.display = 'none', 500);
}
};
// 分享给朋友
const handleShare = () => {
const url = generateShareData();
setShareModalOpen(true);
};
// 复制链接
const copyShareLink = () => {
navigator.clipboard.writeText(shareUrl).then(() => {
showWarning('链接已复制');
}).catch(() => {
// 降级方案
const input = document.createElement('input');
input.value = shareUrl;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
showWarning('链接已复制');
});
};
const renderSettlement = () => { const confirmContent = (
结算确认
分账方式：按加权人数均分（单人=1，小组=member_count）。单人应付 = 总金额 / 加权人数。
);
const shareModalContent = (
分享给朋友
复制下方链接发送给朋友，他们可以通过链接查看此结算方案。
{shareUrl}
);
return (
结算方案
Trip Balance
{activeTrip.name} 账单
总支出 {formatMoney(totalSpent)}
付款规则，单人应付=总金额/收益人数
生成时间: {generatedTime}
{settlements.length === 0 ? (
🎉 账目已清，无需转账！
) : (settlements.map((s, idx) => { const fromUser = activeTrip.members.find(m => m.id === s.from); const toUser = activeTrip.members.find(m => m.id === s.to); return (
{(fromUser && fromUser.name) || ''}付款方
------------>
{(toUser && toUser.name) || ''}收款方
{formatMoney(s.amount)}
); }))}
{activeTrip.members.map(m => { const bal = balances[m.id]; const isPos = bal > 0; if (Math.abs(bal) < 0.01) return null; return (
{m.name}{isPos ? '+' : ''}{formatMoney(bal)}
); })}
Generated by LumiSplit
{confirmOpen && confirmContent}
{shareModalOpen && shareModalContent}
); };
return (
{warningMessage && (
{warningMessage}
)}
{view === 'list' && renderTripList()}
{view === 'createTrip' && renderCreateTrip()}
{view !== 'list' && view !== 'createTrip' && (
<>
{view === 'tripHome' && renderTripHome()}
{view === 'addMember' && renderAddMember()}
{view === 'addExpense' && renderAddExpense()}
{view === 'settlement' && renderSettlement()}
)}