用戶從別的地方復制的配置文件，粘貼到輸入框內，需要保留原始格式發送給后端。
核心步驟：
### 1. 格式保持機制
- white-space: pre ：這是最關鍵的CSS屬性，確保所有空格、制表符、換行符都被保留
- wrap="off" ：防止瀏覽器自動換行，保持原始的行結構
- 等寬字體 ：使用Consolas等編程字體，確保字符對齊和格式清晰
### 2. 數據綁定
- 使用Vue3的 v-model="inputJson" 實現雙向數據綁定
- 用戶粘貼的內容會完整存儲在 inputJson.value 中，包括所有格式字符
### 3. 用戶體驗
- 大尺寸textarea（400px高度）提供充足的編輯空間
- 關閉拼寫檢查避免干擾
- 聚焦時的視覺反饋
簡單來說，這個組件的核心就是讓用戶能夠粘貼任何文本內容（特別是配置文件、JSON等），并且保證粘貼的內容格式完全不變，然后可以原樣發送給后端處理。
下面是一個小demo
<template><div class="json-input-container"><textarea v-model="inputJson" placeholder="請粘貼配置文件內容，將保持原始格式"class="json-textarea"rows="15"wrap="off"spellcheck="false"></textarea><div class="format-info"><small>保持原始格式，包括換行符、空格和縮進，內容將原樣發送給后端</small></div></div>
</template><script setup>
import {ref,watch} from "vue";// 輸入內容，保持原始格式
let inputJson = ref('');
watch(inputJson, (newValue) => {console.log(JSON.stringify(newValue));
})
</script><style scoped>
.json-input-container {width: 100%;max-width: 800px;margin: 0 auto;
}.json-textarea {width: 100%;min-height: 400px;padding: 16px;border: 2px solid #e1e5e9;border-radius: 8px;font-family: 'Consolas', 'Monaco', 'Courier New', monospace;font-size: 14px;line-height: 1.5;background-color: #f8f9fa;color: #333;resize: vertical;outline: none;transition: border-color 0.3s ease;white-space: pre;overflow-wrap: normal;overflow-x: auto;box-sizing: border-box;
}.json-textarea:focus {border-color: #007bff;background-color: #fff;box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}.json-textarea::placeholder {color: #6c757d;font-style: italic;
}.format-info {margin-top: 8px;text-align: center;color: #6c757d;
}.format-info small {font-size: 12px;
}
</style>
