資料授權 (Data Ownership)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

對話中的使用時機

這個範例示範使用者在對話中管理資料用途的流程：

入口放在對話輸入區附近，不阻擋使用者繼續對話。
使用者按下「管理設定」，查看服務需要的資料處理及可自行決定的用途。
使用者逐項選擇、儲存設定，再關閉面板繼續對話。

您好！請問想查詢哪一項服務？
我想了解育兒津貼的申請方式。
我可以先整理申請資格、文件與辦理管道給你。

位置示意：入口持續顯示在對話輸入區附近，不會自動開啟或阻擋送出。

測試儲存失敗

開啟後，下一次儲存會失敗，畫面中的選擇仍會保留。

HTML

<aside class="data-ownership-entry" aria-labelledby="data-ownership-entry-title">
  <h3 id="data-ownership-entry-title" class="data-ownership-entry__title">資料使用設定</h3>
  <a class="link-block" href="/preferences/data-use">管理設定</a>
</aside>

上方範例沿用互動視窗（Modal）；採用端也可連至專屬設定頁。這是持續管理資料用途的入口，不能取代資料送出前必須取得的知情選擇。
「查看原始碼」只顯示可重用的入口標記；其中 href 必須連至可實際管理設定的頁面。完整權限面板標記見下方基本範例。

基本範例

測試儲存狀態

開啟後，下一次儲存會失敗並保留目前選擇。

HTML

<form
  class="data-ownership"
  data-data-ownership
  action="/preferences/data-use"
  method="post"
  aria-labelledby="data-ownership-title"
>
  <header class="data-ownership__header">
    <p class="data-ownership__eyebrow">資料使用權限</p>
    <h3 id="data-ownership-title" class="data-ownership__title">管理這段對話的資料用途</h3>
    <p class="data-ownership__intro">為了回覆訊息，服務會處理你送出的文字與附件。以下設定不影響你使用對話功能，可分別決定是否將這段對話用於改善服務或訓練模型。</p>
  </header>

  <fieldset class="data-ownership__choices">
    <legend>你可以決定的資料用途</legend>
    <p class="data-ownership__choices-intro">以下選項預設關閉且彼此獨立，你可以分別調整。</p>

    <div class="data-ownership__choice">
      <input
        id="data-ownership-improvement"
        name="use_for_service_improvement"
        type="checkbox"
        value="yes"
        aria-describedby="data-ownership-improvement-description"
        data-data-ownership-option
      >
      <div>
        <label for="data-ownership-improvement">用於改善這項服務</label>
        <p id="data-ownership-improvement-description">允許服務團隊分析這段對話，找出常見問題並改善服務流程與回覆品質。</p>
      </div>
    </div>

    <div class="data-ownership__choice">
      <input
        id="data-ownership-training"
        name="use_for_model_training"
        type="checkbox"
        value="yes"
        aria-describedby="data-ownership-training-description"
        data-data-ownership-option
      >
      <div>
        <label for="data-ownership-training">用於訓練模型</label>
        <p id="data-ownership-training-description">允許將這段對話加入模型訓練資料。</p>
      </div>
    </div>
  </fieldset>

  <p class="data-ownership__status" role="status" aria-live="polite" aria-atomic="true" data-data-ownership-status></p>
  <p class="data-ownership__error" role="alert" data-data-ownership-error hidden></p>

  <footer class="data-ownership__actions">
    <button class="button button-primary" type="submit" data-data-ownership-submit>儲存設定</button>
    <a href="/components/ai/data-ownership/details/">查看完整資料使用說明</a>
  </footer>
</form>

各項資料用途應分別設定；範例預設未勾選，實際服務必須依後端目前儲存的設定輸出 checked。
「測試儲存狀態」只供文件頁模擬失敗，不屬於元件。

使用方式

採用端監聽原生 submit，記錄本次提交的設定，再依後端結果呼叫控制器：

const form = document.querySelector('[data-data-ownership]');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  const submission = form.dataOwnership.captureSubmission();
  form.dataOwnership.setBusy(true);

  try {
    await savePreferences(formData);
    form.dataOwnership.accept(submission);
  } catch (error) {
    form.dataOwnership.fail('設定未儲存，選擇已保留，請稍後再試。');
  }
});

方法	用途
`captureSubmission()`	記錄送出當下的 checkbox 狀態；提交資料仍由 `FormData` 取得
`setBusy(isBusy)`	控制儲存中狀態並阻擋重複送出
`accept(submission, message)`	接受已儲存的設定；若使用者在等待期間再次修改，保留新選擇並提示仍需儲存
`fail(message)`	保留目前選擇、顯示錯誤並允許重試
`clearMessage()`	清除成功或錯誤訊息，不改變設定

無 JavaScript 時，原生表單仍會送至 action。採用端必須提供真實的處理網址，並由伺服器重新輸出目前設定及儲存結果。

CSS

.data-ownership：表單容器；.data-ownership__choices／.data-ownership__choice：用途群組與個別設定。
.data-ownership__status／.data-ownership__error：儲存結果；.data-ownership__actions：操作列。
.data-ownership--modal：與既有互動視窗組合時，讓外層 dialog 成為唯一外框，並在窄版保留可捲動內容與完整操作列。

親和力

服務運作所需的資料處理以一般文字說明；可選用途使用原生 checkbox、fieldset／legend、可見 label 與用途說明。
儲存期間以按鈕文字與 aria-disabled 表達狀態；成功使用 role="status"，錯誤使用 role="alert"，元件不主動移動焦點。
互動視窗以標題建立名稱，介紹保留在內容閱讀順序中；表單不重複建立相同名稱。

JavaScript

元件以 ES module 撰寫，載入必須加 type="module"。跨網域載入時，伺服器必須提供 CORS 標頭。

<script type="module" src="js/components/data-ownership.js"></script>

腳本會自動初始化頁面載入時已有的 [data-data-ownership]。表單必須包含具有 name 的 [data-data-ownership-option]，以及 [data-data-ownership-submit]、[data-data-ownership-status] 與 [data-data-ownership-error]；缺少時不會初始化。
元件不執行網路請求，也不自行儲存、刪除或停止使用資料。
對話情境若採用互動視窗，另載入 modal.js；獨立設定頁不需要這項依賴。

參考

Data ownership - Shape of AI