新增：复制模型文件名

Author: c1921

templates/js/models.js

@@ -3,28 +3,60 @@ class ModelDisplayManager {
         this.modelsList = document.getElementById('modelsList');
     }
 
+    // 处理复制按钮点击
+    handleCopyClick(btn, filename) {
+        navigator.clipboard.writeText(filename)
+            .then(() => {
+                // 临时改变按钮样式表示复制成功
+                const originalHtml = btn.innerHTML;
+                btn.innerHTML = '<i class="bi bi-check"></i>';
+                btn.classList.remove('btn-outline-secondary');
+                btn.classList.add('btn-success');
+                
+                setTimeout(() => {
+                    btn.innerHTML = originalHtml;
+                    btn.classList.remove('btn-success');
+                    btn.classList.add('btn-outline-secondary');
+                }, 1000);
+            })
+            .catch(err => console.error('复制失败:', err));
+    }
+
     // 显示模型列表
     displayModels(models) {
         this.modelsList.innerHTML = models.map(model => this.generateModelCard(model)).join('');
 
-        // 添加点击事件监听
-        this.modelsList.querySelectorAll('.model-card').forEach(card => {
-            card.addEventListener('click', () => {
+        // 仅在点击图片时触发模态窗口
+        this.modelsList.querySelectorAll('.model-card img').forEach(img => {
+            img.addEventListener('click', (event) => {
+                const card = event.target.closest('.model-card');
                 const modelData = JSON.parse(card.dataset.model);
                 this.showModelDetail(modelData);
             });
         });
+
+        // 添加复制按钮事件监听
+        this.modelsList.querySelectorAll('.copy-btn').forEach(btn => {
+            btn.addEventListener('click', (event) => {
+                this.handleCopyClick(btn, btn.dataset.filename);
+            });
+        });
     }
 
+
     // 生成模型卡片 HTML
     generateModelCard(model) {
         const imgSrc = model.preview_url?.startsWith('/static') ?
             model.preview_url :
             '/static/images/' + model.preview_url?.split('/').pop();
+        // 处理 Windows 和 Unix 风格的路径
+        const fileName = model.path.replace(/\\/g, '/').split('/').pop();
+        // 转义 JSON 字符串中的特殊字符
+        const modelJson = JSON.stringify(model).replace(/"/g, '&quot;');
 
         return `
         <div class="col">
-            <div class="card h-100 d-flex flex-column model-card" data-model='${JSON.stringify(model)}'>
+            <div class="card h-100 d-flex flex-column model-card" data-model="${modelJson}">
                 <div class="row g-0 h-100">
                     ${model.preview_url ? `
                     <div class="col-4 col-sm-12">
@@ -49,7 +81,21 @@ class ModelDisplayManager {
                                 <small class="d-block">类型: ${model.type}</small>
                                 <small class="d-block">基础模型: ${model.baseModel || '未知'}</small>
                             </p>
-                            ${model.url ? `<a href="${model.url}" class="btn btn-outline-secondary btn-sm" target="_blank">查看详情</a>` : ''}
+                            <div class="d-flex gap-2">
+                                <button class="btn btn-outline-secondary btn-sm copy-btn" 
+                                        data-filename="${fileName}" 
+                                        title="复制文件名">
+                                    <i class="bi bi-files"></i>
+                                </button>
+                                ${model.url ? `
+                                <a href="${model.url}" 
+                                   class="btn btn-outline-secondary btn-sm" 
+                                   target="_blank"
+                                   title="打开 Civitai">
+                                    <i class="bi bi-box-arrow-up-right"></i>
+                                   </a>
+                                ` : ''}
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -65,6 +111,8 @@ class ModelDisplayManager {
         const modalTitle = document.getElementById('modelDetailModalLabel');
         const modalImage = document.getElementById('modelDetailImage');
         const modalInfo = document.getElementById('modelDetailInfo');
+        // 处理文件名
+        const fileName = model.path.replace(/\\/g, '/').split('/').pop();
 
         // 设置标题
         modalTitle.textContent = model.name;
@@ -93,14 +141,29 @@ class ModelDisplayManager {
                 <p class="mb-2"><strong>类型:</strong> ${model.type}</p>
                 <p class="mb-2"><strong>基础模型:</strong> ${model.baseModel || '未知'}</p>
                 ${model.description ? `<p class="mb-2"><strong>描述:</strong> ${model.description}</p>` : ''}
-                ${model.url ? `
-                    <a href="${model.url}" class="btn btn-outline-secondary btn-sm mt-2" target="_blank">
-                        <i class="bi bi-box-arrow-up-right me-1"></i>查看详情
+                <div class="d-flex gap-2 mt-2">
+                    <button class="btn btn-outline-secondary btn-sm copy-btn" 
+                            data-filename="${fileName}" 
+                            title="复制文件名">
+                        <i class="bi bi-files"></i>
+                    </button>
+                    ${model.url ? `
+                    <a href="${model.url}" 
+                       class="btn btn-outline-secondary btn-sm" 
+                       target="_blank"
+                       title="打开 Civitai">
+                        <i class="bi bi-box-arrow-up-right"></i>
                     </a>
-                ` : ''}
+                    ` : ''}
+                </div>
             </div>
             `;
 
+        // 添加复制按钮事件监听
+        modalInfo.querySelector('.copy-btn')?.addEventListener('click', (event) => {
+            this.handleCopyClick(event.currentTarget, event.currentTarget.dataset.filename);
+        });
+
         // 显示模态框
         modal.show();
     }