摘要
完成任務排程後,立刻在頁面上生成一句溫暖總結:「你選擇在【下午】安排了《任務》…」,並提供兩個行動按鈕:分享挑戰給好友與查看我的假日紀錄。學會把「先前表單選擇 + 拖曳結果」組合成動態文案,並綁定新按鈕事件(分享/跳轉歷史)。
假設已具備:
<p id="scheduleFeedback">
下方加入以下內容:<!-- [Day18-NEW] 溫暖總結與分享引導 -->
<p id="arrangementSummary" aria-live="polite" style="margin-top:.25rem;"></p>
<div id="postArrangeActions" style="display:flex; gap:.5rem; margin-top:.5rem;">
<button id="btnShare" type="button">分享挑戰給好友</button>
<button id="btnViewMyHistory" type="button" aria-controls="historySection">查看我的假日紀錄</button>
</div>
// [Day18-NEW] 依 recordId 取得任務文字
function getTaskTitleById(id) {
if (!id) return '';
const list = readRecords();
const rec = list.find(r => r.id === id);
return rec ? rec.task : '';
}
// [Day18-NEW] 溫暖總結渲染:你選擇在【下午】安排了《任務》…
function renderArrangementSummary() {
const summaryEl = document.getElementById('arrangementSummary');
if (!summaryEl || !currentTaskId) return;
const map = readScheduleMap();
const period = map[currentTaskId]; // 'morning' | 'afternoon' | 'evening' | undefined
const task = getTaskTitleById(currentTaskId); // 任務名稱
if (!period || !task) {
summaryEl.textContent = ''; // 尚未安排或尚無任務
return;
}
summaryEl.textContent = `你選擇在【${PERIOD_LABEL[period] || period}】安排了《${task}》— 給自己一個小小起點吧!`;
}
(A) 調整 placeTaskTo():在最後一行後面補呼叫
// ★ 原來最後一行:scheduleFeedback.textContent = `已安排到:${PERIOD_LABEL[period] || period}`;
renderArrangementSummary(); // [Day18-NEW] 安排成功後立刻更新總結
(B) 調整 showPage('taskSchedule') 分支:在 renderTaskCard() 後面補一行
renderTaskCard();
renderArrangementSummary(); // [Day18-NEW] 進入安排頁就更新(支援重整後顯示)
// [Day18-NEW] 分享與查看歷史
const btnShare = document.getElementById('btnShare');
const btnViewMyHistory = document.getElementById('btnViewMyHistory');
btnShare?.addEventListener('click', async () => {
const map = readScheduleMap();
const period = map[currentTaskId];
const task = getTaskTitleById(currentTaskId);
if (!period || !task) {
alert('先把任務排到一個時段吧!');
return;
}
const text = `我把《${task}》安排在今天的【${PERIOD_LABEL[period]}】要完成,你也一起來挑戰吧!`;
const shareData = {
title: '我的小挑戰',
text,
url: location.href // 或你的作品頁 URL
};
try {
if (navigator.share) {
await navigator.share(shareData);
} else if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(`${text}\n${location.href}`);
alert('已複製分享內容到剪貼簿,去貼給好友吧!');
} else {
prompt('複製這段內容分享給好友:', `${text}\n${location.href}`);
}
} catch (err) {
console.warn('分享動作被取消或失敗:', err);
}
});
btnViewMyHistory?.addEventListener('click', () => {
showPage('history');
});
完成排程後顯示總結:把卡片拖到「🧠 下午」,下方出現「你選擇在【下午】安排了《任務》— 給自己一個小小起點吧!」。
重整後仍存在:重新整理 → 進入安排頁 → 仍能看到同一句總結(因 SCHEDULE_KEY 與最新紀錄存在)。
分享:按「分享挑戰給好友」:
桌面瀏覽器若支援 navigator.share → 開啟系統分享面板。
不支援時 → 自動複製文案(或彈出可複製視窗)。
查看歷史:按「查看我的假日紀錄」→ 成功跳到歷史頁。
怎麼用手機測試分享功能?:
註冊 ngrok:https://ngrok.com/
登入後選擇 Set up & Installation,可選 HomeBrew 安裝(若有 HomeBrew)或 Download
安裝後複製官網的第二個指令到終端機連接 token
在終端機運行第三個官網指令,成功會出現以下畫面:
在手機上開啟紅色底線的 ngrok 公開網址,測試分享功能