跳至主要内容

AI 自訂欄位

您是否希望在表單中加入標準欄位無法實現的特殊樣式、互動效果或獨特功能？niio 的「自訂欄位」功能讓您夢想成真！最棒的是，您可以透過與 AI 對話，讓 AI 為您自動生成程式碼，輕鬆創建功能強大且外觀獨特的欄位，即使您不是程式設計專家也能辦到。

當然，如果您熟悉前端開發（特別是 React 和 Tailwind CSS 框架），您也可以選擇手動編寫程式碼，或在 AI 生成的基礎上進行修改，實現更精細的控制。

開始創建您的自訂欄位

  1. 點擊「新增自訂欄位」按鈕。
  2. 選擇資料儲存方式： 這一步很重要，決定了您的自訂欄位如何處理資料。
  • 儲存欄位值： 如果您希望這個欄位本身能儲存使用者輸入或產生的資料（例如：顏色選擇器儲存選定的色碼、評分欄位儲存分數），請選擇此項。
  • 僅引用其他欄位值： 如果這個欄位只是用來展示或處理來自表單中其他欄位的資料，而本身不需要儲存獨立的值（例如：一個影片播放器，需要讀取另一個「影片 URL」欄位中的網址來播放影片），請選擇此項。

進入 AI 輔助開發編輯器

選擇儲存方式後，您將進入自訂欄位編輯器。在這裡，您可以與 AI 協作，逐步打造您的理想欄位。編輯器主要包含以下幾個區域：

  1. 💬 對話視窗 (Chat Window)：
  • 這是您與 AI 溝通的核心區域。
  • 用自然語言描述您想要的欄位樣式、排版佈局、互動行為等需求。越清晰、具體越好！
  1. 💻 程式碼編輯器 (Code Editor)：
  • AI 根據您的指令，會在這裡自動生成前端程式碼 (React + Tailwind CSS)。
  • 您也可以在這裡手動修改 AI 生成的程式碼，或從頭開始編寫。
  • 如果程式碼運行出錯，可以打開下方的「控制台 (Console)」查看錯誤訊息，或直接要求 AI 協助修復。
  1. 👁️ 即時預覽區 (Live Preview)：
  • AI 生成或您修改後的程式碼會自動在這裡運行，即時顯示欄位的實際外觀和互動效果。
  • 如果您手動修改了程式碼，點擊編輯器中的「執行 (Run)」按鈕即可更新預覽。
  1. 🔗 參考欄位區 (Reference Fields)：
  • 如果您的自訂欄位需要讀取或使用表單中其他欄位的數值（例如：根據「訂單金額」欄位的值，決定此自訂欄位的背景色），您可以在這裡將那些欄位添加為參考。
  • 在程式碼中，您可以使用 formData[env.fieldVariableName] 的方式來取得被參考欄位的值。
  1. 🧪 模擬資料區 (Mock Data)：
  • 當您的欄位需要引用其他欄位的值時，您可以在這裡載入一筆已存在的記錄資料，讓預覽區能顯示帶入實際資料後的效果。
  • 您也可以在這裡模擬行動裝置檢視和唯讀狀態下的顯示效果，方便您設計欄位在不同情境下的表現。

與 AI 高效溝通的秘訣

  • 指令要具體詳細： 為了讓 AI 更快、更準確地理解您的需求，請盡可能提供詳細的描述。比較以下兩種針對「影片播放器」的描述：

    • 方法一 (不建議)： 「從影片 URL 欄位產生一個可以播放 mp4 檔案的影片播放器。」 (太籠統)
    • 方法二 (建議)： 「產生一個影片播放器，用來播放『影片 URL』欄位中的影片。播放器需填滿顯示區域、無捲動軸、黑色背景、邊角略圓滑。影片應自動縮放以適應區域，並保持原始長寬比。當『影片 URL』欄位的內容不是 .mp4 結尾時，播放器應置中顯示文字『沒有可載入的影片 URL』。」 (具體、包含細節和異常處理)
    • 顯然，第二種描述能讓 AI 更快生成接近您期望的結果，減少來回溝通修改的次數。

  • 持續對話與迭代： 如果對預覽結果不滿意，別擔心！您可以繼續與 AI 對話，要求它修改、完善或除錯，直到您滿意為止。

  • 注意限制： 目前這個輕量級的線上編輯環境不支援引用外部的第三方 JavaScript 函式庫。

完成與儲存

當您對自訂欄位的程式碼和預覽效果感到滿意後：

  1. 點擊 「退出 AI 輔助開發」 按鈕。
  2. 記得儲存整個表單的設定。

範例：創建一個隨機數產生器

讓我們看一個實際例子：

  1. 需求： 創建一個包含數字輸入框和按鈕的欄位。點擊按鈕時，輸入框顯示 1-100 的隨機數，數字會快速變化並逐漸減慢直至停止。停止後的值會被儲存。如果欄位已有值，載入時需顯示。在唯讀狀態下，輸入框禁用，按鈕隱藏。
  2. 步驟：

  • 新增自訂欄位，類型選擇「數字 (Number)」，儲存方式選擇「儲存欄位值」。

  • 進入 AI 編輯器，在對話視窗貼上以下提示：

    • 創建一個包含數字輸入欄位和按鈕的隨機數產生器。點擊按鈕時，輸入欄位將顯示1-100之間的隨機數，每100毫秒變化一次，逐漸減慢直到完全停止。當數字停止變化後，最終值將被儲存。如果載入時存在現有值，它將顯示在輸入欄位中。當元件參數 env.isDisabled 為 true 時，數字輸入框將被停用，按鈕將被隱藏。

  • 等待 AI 生成程式碼並預覽。

  • 退出 AI 輔助開發並儲存表單，增加一筆資料測試。

  1. 進一步完善，再次與 AI 對話。

  • 提出新需求：調整程式碼，「點擊『開始』按鈕時，按鈕文字變為『停止』；再次點擊『停止』按鈕時，立即停止動畫並將文字變回『開始』。」讓 AI 調整程式碼。

  • 完成後，退出 AI 輔助開發並儲存表單，增加一筆資料測試。

  • 創建一筆新資料來實際測試您的隨機數產生器欄位！