itismyskillmarket 1.3.21 → 1.3.23

package/dist/index.js

@@ -2081,6 +2081,8 @@ API_ROUTES.GET["/api/skills"] = async (_req, res, url) => {
     const page = Math.max(1, parseInt(url.searchParams.get("page") || "1"));
     const limit = Math.min(100, Math.max(1, parseInt(url.searchParams.get("limit") || "20")));
     const search = url.searchParams.get("search") || "";
+    const sort = url.searchParams.get("sort") || "name";
+    const platform = url.searchParams.get("platform") || "";
     const cacheKey = `search:${search}:limit:${limit}`;
     let searchResult = getCached(cacheKey);
     if (!searchResult) {
@@ -2118,16 +2120,40 @@ API_ROUTES.GET["/api/skills"] = async (_req, res, url) => {
           platforms: meta?.platforms || [],
           author: info.author?.name || pkg?.author?.name || "",
           homepage: pkg?.homepage || "",
-          repository: pkg?.repository?.url || ""
+          repository: pkg?.repository?.url || "",
+          updated: info.time?.[latestVersion] || info.time?.modified || ""
         };
       } catch {
         fetchErrors++;
         return null;
       }
     }, 3);
-    const skills = skillDetails.filter(Boolean);
-    const totalPages = Math.ceil(total / limit) || 1;
-    jsonResponse(res, 200, { skills, page, totalPages, total, fetchErrors });
+    let skills = skillDetails.filter(Boolean);
+    if (platform) {
+      skills = skills.filter(
+        (s) => Array.isArray(s.platforms) && s.platforms.includes(platform)
+      );
+    }
+    skills.sort((a, b) => {
+      const nameA = (a.displayName || a.id || "").toLowerCase();
+      const nameB = (b.displayName || b.id || "").toLowerCase();
+      switch (sort) {
+        case "-name":
+          return nameB.localeCompare(nameA);
+        case "updated":
+          return (a.updated || "").localeCompare(b.updated || "");
+        case "-updated":
+          return (b.updated || "").localeCompare(a.updated || "");
+        case "name":
+        default:
+          return nameA.localeCompare(nameB);
+      }
+    });
+    const filteredTotal = skills.length;
+    const totalPages = Math.ceil(filteredTotal / limit) || 1;
+    const start = (page - 1) * limit;
+    const pagedSkills = skills.slice(start, start + limit);
+    jsonResponse(res, 200, { skills: pagedSkills, page, totalPages, total: filteredTotal, fetchErrors });
   } catch (err) {
     jsonResponse(res, 500, {
       error: String(err),

package/gui/app.js

@@ -11,6 +11,8 @@ const state = {
   currentPage: 1,
   pageSize: 20,
   searchQuery: '',
+  sortBy: 'name',
+  platformFilter: '',
   totalPages: 1,
   previousView: 'skills',
 };
@@ -626,6 +628,26 @@ function initializeControls() {
     loadSkills();
   });
   
+  // 排序
+  const sortSelect = document.getElementById('sort-select');
+  if (sortSelect) {
+    sortSelect.addEventListener('change', () => {
+      state.sortBy = sortSelect.value;
+      state.currentPage = 1;
+      loadSkills();
+    });
+  }
+
+  // 平台分类过滤
+  const platformFilter = document.getElementById('platform-filter');
+  if (platformFilter) {
+    platformFilter.addEventListener('change', () => {
+      state.platformFilter = platformFilter.value;
+      state.currentPage = 1;
+      loadSkills();
+    });
+  }
+
   // 刷新按钮
   document.getElementById('refresh-skills').addEventListener('click', () => loadSkills());
   document.getElementById('update-all').addEventListener('click', updateAllSkills);
@@ -669,11 +691,15 @@ async function loadSkills() {
     const params = new URLSearchParams({
       page: state.currentPage.toString(),
       limit: state.pageSize.toString(),
+      sort: state.sortBy,
     });
 
     if (state.searchQuery) {
       params.append('search', state.searchQuery);
     }
+    if (state.platformFilter) {
+      params.append('platform', state.platformFilter);
+    }
 
     const response = await fetch(`/api/skills?${params}`);
     const data = await response.json();
@@ -686,6 +712,7 @@ async function loadSkills() {
     renderSkills(data.skills || data, container);
     renderPagination(data.page, data.totalPages || 1);
     renderFetchWarning(data.fetchErrors);
+    updatePlatformFilterOptions(data.skills || []);
   } catch (err) {
     container.innerHTML = `<div class="loading">${t('error.generic')}: ${err.message}</div>`;
   }
@@ -763,6 +790,34 @@ function renderFetchWarning(fetchErrors) {
 // 分页
 // -----------------------------------------------------------------------------
 
+/** 收集所有可用平台，更新分类过滤下拉框 */
+function updatePlatformFilterOptions(skills) {
+  const select = document.getElementById('platform-filter');
+  if (!select) return;
+
+  // 收集所有唯一的平台名
+  const allPlatforms = new Set();
+  (skills || []).forEach(s => {
+    if (Array.isArray(s.platforms)) {
+      s.platforms.forEach(p => allPlatforms.add(p));
+    }
+  });
+
+  const currentVal = select.value;
+  const sortedPlatforms = [...allPlatforms].sort();
+
+  // 只有当平台列表有变化时才重新渲染
+  const currentOptions = Array.from(select.options).slice(1).map(o => o.value).sort().join(',');
+  const newOptions = sortedPlatforms.join(',');
+  if (currentOptions === newOptions) return;
+
+  select.innerHTML = `
+    <option value="">All Platforms</option>
+    ${sortedPlatforms.map(p => `<option value="${p}"${currentVal === p ? ' selected' : ''}>${p}</option>`).join('')}
+  `;
+  select.value = currentVal && allPlatforms.has(currentVal) ? currentVal : '';
+}
+
 function renderPagination(currentPage, totalPages) {
   state.currentPage = currentPage;
   state.totalPages = totalPages;
@@ -777,6 +832,12 @@ function renderPagination(currentPage, totalPages) {
   let html = `
     <button ${currentPage <= 1 ? 'disabled' : ''} onclick="changePage(${currentPage - 1})">${t('pagination.prev')}</button>
     <span class="page-info">${t('pagination.pageInfo', { page: currentPage, totalPages: totalPages })}</span>
+    <span class="page-jump">
+      <label>Go to</label>
+      <input type="number" id="page-jump-input" min="1" max="${totalPages}" value="${currentPage}"
+        onkeydown="if(event.key==='Enter')jumpToPage()">
+      <button onclick="jumpToPage()">Go</button>
+    </span>
     <button ${currentPage >= totalPages ? 'disabled' : ''} onclick="changePage(${currentPage + 1})">${t('pagination.next')}</button>
   `;
 
@@ -789,6 +850,17 @@ function changePage(page) {
   loadSkills();
 }
 
+function jumpToPage() {
+  const input = document.getElementById('page-jump-input');
+  if (!input) return;
+  const page = parseInt(input.value);
+  if (isNaN(page) || page < 1 || page > state.totalPages) {
+    input.value = state.currentPage;
+    return;
+  }
+  changePage(page);
+}
+
 // -----------------------------------------------------------------------------
 // Platforms
 // -----------------------------------------------------------------------------

package/gui/index.html

@@ -37,6 +37,15 @@
           <h2>Available Skills</h2>
           <div class="controls">
             <input type="text" id="search-input" placeholder="🔍 Search skills...">
+            <select id="sort-select">
+              <option value="name">Name A-Z</option>
+              <option value="-name">Name Z-A</option>
+              <option value="-updated">Recently Updated</option>
+              <option value="updated">Least Recently Updated</option>
+            </select>
+            <select id="platform-filter">
+              <option value="">All Platforms</option>
+            </select>
             <select id="page-size">
               <option value="10">10 per page</option>
               <option value="20" selected>20 per page</option>

package/gui/style.css

@@ -366,6 +366,54 @@ body {
   font-size: 0.85rem;
 }
 
+.pagination .page-jump {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+
+.pagination .page-jump input {
+  width: 50px;
+  padding: 5px 6px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  border-radius: 4px;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.pagination .page-jump input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.pagination .page-jump button {
+  padding: 5px 10px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.pagination .page-jump button:hover {
+  background: var(--bg-hover);
+}
+
+/* Hide spinner for number input */
+.pagination .page-jump input::-webkit-outer-spin-button,
+.pagination .page-jump input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.pagination .page-jump input[type=number] {
+  -moz-appearance: textfield;
+}
+
 /* -----------------------------------------------------------------------------
    Skill 详情视图
    ----------------------------------------------------------------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itismyskillmarket",
-  "version": "1.3.21",
+  "version": "1.3.23",
   "description": "Cross-platform skill manager for AI coding tools",
   "type": "module",
   "bin": {