itismyskillmarket 1.3.20 → 1.3.22

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,38 @@ 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;
+    jsonResponse(res, 200, { skills, page, totalPages, total: filteredTotal, fetchErrors });
   } catch (err) {
     jsonResponse(res, 500, {
       error: String(err),
@@ -2164,7 +2188,8 @@ API_ROUTES.GET["/api/platforms"] = async (_req, res, _url) => {
           id: adapter.id,
           name: adapter.name,
           available: !!isAvailable,
-          installedCount: Array.isArray(installed) ? installed.length : 0
+          installedCount: Array.isArray(installed) ? installed.length : 0,
+          installedSkills: Array.isArray(installed) ? installed : []
         };
       })
     );
@@ -2173,6 +2198,34 @@ API_ROUTES.GET["/api/platforms"] = async (_req, res, _url) => {
     jsonResponse(res, 500, { error: String(err) });
   }
 };
+API_ROUTES.GET["/api/platform-info"] = async (_req, res, url) => {
+  try {
+    const platformId = url.searchParams.get("id") || "";
+    if (!platformId) {
+      jsonResponse(res, 400, { error: 'Missing "id" query parameter' });
+      return;
+    }
+    const allAdapters = getAllAdapters();
+    const adapter = allAdapters.find((a) => a.id === platformId);
+    if (!adapter) {
+      jsonResponse(res, 404, { error: `Platform "${platformId}" not found` });
+      return;
+    }
+    const available = await detectPlatforms();
+    const isAvailable = available.find((a) => a.id === adapter.id);
+    const installed = await adapter.listInstalled();
+    const installedSkills = Array.isArray(installed) ? installed : [];
+    jsonResponse(res, 200, {
+      id: adapter.id,
+      name: adapter.name,
+      available: !!isAvailable,
+      installedCount: installedSkills.length,
+      installedSkills
+    });
+  } catch (err) {
+    jsonResponse(res, 500, { error: String(err) });
+  }
+};
 API_ROUTES.GET["/api/skill-info"] = async (_req, res, url) => {
   try {
     const skillName = url.searchParams.get("skill") || "";
@@ -2213,6 +2266,15 @@ API_ROUTES.GET["/api/skill-info"] = async (_req, res, url) => {
     jsonResponse(res, 500, { error: String(err) });
   }
 };
+API_ROUTES.GET["/api/version"] = async (_req, res, _url) => {
+  try {
+    const pkgPath = join4(__dirname2, "..", "package.json");
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+    jsonResponse(res, 200, { version: pkg.version || "1.0.0" });
+  } catch {
+    jsonResponse(res, 200, { version: "1.0.0" });
+  }
+};
 API_ROUTES.GET["/api/config"] = async (_req, res, _url) => {
   jsonResponse(res, 200, {
     npmScope: NPM_SCOPE,

package/gui/app.js

@@ -11,6 +11,8 @@ const state = {
   currentPage: 1,
   pageSize: 20,
   searchQuery: '',
+  sortBy: 'name',
+  platformFilter: '',
   totalPages: 1,
   previousView: 'skills',
 };
@@ -470,6 +472,23 @@ function applyI18nToStaticElements() {
   if (backBtn) backBtn.innerHTML = `← ${t('nav.back')}`;
 }
 
+// -----------------------------------------------------------------------------
+// 版本号加载
+// -----------------------------------------------------------------------------
+
+async function loadVersion() {
+  try {
+    const response = await fetch('/api/version');
+    const data = await response.json();
+    const el = document.getElementById('gui-version');
+    if (el && data.version) {
+      el.textContent = `v${data.version}`;
+    }
+  } catch {
+    // 静默失败，保留 HTML 中的占位符
+  }
+}
+
 // 重新渲染当前视图
 function reRenderCurrentView() {
   // 更新语言选项
@@ -508,6 +527,7 @@ document.addEventListener('DOMContentLoaded', () => {
   initializeNavigation();
   initializeControls();
   initializeCollapsibleSections();
+  loadVersion();
   loadSkills();
 });
 
@@ -561,8 +581,8 @@ function switchView(view) {
     targetView.classList.add('active');
   }
   
-  // 加载对应数据 (skill-detail 视图的数据由 showSkillDetail 加载)
-  if (view !== 'skill-detail') {
+  // 加载对应数据 (skill-detail / platform-detail 视图的数据由各自函数加载)
+  if (view !== 'skill-detail' && view !== 'platform-detail') {
     switch(view) {
       case 'skills':
         loadSkills();
@@ -608,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);
@@ -651,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();
@@ -668,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>`;
   }
@@ -745,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;
@@ -801,7 +874,7 @@ function renderPlatforms(platforms, container) {
   }
 
   container.innerHTML = platforms.map(platform => `
-    <div class="platform-card">
+    <div class="platform-card" onclick="showPlatformDetail('${platform.id}')" style="cursor: pointer;">
       <div>
         <h3>${platform.name}</h3>
         <div class="status ${platform.available ? 'status-available' : 'status-unavailable'}">
@@ -809,12 +882,86 @@ function renderPlatforms(platforms, container) {
         </div>
       </div>
       <div>
-        ${platform.installedCount ? `<span>${t('status.skillsInstalled', { count: platform.installedCount })}</span>` : ''}
+        ${platform.installedCount ? `<span>${t('status.skillsInstalled', { count: platform.installedCount })}</span>` : '<span style="color: var(--text-muted); font-size: 0.85rem;">0 installed</span>'}
       </div>
     </div>
   `).join('');
 }
 
+// -----------------------------------------------------------------------------
+// Platform 详情视图
+// -----------------------------------------------------------------------------
+
+async function showPlatformDetail(platformId) {
+  const content = document.getElementById('platform-detail-content');
+  content.innerHTML = `<div class="loading">${t('loading.generic')}</div>`;
+
+  state.previousView = state.currentView;
+  state.currentView = 'platform-detail';
+
+  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+  const targetView = document.getElementById('view-platform-detail');
+  if (targetView) targetView.classList.add('active');
+
+  try {
+    const response = await fetch(`/api/platform-info?id=${encodeURIComponent(platformId)}`);
+    const platform = await response.json();
+
+    if (platform.error) {
+      content.innerHTML = `<div class="loading">${t('error.generic')}: ${platform.error}</div>`;
+      return;
+    }
+
+    const skills = platform.installedSkills || [];
+
+    content.innerHTML = `
+      <div class="platform-detail">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+          <div>
+            <h2 style="color: var(--accent); font-size: 1.5rem; margin: 0;">${platform.name}</h2>
+            <span class="status ${platform.available ? 'status-available' : 'status-unavailable'}">
+              ${platform.available ? t('status.available') : t('status.unavailable')}
+            </span>
+            <span style="color: var(--text-muted); font-size: 0.85rem; margin-left: 12px;">
+              ${t('status.skillsInstalled', { count: platform.installedCount })}
+            </span>
+          </div>
+        </div>
+        <div class="admin-skill-row" style="background: var(--bg-card); padding: 10px 16px; margin-bottom: 12px;">
+          <span style="color: var(--text-muted); font-size: 0.85rem;">Platform ID</span>
+          <span style="color: var(--text-secondary); font-size: 0.9rem; font-family: monospace;">${platform.id}</span>
+        </div>
+        <h3 style="color: var(--text-secondary); margin-bottom: 10px; font-size: 1rem;">
+          Installed Skills (${skills.length})
+        </h3>
+        ${skills.length === 0 ? '<div class="loading" style="padding: 20px;">No skills installed on this platform.</div>' : `
+          <div style="display: flex; flex-direction: column; gap: 6px;">
+            ${skills.map((skill, i) => `
+              <div class="admin-skill-row" style="cursor: pointer;" onclick="showSkillDetail('${skill.id}')">
+                <div class="admin-skill-info">
+                  <h4>${skill.displayName || skill.id}</h4>
+                  <div class="admin-skill-meta">${skill.id}@${skill.version || 'latest'}</div>
+                </div>
+                <button class="btn btn-secondary btn-sm" onclick="event.stopPropagation(); showSkillDetail('${skill.id}')">${t('btn.info')}</button>
+              </div>
+            `).join('')}
+          </div>
+        `}
+      </div>
+    `;
+  } catch (err) {
+    content.innerHTML = `<div class="loading">${t('error.generic')}: ${err.message}</div>`;
+  }
+}
+
+function goBackFromPlatformDetail() {
+  const target = state.previousView || 'platforms';
+  document.querySelectorAll('.nav-btn').forEach(b => {
+    b.classList.toggle('active', b.dataset.view === target);
+  });
+  switchView(target);
+}
+
 // -----------------------------------------------------------------------------
 // Help 视图
 // -----------------------------------------------------------------------------

package/gui/index.html

@@ -12,7 +12,7 @@
     <header class="topbar">
       <div class="topbar-left">
         <span class="topbar-logo">📦 SkillMarket</span>
-        <span class="topbar-version" id="gui-version">v1.3.16</span>
+        <span class="topbar-version" id="gui-version">...</span>
       </div>
       <nav class="topbar-nav">
         <button class="nav-btn active" data-view="skills">📋 Skills</button>
@@ -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>
@@ -66,6 +75,14 @@
         <div id="platforms-list" class="platforms-list"></div>
       </div>
 
+      <!-- Platform 详情视图 -->
+      <div id="view-platform-detail" class="view">
+        <div class="view-header">
+          <button class="btn btn-secondary" onclick="goBackFromPlatformDetail()">← Back to Platforms</button>
+        </div>
+        <div id="platform-detail-content"></div>
+      </div>
+
       <!-- Help 视图 -->
       <div id="view-help" class="view">
         <div class="view-header">

package/gui/style.css

@@ -40,6 +40,13 @@ body {
   overflow: hidden;
 }
 
+#app {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
 /* -----------------------------------------------------------------------------
    顶部导航栏
    ----------------------------------------------------------------------------- */

package/package.json

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