📦 新北市再生家具匯出小工具安裝與使用教學 v載入中...

這是一個 Chrome / Edge 擴充功能，協助你在 新北市再生家具拍賣網 上更高效地管理資料，提供以下功能：

🔧 安裝步驟（僅需一次）

1. 下載上方的 furniture-helper.zip 並「解壓縮」
2. 打開瀏覽器擴充功能管理頁面（請依你使用的瀏覽器選擇）：
   Chrome 請輸入 chrome://extensions
   Edge 請輸入 edge://extensions
3. 右上角打開「開發人員模式」
4. 點擊「載入未封裝項目」，選擇剛剛解壓縮的資料夾
5. 完成！開啟拍賣網站後，自動出現「年度統計」、「列印表格」、「資料面板」、「設定」等功能按鈕

🚀 使用說明

📢 功能異動通知
官方系統已內建 CSV 匯出功能（輕量版與完整版），本工具的「輕量匯出」和「全部匯出」按鈕已移除。
如需 CSV 匯出，請使用官方內建功能。本工具專注於提供官方尚未支援的進階功能（統計分析、批次操作、JSON 匯入匯出等）。
按鈕樣式更新：所有按鈕已改為純文字樣式，不再使用 emoji 圖標。

📌 注意事項

• 此工具支援 Google Chrome 與 Microsoft Edge 瀏覽器。
• 更新功能時，請回到 chrome://extensions 或 edge://extensions 點「重新載入」。
• 本工具為自用開發，非官方開發，請安心使用。
• 圖片預覽：圖片 URL 可能受伺服器 CORS 限制，若無法顯示，請確認網路連線或聯繫管理員。
• JSON 匯入：匯入的 JSON 必須包含 AutoID 和 Name，格式需與匯出一致（建議使用本工具匯出的 JSON）。
• 表單填充：類別和行政區依據文字匹配，若下拉選單選項與 JSON 的 CategoryName 或 DistName 不符，可能無法填充。

🕒 功能開發順序軸

🧠 開發這個工具時學到的事（給未來想加功能的你）

• Vue 的資料不是全域變數，你要從 .vxe-table 對應的 __vue__ 開始往上找。
• Vue 有 Proxy 包裝，用 console.log(tableFullData[0]) 看到的都是 getter，請用 JSON.parse(JSON.stringify(...)) 才能解包。
• tableFullData 可能還沒掛好，你要等 DOM + Vue 都 ready，可以用 MutationObserver + 延遲或 retry。
• 你看到的欄位不一定是資料的 key，記得比對 vxe-column 的 property。
• 排序、篩選、虛擬滾動 不會影響 tableFullData，別以為畫面上的資料順序＝資料順序。
• Vue 有虛擬 DOM，你不能用 innerText 去抓表格內容，那只會抓到目前畫面上 10 筆。
• 你以為是欄位，其實是巢狀物件，像 row.User.Name 要自己拆。
• 千萬別信第一筆資料的欄位就是全部欄位，請先跑一次 Set() 把所有出現過的 key 統整出來。
• 日期欄位很多是完整時間戳，格式如 2025-04-15T16:15:07.927，要手動砍掉時間段。
• MutationObserver 是你的好朋友，但別監聽整個 document.body，找個具體的容器（像 .vxe-modal--wrapper）效率更高。
• 下拉選單要文字匹配，CategoryName 和 DistName 是中文，別傻傻用 ID 去設 select.value，要遍歷 options 找 textContent。
• 圖片預覽很麻煩，內聯 onclick 的 JSON.stringify 會讓你懷疑人生，直接用 addEventListener 傳物件，乾淨又安全。
• CORS 是你的敵人，圖片 URL 可能無法直接載入，檢查伺服器設定或考慮備用方案（像顯示連結）。
• JSON 匯入要嚴謹，檢查 AutoID 和 Name 存在，否則表單填充會爆，失敗時別忘了跳錯誤提示。
• 競標狀態判斷要精確，用 EndDate 比較當前時間來判斷「競標中」vs「已結束」，不能只看 HasBids。
• 延遲載入是效能關鍵，統計樹狀圖用 setTimeout 延遲展開大量項目，避免一次渲染太多 DOM 造成卡頓。
• UI 排版要獨立，計數器（如「已選 X 項」）最好獨立一行，避免數字變化導致按鈕跳動影響用戶體驗。
• 批次操作要有確認機制，刪除前必須彈出詳細清單讓用戶確認，避免誤刪重要資料。
• 狀態機設計很重要，用 BID_STATUS_SYSTEM 和 ITEM_STATUS_SYSTEM 統一管理狀態，避免到處散落判斷邏輯。

🧪 開發時想看 tableFullData 或其他資料？這些 Console 指令幫你省時

1. 檢查 tableFullData

(() => {
  const el = document.querySelector('.vxe-table');
  let vue = el && el.__vue__;
  let safety = 20;
  while (vue && !vue.tableFullData && safety-- > 0) vue = vue.$parent;

  if (!vue || !vue.tableFullData || !vue.tableFullData.length) {
    console.warn('❌ 找不到 tableFullData 或沒有資料');
    return;
  }

  const raw = JSON.parse(JSON.stringify(vue.tableFullData[0]));
  console.log('✅ 第一筆資料（已解 Proxy）：', raw);
  console.log('🧠 可用欄位列表：', Object.keys(raw));
})();
  

2. 檢查資料面板的 Photos 資料

(() => {
  const panel = document.getElementById('furniture-panel');
  if (!panel) {
    console.warn('❌ 資料面板未開啟');
    return;
  }
  const firstItem = panel.querySelector('div > div > span > strong');
  if (!firstItem) {
    console.warn('❌ 找不到資料項');
    return;
  }
  const index = 0; // 改成你想檢查的項目索引
  const vue = document.querySelector('.vxe-table')?.__vue__;
  let safety = 20;
  while (vue && !vue.tableFullData && safety-- > 0) vue = vue.$parent;
  const photos = vue?.tableFullData?.[index]?.Photos;
  console.log('✅ 第', index + 1, '筆資料的 Photos：', JSON.parse(JSON.stringify(photos || [])));
})();
  

3. 檢查編輯視窗的表單結構

(() => {
  const form = document.querySelector('.vxe-modal--box .el-form');
  if (!form) {
    console.warn('❌ 未找到編輯視窗表單');
    return;
  }
  const labels = Array.from(form.querySelectorAll('.el-form-item__label')).map(label => label.textContent.trim());
  console.log('✅ 表單欄位標籤：', labels);
  const categoryOptions = Array.from(form.querySelector('label[for="CategoryID"]')?.closest('.el-form-item')?.querySelector('select')?.options || []).map(opt => ({ value: opt.value, text: opt.textContent.trim() }));
  console.log('✅ 類別選項：', categoryOptions);
})();
  

「Vue 不會讓你失望，只會讓你懷疑人生。」
從 tableFullData 到 MutationObserver，再到圖片預覽的 CORS 地獄，每個功能都是一場與 Vue 的搏鬥。
列印表格的競標狀態判斷、統計樹狀圖的延遲載入優化、批次操作的安全機制，每一個細節都是從無數次除錯中淬煉出來的。
不要再用套件開發公家網站了，版本一更新過不了弱掃就要被叫去拉正了。
—— 從最初的圖片預覽到現在的 v4.1，每個凌晨都在與程式碼對話