From db5d479c0e7ea616d091e0ce809fea3c5bf598ad Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Mon, 3 Mar 2025 11:48:44 +0800
Subject: [PATCH] Add file name copy functionality to Lora modal

---
 static/css/components/modal.css  | 26 ++++++++++++++++++++++++++
 static/js/components/LoraCard.js | 16 +++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 14df54d6..274f4f93 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -913,4 +913,30 @@ body.modal-open {
 
 .add-preset-btn:hover {
     opacity: 0.9;
+}
+
+/* File name copy styles */
+.file-name-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.2s;
+}
+
+.file-name-wrapper:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+}
+
+.file-name-wrapper i {
+    color: var(--text-color);
+    opacity: 0.5;
+    transition: opacity 0.2s;
+}
+
+.file-name-wrapper:hover i {
+    opacity: 1;
+    color: var(--lora-accent);
 }
\ No newline at end of file
diff --git a/static/js/components/LoraCard.js b/static/js/components/LoraCard.js
index 375b0617..b0822a85 100644
--- a/static/js/components/LoraCard.js
+++ b/static/js/components/LoraCard.js
@@ -149,7 +149,10 @@ export function showLoraModal(lora) {
                         </div>
                         <div class="info-item">
                             <label>File Name</label>
-                            <span id="file-name">${lora.file_name || 'N/A'}</span>
+                            <div class="file-name-wrapper" onclick="copyFileName('${lora.file_name}')">
+                                <span id="file-name">${lora.file_name || 'N/A'}</span>
+                                <i class="fas fa-copy" title="Copy file name"></i>
+                            </div>
                         </div>
                         <div class="info-item">
                             <label>Location</label>
@@ -206,6 +209,17 @@ export function showLoraModal(lora) {
     setupShowcaseScroll(); // Add this line
 }
 
+// 添加复制文件名的函数
+window.copyFileName = async function(fileName) {
+    try {
+        await navigator.clipboard.writeText(fileName);
+        showToast('File name copied', 'success');
+    } catch (err) {
+        console.error('Copy failed:', err);
+        showToast('Copy failed', 'error');
+    }
+};
+
 function setupEditableFields() {
     const editableFields = document.querySelectorAll('.editable-field [contenteditable]');