prompt.html

---
layout: default
title: prompt
description: "「侵权专线」"
header-img: "img/bg-download.jpg"
header-mask: 0.3
---

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <h1 class="my-4">开源prompt文件下载中心</h1>
      
      <div class="search-box">
        <input type="text" id="searchInput" class="form-control" 
               placeholder="根据描述搜索文件...">
      </div>

      <div class="post-container">
        <table class="table table-hover table-bordered">
          <thead class="thead-dark">
            <tr>
              <th>名称</th>
              <th>          描述          </th>
              <th>   版本   </th>
              <th>   作者   </th>
              <th>     发布时间     </th>
              <th>文件类型</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="fileTableBody">
            <tr id="loadingRow">
              <td colspan="6" class="text-center">加载中...</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
  <script src="/js/jquery.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script>
    // 加载并渲染文件数据
    function loadFiles() {
      fetch('/data/files.json')
        .then(response => response.json())
        .then(files => {
          renderTable(files);
          setupSearch(files);
        });
    }

    // 渲染表格数据
    function renderTable(files) {
      const tbody = document.getElementById('fileTableBody');
      tbody.innerHTML = files.map(file => `
        <tr>
          <td>${file.name}</td>
          <td>${file.ds}</td>
          <td>${file.vin}</td>
          <td>${file.wrt}</td>
          <td>${file.time}</td>
          <td>${file.format}</td>
          <td>
            <a href="${file.url}" class="btn btn-primary btn-sm btn-download" download>
                <i class="fa fa-download"></i>
              <span>下载</span>
            </a>
          </td>
        </tr>
      `).join('');
    }

    // 设置搜索功能
    function setupSearch(files) {
      const searchInput = document.getElementById('searchInput');
      
      searchInput.addEventListener('input', function(e) {
        const keyword = e.target.value.toLowerCase();
        const filtered = files.filter(file => 
          file.ds.toLowerCase().includes(keyword) || 
          file.name.toLowerCase().includes(keyword)
        );
        
        renderTable(filtered);
        highlightKeyword(keyword);
      });
    }

    // 高亮搜索关键词
    function highlightKeyword(keyword) {
      if (!keyword) return;

      const cells = document.querySelectorAll('td:nth-child(1), td:nth-child(2)');
      cells.forEach(cell => {
        const text = cell.innerText;
        const regex = new RegExp(`(${keyword})`, 'gi');
        cell.innerHTML = text.replace(regex, '<span class="highlight">$1</span>');
      });
    }

    // 初始化加载
    window.onload = loadFiles;
</script>

{% if site.disqus_username %}
<!-- 复用about.html的disqus评论系统 -->
<div class="comment">
    <div id="disqus_thread" class="disqus-thread"></div>
</div>
{% endif %}

<style>
  /* 新增表格尺寸调整样式 */
  .table {
    font-size: 11px;  /* 调大表格字体 */
    line-height: 2; /* 增加行高 */
    width: 300%;      /* 表格宽度占满容器 */
  }
  
  .table th, 
  .table td {
    padding: 24px 30px; /* 增大单元格内边距 */
    vertical-align: middle;
  }

  .post-container {
    max-width: 10000px;  /* 增大表格容器宽度 */
    margin: 0 auto;
  }

  /* 原有下载按钮样式保持不变 */
  .btn-download {
    padding: 5px 12px;
    border-radius: 15px;
    transition: all 0.3s ease;
    color: #fff !important; /* 强制文字白色 */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 保持字体统一 */
  }
  .btn-download i {
    margin-right: 5px;
    vertical-align: middle; /* 图标文字垂直居中 */
  }
  .btn-download span {
    font-size: 14px; /* 明确字号 */
    display: inline-block; /* 解决span元素布局问题 */
  }
  .btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    color: #fff; /* 悬浮保持白色 */
  }
</style>