donald/hr-position-system
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 優化三個錦囊 UI 設計

Browse Source 
- 縮小錦囊按鈕至原大小的 1/4：
  * padding: 20px → 8px 12px
  * font-size: 圖標 2rem → 1rem，標題 0.95rem → 0.75rem
  * gap: 16px → 8px
  * 整體更緊湊，節省空間

- 優化 Prompt 編輯模態框 Layout：
  * 寬度增加：700px → 900px
  * 高度限制：90vh，防止超出螢幕
  * 標題和副標題改為兩欄並排顯示
  * Textarea 高度增加：12 → 16 行
  * 使用等寬字體 Consolas/Monaco，提升 prompt 編輯體驗
  * 提示區塊優化為藍色主題，更醒目
  * 按鈕添加 SVG 圖標，更直觀
  * 使用 flexbox 確保 footer 固定底部

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DonaldFang 方士碩
2025-12-06 01:25:47 +08:00
parent 8069f1b628
commit ea745ffefc
3 changed files with 317 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@@ -4112,34 +4112,55 @@ ${contextInfo}
<!-- ==================== Prompt 編輯模態框 ==================== -->
<div class="modal-overlay" id="promptEditModal">
<div class="modal" style="max-width: 700px;">
<div class="modal" style="max-width: 900px; max-height: 90vh; display: flex; flex-direction: column;">
<div class="modal-header">
<h3 id="promptModalTitle">編輯 Prompt</h3>
<button class="modal-close" onclick="closePromptEditModal()">✕</button>
</div>
<div class="modal-body">
<div class="modal-body" style="overflow-y: auto; flex: 1;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
<div class="form-group">
<label>錦囊標題</label>
<input type="text" id="promptTitle" placeholder="例如：簡化版、標準版、詳細版">
</div>
<div class="form-group">
<label>副標題（選填）</label>
<input type="text" id="promptSubtitle" placeholder="例如：僅必填欄位、常用欄位">
</div>
</div>
<div class="form-group">
<label>錦囊標題</label>
<input type="text" id="promptTitle" placeholder="例如：簡化版、標準版、詳細版">
<label style="display: flex; justify-content: space-between; align-items: center;">
<span>Prompt 內容</span>
<span style="font-size: 0.75rem; color: #94a3b8; font-weight: normal;">支援變數：{existingData}, {positionName}</span>
</label>
<textarea id="promptContent" rows="16" style="font-family: 'Consolas', 'Monaco', monospace; font-size: 0.85rem; line-height: 1.6;" placeholder="請輸入 AI Prompt 內容...&#10;&#10;範例：&#10;你是專業人資顧問，請根據以下資料生成崗位描述：&#10;&#10;已填寫的資料：{existingData}&#10;崗位名稱：{positionName}&#10;&#10;請用繁體中文，返回 JSON 格式。"></textarea>
</div>
<div class="form-group" style="margin-top: 16px;">
<label>副標題（選填）</label>
<input type="text" id="promptSubtitle" placeholder="例如：僅必填欄位、常用欄位">
</div>
<div class="form-group" style="margin-top: 16px;">
<label>Prompt 內容</label>
<textarea id="promptContent" rows="12" placeholder="請輸入 AI Prompt 內容&#10;&#10;可使用的變數：&#10;{existingData} - 當前表單已填寫的資料&#10;{positionName} - 崗位名稱"></textarea>
</div>
<div style="margin-top: 12px; padding: 12px; background: #f8fafc; border-radius: 6px; font-size: 0.85rem; color: #64748b;">
<strong>提示：</strong>Prompt 會自動替換以下變數：<br>
• <code>{existingData}</code> → 當前表單已填寫的資料（JSON 格式）<br>
• <code>{positionName}</code> → 崗位名稱（用於招聘要求頁籤）
<div style="margin-top: 12px; padding: 10px 12px; background: #eff6ff; border-left: 3px solid #3b82f6; border-radius: 4px; font-size: 0.8rem; color: #1e40af;">
<div style="font-weight: 600; margin-bottom: 4px;">💡 可用變數</div>
<div style="line-height: 1.6;">
• <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px;">{existingData}</code> 當前表單已填寫的資料（JSON 格式）<br>
• <code style="background: #dbeafe; padding: 2px 6px; border-radius: 3px;">{positionName}</code> 崗位名稱（用於招聘要求頁籤）
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="resetToDefaultPrompt()">重置為預設</button>
<div class="modal-footer" style="flex-shrink: 0;">
<button class="btn btn-secondary" onclick="resetToDefaultPrompt()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
<path d="M21 3v5h-5"/>
</svg>
重置為預設
</button>
<div style="flex: 1;"></div>
<button class="btn btn-cancel" onclick="closePromptEditModal()">取消</button>
<button class="btn btn-primary" onclick="savePromptEdit()">保存</button>
<button class="btn btn-primary" onclick="savePromptEdit()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
保存
</button>
</div>
</div>
</div>