itismyskillmarket 1.3.15 → 1.3.16

package/gui/app.js

@@ -12,6 +12,7 @@ const state = {
   pageSize: 20,
   searchQuery: '',
   totalPages: 1,
+  previousView: 'skills',
 };
 
 // -----------------------------------------------------------------------------
@@ -60,6 +61,10 @@ function initializeNavigation() {
 }
 
 function switchView(view) {
+  // Save previous view (but not when navigating to skill-detail from back)
+  if (state.currentView !== 'skill-detail') {
+    state.previousView = state.currentView;
+  }
   state.currentView = view;
   
   // 隐藏所有视图
@@ -71,23 +76,25 @@ function switchView(view) {
     targetView.classList.add('active');
   }
   
-  // 加载对应数据
-  switch(view) {
-    case 'skills':
-      loadSkills();
-      break;
-    case 'installed':
-      loadInstalled();
-      break;
-    case 'platforms':
-      loadPlatforms();
-      break;
-    case 'help':
-      loadHelp();
-      break;
-    case 'admin':
-      loadAdminDashboard();
-      break;
+  // 加载对应数据 (skill-detail 视图的数据由 showSkillDetail 加载)
+  if (view !== 'skill-detail') {
+    switch(view) {
+      case 'skills':
+        loadSkills();
+        break;
+      case 'installed':
+        loadInstalled();
+        break;
+      case 'platforms':
+        loadPlatforms();
+        break;
+      case 'help':
+        loadHelp();
+        break;
+      case 'admin':
+        loadAdminDashboard();
+        break;
+    }
   }
 }
 
@@ -122,11 +129,13 @@ function initializeControls() {
   const refreshAdmin = document.getElementById('refresh-admin');
   if (refreshAdmin) refreshAdmin.addEventListener('click', () => loadAdminDashboard());
   
-  // 模态框关闭
-  document.querySelector('.modal-close').addEventListener('click', closeModal);
-  document.getElementById('modal').addEventListener('click', (e) => {
-    if (e.target.id === 'modal') closeModal();
-  });
+  // Admin 模态框 - 点击外部关闭
+  const modalEl = document.getElementById('modal');
+  if (modalEl) {
+    modalEl.addEventListener('click', (e) => {
+      if (e.target === modalEl) closeModal();
+    });
+  }
 }
 
 // -----------------------------------------------------------------------------
@@ -196,18 +205,18 @@ function createSkillCard(skill, isInstalled) {
   const platformTags = platforms.map(p => `<span class="platform-tag">${p}</span>`).join('');
   
   return `
-    <div class="skill-card">
+    <div class="skill-card" onclick="showSkillDetail('${skill.id}')">
       <h3>${skill.displayName || skill.id}</h3>
       <div class="skill-id">${skill.id}@${skill.version || 'latest'}</div>
       <p>${skill.description || 'No description'}</p>
       <div class="platforms">${platformTags}</div>
       <div class="actions">
         ${isInstalled ? `
-          <button class="btn btn-danger btn-sm" onclick="uninstallSkill('${skill.id}')">Uninstall</button>
-          <button class="btn btn-primary btn-sm" onclick="updateSkill('${skill.id}')">Update</button>
+          <button class="btn btn-danger btn-sm" onclick="event.stopPropagation(); uninstallSkill('${skill.id}')">Uninstall</button>
+          <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); updateSkill('${skill.id}')">Update</button>
+          <button class="btn btn-secondary btn-sm" onclick="event.stopPropagation(); showSkillDetail('${skill.id}')">Info</button>
         ` : `
-          <button class="btn btn-success btn-sm" onclick="installSkill('${skill.id}')">Install</button>
-          <button class="btn btn-secondary btn-sm" onclick="showSkillInfo('${skill.id}')">Info</button>
+          <button class="btn btn-success btn-sm" onclick="event.stopPropagation(); installSkill('${skill.id}')">Install</button>
         `}
       </div>
     </div>
@@ -493,37 +502,85 @@ async function updateAllSkills() {
   }
 }
 
-async function showSkillInfo(skillId) {
-  const modal = document.getElementById('modal');
-  const modalBody = document.getElementById('modal-body');
+// -----------------------------------------------------------------------------
+// Skill 详情视图 (替换旧模态框)
+// -----------------------------------------------------------------------------
+
+async function showSkillDetail(skillId) {
+  const content = document.getElementById('skill-detail-content');
+  content.innerHTML = '<div class="loading">Loading skill details...</div>';
   
-  modalBody.innerHTML = '<div class="loading">Loading...</div>';
-  modal.classList.remove('hidden');
+  // 切换到详情视图
+  const btn = document.querySelector(`.nav-btn[data-view="skill-detail"]`);
+  // skill-detail 没有 nav-btn，直接用 switchView
+  state.previousView = state.currentView;
+  state.currentView = 'skill-detail';
+  
+  // 隐藏所有视图，显示详情视图
+  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+  const targetView = document.getElementById('view-skill-detail');
+  if (targetView) targetView.classList.add('active');
   
   try {
-    const response = await fetch(`/api/skills?search=${skillId}`);
+    const response = await fetch(`/api/skill-info?skill=${encodeURIComponent(skillId)}`);
     const data = await response.json();
-    const skills = data.skills || data;
-    const skill = Array.isArray(skills) ? skills.find(s => s.id === skillId) : skills;
     
-    if (!skill) {
-      modalBody.innerHTML = '<div class="loading">Skill not found</div>';
+    if (data.error) {
+      content.innerHTML = `<div class="loading">Error: ${data.error}</div>`;
       return;
     }
     
-    modalBody.innerHTML = `
-      <h2>${skill.displayName || skill.id}</h2>
-      <div class="detail-row"><strong>ID:</strong> ${skill.id}</div>
-      <div class="detail-row"><strong>Version:</strong> ${skill.version || 'latest'}</div>
-      <div class="detail-row"><strong>Description:</strong> ${skill.description || 'No description'}</div>
-      <div class="detail-row"><strong>Platforms:</strong> ${(skill.platforms || []).join(', ') || 'None'}</div>
-      ${skill.link ? `<div class="detail-row"><strong>Link:</strong> <a href="${skill.link}" target="_blank">${skill.link}</a></div>` : ''}
-      <div class="actions" style="margin-top: 20px;">
-        <button class="btn btn-success" onclick="installSkill('${skill.id}'); closeModal();">Install</button>
+    const platforms = data.platforms || [];
+    const versions = data.versions || [];
+    const escapedId = data.id.replace(/'/g, "\\'");
+    
+    content.innerHTML = `
+      <div class="skill-detail">
+        <h2>${data.displayName || data.id}</h2>
+        <div class="detail-name">${data.name}@${data.version}</div>
+        
+        <div class="detail-section">
+          <h3>Description</h3>
+          <div class="description-text">${data.description || 'No description'}</div>
+        </div>
+        
+        <div class="detail-section">
+          <h3>Details</h3>
+          <div class="detail-row"><strong>ID:</strong> ${data.id}</div>
+          <div class="detail-row"><strong>Version:</strong> ${data.version}</div>
+          ${data.license ? `<div class="detail-row"><strong>License:</strong> ${data.license}</div>` : ''}
+          ${data.author ? `<div class="detail-row"><strong>Author:</strong> ${data.author}</div>` : ''}
+          ${data.homepage ? `<div class="detail-row"><strong>Homepage:</strong> <a href="${data.homepage}" target="_blank">${data.homepage}</a></div>` : ''}
+          ${data.repository ? `<div class="detail-row"><strong>Repository:</strong> <a href="${data.repository}" target="_blank">${data.repository}</a></div>` : ''}
+        </div>
+        
+        <div class="detail-section">
+          <h3>Platforms</h3>
+          <div class="platform-tags">
+            ${platforms.length ? platforms.map(p => `<span class="platform-tag">${p}</span>`).join('') : '<span class="platform-tag">N/A</span>'}
+          </div>
+        </div>
+        
+        ${versions.length ? `
+        <div class="detail-section">
+          <h3>Versions (last ${versions.length})</h3>
+          <div class="version-list">
+            ${versions.slice().reverse().map(v => `
+              <div class="version-item">
+                <span>${v} ${v === data.version ? '<span class="version-latest">latest</span>' : ''}</span>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+        ` : ''}
+        
+        <div class="detail-actions">
+          <button class="btn btn-success" onclick="installSkill('${escapedId}')">Install</button>
+        </div>
       </div>
     `;
   } catch (err) {
-    modalBody.innerHTML = `<div class="loading">Error: ${err.message}</div>`;
+    content.innerHTML = `<div class="loading">Error: ${err.message}</div>`;
   }
 }
 
@@ -531,6 +588,15 @@ function closeModal() {
   document.getElementById('modal').classList.add('hidden');
 }
 
+function goBack() {
+  const target = state.previousView || 'skills';
+  // 更新导航按钮状态
+  document.querySelectorAll('.nav-btn').forEach(b => {
+    b.classList.toggle('active', b.dataset.view === target);
+  });
+  switchView(target);
+}
+
 // -----------------------------------------------------------------------------
 // Toast 通知
 // -----------------------------------------------------------------------------

package/gui/index.html

@@ -8,58 +8,20 @@
 </head>
 <body>
   <div id="app">
-    <!-- 侧边栏 -->
-    <aside class="sidebar">
-      <div class="logo">
-        <h1>📦 SkillMarket</h1>
+    <!-- 顶部导航栏 -->
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="topbar-logo">📦 SkillMarket</span>
+        <span class="topbar-version" id="gui-version">v1.3.16</span>
       </div>
-      <nav>
-        <div class="nav-group">
-          <div class="nav-section" onclick="toggleSection(this)">
-            <span>Browse</span>
-            <span class="nav-arrow">▼</span>
-          </div>
-          <div class="nav-items">
-            <button class="nav-btn active" data-view="skills">
-              <span class="icon">📋</span> Skills
-            </button>
-            <button class="nav-btn" data-view="installed">
-              <span class="icon">✅</span> Installed
-            </button>
-            <button class="nav-btn" data-view="platforms">
-              <span class="icon">💻</span> Platforms
-            </button>
-          </div>
-        </div>
-
-        <div class="nav-group">
-          <div class="nav-section" onclick="toggleSection(this)">
-            <span>Manage</span>
-            <span class="nav-arrow">▼</span>
-          </div>
-          <div class="nav-items">
-            <button class="nav-btn" data-view="admin">
-              <span class="icon">⚙️</span> Admin
-            </button>
-          </div>
-        </div>
-
-        <div class="nav-group">
-          <div class="nav-section" onclick="toggleSection(this)">
-            <span>Support</span>
-            <span class="nav-arrow">▼</span>
-          </div>
-          <div class="nav-items">
-            <button class="nav-btn" data-view="help">
-              <span class="icon">📖</span> Help
-            </button>
-          </div>
-        </div>
+      <nav class="topbar-nav">
+        <button class="nav-btn active" data-view="skills">📋 Skills</button>
+        <button class="nav-btn" data-view="installed">✅ Installed</button>
+        <button class="nav-btn" data-view="platforms">💻 Platforms</button>
+        <button class="nav-btn" data-view="admin">⚙️ Admin</button>
+        <button class="nav-btn" data-view="help">📖 Help</button>
       </nav>
-      <div class="sidebar-footer">
-        <span class="version" id="gui-version">v1.3.15</span>
-      </div>
-    </aside>
+    </header>
 
     <!-- 主内容区 -->
     <main class="main-content">
@@ -115,12 +77,19 @@
         <div id="admin-stats" class="admin-stats"></div>
         <div id="admin-skills-list" class="admin-skills-list"></div>
       </div>
+
+      <!-- Skill 详情视图 -->
+      <div id="view-skill-detail" class="view">
+        <div class="view-header">
+          <button class="btn btn-secondary" onclick="goBack()">← Back</button>
+        </div>
+        <div id="skill-detail-content"></div>
+      </div>
     </main>
 
-    <!-- Skill 详情模态框 -->
+    <!-- Admin 模态框 -->
     <div id="modal" class="modal hidden">
       <div class="modal-content">
-        <button class="modal-close">&times;</button>
         <div id="modal-body"></div>
       </div>
     </div>

package/gui/style.css

@@ -16,6 +16,7 @@
   --success: #4caf50;
   --warning: #ff9800;
   --danger: #f44336;
+  --topbar-height: 52px;
 }
 
 * {
@@ -29,98 +30,67 @@ body {
   background: var(--bg-primary);
   color: var(--text-secondary);
   display: flex;
+  flex-direction: column;
   height: 100vh;
   overflow: hidden;
 }
 
 /* -----------------------------------------------------------------------------
-   侧边栏
+   顶部导航栏
    ----------------------------------------------------------------------------- */
 
-.sidebar {
-  width: 240px;
+.topbar {
+  height: var(--topbar-height);
   background: var(--bg-secondary);
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  padding: 12px 0;
-}
-
-.logo {
-  padding: 0 16px 12px;
   border-bottom: 1px solid var(--border-color);
-  margin-bottom: 8px;
-}
-
-.logo h1 {
-  font-size: 1.2rem;
-  color: var(--accent);
-}
-
-nav {
-  flex: 1;
-  padding: 0 10px;
-}
-
-.nav-group {
-  margin-bottom: 2px;
-}
-
-.nav-group + .nav-group {
-  margin-top: 4px;
-}
-
-.nav-section {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 10px 12px 4px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  cursor: pointer;
-  user-select: none;
-  transition: color 0.2s;
+  padding: 0 16px;
+  gap: 16px;
+  flex-shrink: 0;
 }
 
-.nav-section:hover {
-  color: var(--text-secondary);
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
 }
 
-.nav-arrow {
-  font-size: 0.55rem;
-  transition: transform 0.2s;
+.topbar-logo {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--accent);
+  white-space: nowrap;
 }
 
-.nav-group.collapsed .nav-arrow {
-  transform: rotate(-90deg);
+.topbar-version {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  white-space: nowrap;
 }
 
-.nav-group.collapsed .nav-items {
-  display: none;
+.topbar-nav {
+  display: flex;
+  gap: 2px;
+  flex: 1;
 }
 
 .nav-btn {
-  width: 100%;
-  padding: 10px 14px;
-  margin-bottom: 2px;
+  padding: 8px 14px;
   background: transparent;
   border: none;
-  color: var(--text-secondary);
-  text-align: left;
+  color: var(--text-muted);
   cursor: pointer;
   border-radius: 6px;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+  white-space: nowrap;
 }
 
 .nav-btn:hover {
   background: var(--bg-hover);
+  color: var(--text-secondary);
 }
 
 .nav-btn.active {
@@ -128,20 +98,6 @@ nav {
   color: white;
 }
 
-.nav-btn .icon {
-  font-size: 1.1rem;
-}
-
-.sidebar-footer {
-  padding: 20px;
-  border-top: 1px solid var(--border-color);
-}
-
-.version {
-  color: var(--text-muted);
-  font-size: 0.85rem;
-}
-
 /* -----------------------------------------------------------------------------
    主内容区
    ----------------------------------------------------------------------------- */
@@ -149,7 +105,7 @@ nav {
 .main-content {
   flex: 1;
   overflow-y: auto;
-  min-height: 0;   /* flex 子项必须显式允许收缩 */
+  min-height: 0;
   padding: 20px 28px;
 }
 
@@ -159,8 +115,6 @@ nav {
 
 .view.active {
   display: block;
-  overflow-y: auto;
-  min-height: 0;
 }
 
 .view-header {
@@ -168,31 +122,39 @@ nav {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
+  gap: 12px;
 }
 
 .view-header h2 {
   font-size: 1.5rem;
   color: var(--text-secondary);
+  flex-shrink: 0;
 }
 
 .controls {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
 }
 
 .controls input,
 .controls select {
-  padding: 8px 12px;
+  padding: 7px 10px;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   color: var(--text-secondary);
   border-radius: 6px;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
 .controls input {
-  width: 250px;
+  width: 220px;
+}
+
+.controls input:focus,
+.controls select:focus {
+  outline: none;
+  border-color: var(--accent);
 }
 
 /* -----------------------------------------------------------------------------
@@ -200,12 +162,13 @@ nav {
    ----------------------------------------------------------------------------- */
 
 .btn {
-  padding: 8px 16px;
+  padding: 7px 14px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   transition: all 0.2s;
+  white-space: nowrap;
 }
 
 .btn-primary {
@@ -238,8 +201,8 @@ nav {
 }
 
 .btn-sm {
-  padding: 6px 12px;
-  font-size: 0.85rem;
+  padding: 5px 10px;
+  font-size: 0.8rem;
 }
 
 /* -----------------------------------------------------------------------------
@@ -249,15 +212,16 @@ nav {
 .skills-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
+  gap: 14px;
 }
 
 .skill-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: 10px;
-  padding: 20px;
+  padding: 18px;
   transition: transform 0.2s, border-color 0.2s;
+  cursor: pointer;
 }
 
 .skill-card:hover {
@@ -266,20 +230,20 @@ nav {
 }
 
 .skill-card h3 {
-  font-size: 1.1rem;
-  margin-bottom: 8px;
+  font-size: 1.05rem;
+  margin-bottom: 6px;
   color: var(--accent);
 }
 
 .skill-card .skill-id {
   color: var(--text-muted);
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   margin-bottom: 8px;
 }
 
 .skill-card p {
   color: var(--text-secondary);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   line-height: 1.5;
   margin-bottom: 12px;
 }
@@ -287,21 +251,28 @@ nav {
 .skill-card .platforms {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 5px;
   margin-bottom: 12px;
 }
 
 .platform-tag {
-  padding: 4px 8px;
+  padding: 3px 7px;
   background: var(--bg-card);
   border-radius: 4px;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--text-muted);
 }
 
 .skill-card .actions {
   display: flex;
-  gap: 8px;
+  gap: 6px;
+  pointer-events: auto;
+}
+
+/* Prevent card click when clicking action buttons */
+.skill-card .actions .btn {
+  position: relative;
+  z-index: 1;
 }
 
 /* -----------------------------------------------------------------------------
@@ -311,21 +282,21 @@ nav {
 .platforms-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
 .platform-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: 10px;
-  padding: 20px;
+  padding: 18px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .platform-card h3 {
-  font-size: 1.1rem;
+  font-size: 1.05rem;
   color: var(--text-secondary);
 }
 
@@ -348,7 +319,7 @@ nav {
    ----------------------------------------------------------------------------- */
 
 .pagination {
-  margin-top: 24px;
+  margin-top: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -356,7 +327,7 @@ nav {
 }
 
 .pagination button {
-  padding: 8px 12px;
+  padding: 7px 12px;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   color: var(--text-secondary);
@@ -375,64 +346,113 @@ nav {
 
 .pagination .page-info {
   color: var(--text-muted);
+  font-size: 0.85rem;
 }
 
 /* -----------------------------------------------------------------------------
-   模态框
+   Skill 详情视图
    ----------------------------------------------------------------------------- */
 
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
+.skill-detail {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 28px;
+}
+
+.skill-detail h2 {
+  font-size: 1.6rem;
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+
+.skill-detail .detail-name {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+
+.skill-detail .detail-section {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.skill-detail .detail-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.skill-detail .detail-section h3 {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
+}
+
+.skill-detail .detail-row {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 0.9rem;
 }
 
-.modal.hidden {
-  display: none;
+.skill-detail .detail-row strong {
+  color: var(--text-muted);
+  min-width: 100px;
+  flex-shrink: 0;
 }
 
-.modal-content {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 30px;
-  max-width: 600px;
-  width: 90%;
-  max-height: 80vh;
+.skill-detail .detail-row a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.skill-detail .detail-row a:hover {
+  text-decoration: underline;
+}
+
+.skill-detail .platform-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.skill-detail .version-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 200px;
   overflow-y: auto;
-  position: relative;
 }
 
-.modal-close {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: none;
-  border: none;
+.skill-detail .version-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: var(--bg-primary);
+  border-radius: 4px;
+  font-size: 0.85rem;
   color: var(--text-secondary);
-  font-size: 1.5rem;
-  cursor: pointer;
 }
 
-.modal-content h2 {
+.skill-detail .version-item .version-latest {
   color: var(--accent);
-  margin-bottom: 16px;
+  font-size: 0.75rem;
+  margin-left: 6px;
 }
 
-.modal-content .detail-row {
-  margin-bottom: 12px;
+.skill-detail .detail-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 16px;
+  flex-wrap: wrap;
 }
 
-.modal-content .detail-row strong {
-  color: var(--text-muted);
-  margin-right: 8px;
+.skill-detail .description-text {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
 }
 
 /* -----------------------------------------------------------------------------
@@ -441,9 +461,9 @@ nav {
 
 .toast {
   position: fixed;
-  bottom: 30px;
-  right: 30px;
-  padding: 16px 24px;
+  bottom: 24px;
+  right: 24px;
+  padding: 14px 22px;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 8px;
@@ -451,6 +471,7 @@ nav {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 2000;
   transition: all 0.3s;
+  font-size: 0.9rem;
 }
 
 .toast.hidden {
@@ -466,13 +487,50 @@ nav {
 }
 
 /* -----------------------------------------------------------------------------
-   加载动画
+   Admin 模态框
+   ----------------------------------------------------------------------------- */
+
+.modal {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal.hidden {
+  display: none;
+}
+
+.modal-content {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 28px;
+  min-width: 420px;
+  max-width: 560px;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.modal-content h2 {
+  font-size: 1.2rem;
+  color: var(--accent);
+  margin-bottom: 16px;
+}
+
+/* -----------------------------------------------------------------------------
+   加载 & 空状态
    ----------------------------------------------------------------------------- */
 
 .loading {
   text-align: center;
   padding: 40px;
   color: var(--text-muted);
+  font-size: 0.9rem;
 }
 
 /* -----------------------------------------------------------------------------
@@ -483,81 +541,81 @@ nav {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: 10px;
-  padding: 24px;
-  margin-bottom: 20px;
+  padding: 22px;
+  margin-bottom: 18px;
 }
 
 .help-section h3 {
   color: var(--accent);
-  font-size: 1.15rem;
-  margin-bottom: 12px;
+  font-size: 1.1rem;
+  margin-bottom: 10px;
 }
 
 .help-section > p {
   color: var(--text-secondary);
-  font-size: 0.9rem;
-  margin-bottom: 16px;
+  font-size: 0.85rem;
+  margin-bottom: 14px;
 }
 
 .help-steps {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }
 
 .help-step {
   background: var(--bg-card);
   border-radius: 8px;
-  padding: 16px;
+  padding: 14px;
 }
 
 .help-step > strong {
   color: var(--text-secondary);
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 }
 
 .help-step ol {
   margin: 0;
   padding-left: 20px;
   color: var(--text-secondary);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   line-height: 1.8;
 }
 
 .help-step pre {
   background: var(--bg-primary);
   color: var(--text-secondary);
-  padding: 12px;
+  padding: 10px;
   border-radius: 6px;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   overflow-x: auto;
-  margin: 8px 0 0;
+  margin: 6px 0 0;
 }
 
 .help-note {
   color: #ffcc00;
-  font-size: 0.85rem;
-  margin-top: 8px;
+  font-size: 0.82rem;
+  margin-top: 6px;
 }
 
 .help-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
 .help-table th {
   text-align: left;
-  padding: 10px 12px;
+  padding: 8px 10px;
   background: var(--bg-card);
   color: var(--text-secondary);
   border-bottom: 2px solid var(--border-color);
 }
 
 .help-table td {
-  padding: 10px 12px;
+  padding: 8px 10px;
   color: var(--text-secondary);
   border-bottom: 1px solid var(--border-color);
   vertical-align: top;
@@ -565,52 +623,31 @@ nav {
 
 .help-table code {
   background: var(--bg-card);
-  padding: 2px 6px;
+  padding: 2px 5px;
   border-radius: 3px;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 
 .help-table tr:hover td {
   background: var(--bg-hover);
 }
 
-/* -----------------------------------------------------------------------------
-   滚动条
-   ----------------------------------------------------------------------------- */
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--bg-primary);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--bg-card);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--bg-hover);
-}
-
 /* -----------------------------------------------------------------------------
    Admin 视图
    ----------------------------------------------------------------------------- */
 
 .admin-stats {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 14px;
-  margin-bottom: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 12px;
+  margin-bottom: 22px;
 }
 
 .admin-stat-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: 10px;
-  padding: 20px;
+  padding: 18px;
   text-align: center;
   transition: border-color 0.2s;
 }
@@ -620,16 +657,16 @@ nav {
 }
 
 .admin-stat-value {
-  font-size: 2rem;
+  font-size: 1.8rem;
   font-weight: 700;
   color: var(--accent);
   line-height: 1.2;
 }
 
 .admin-stat-label {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--text-muted);
-  margin-top: 6px;
+  margin-top: 5px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -637,14 +674,14 @@ nav {
 .admin-skills-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .admin-skill-row {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: 8px;
-  padding: 14px 18px;
+  padding: 12px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -662,95 +699,60 @@ nav {
 }
 
 .admin-skill-info h4 {
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   color: var(--accent);
   margin-bottom: 2px;
 }
 
 .admin-skill-info .admin-skill-meta {
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   color: var(--text-muted);
 }
 
 .admin-skill-info .admin-skill-desc {
-  font-size: 0.82rem;
+  font-size: 0.8rem;
   color: var(--text-secondary);
   margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 300px;
+  max-width: 280px;
 }
 
 .admin-actions {
   display: flex;
-  gap: 6px;
+  gap: 5px;
   flex-shrink: 0;
 }
 
 .admin-btn {
-  padding: 5px 10px;
+  padding: 4px 9px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.78rem;
+  font-size: 0.75rem;
   transition: all 0.2s;
   white-space: nowrap;
 }
 
-.admin-btn-deprecate {
-  background: #664400;
-  color: #ffcc00;
-}
-
-.admin-btn-deprecate:hover {
-  background: #886600;
-}
-
-.admin-btn-unpublish {
-  background: #661400;
-  color: #ff6666;
-}
-
-.admin-btn-unpublish:hover {
-  background: #881800;
-}
-
-.admin-btn-tag {
-  background: var(--bg-card);
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color);
-}
-
-.admin-btn-tag:hover {
-  background: var(--bg-hover);
-}
-
-.admin-btn-owner {
-  background: var(--bg-card);
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color);
-}
+.admin-btn-deprecate { background: #664400; color: #ffcc00; }
+.admin-btn-deprecate:hover { background: #886600; }
 
-.admin-btn-owner:hover {
-  background: var(--bg-hover);
-}
+.admin-btn-unpublish { background: #661400; color: #ff6666; }
+.admin-btn-unpublish:hover { background: #881800; }
 
-.admin-btn-access {
-  background: var(--bg-card);
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color);
-}
+.admin-btn-tag { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); }
+.admin-btn-tag:hover { background: var(--bg-hover); }
 
-.admin-btn-access:hover {
-  background: var(--bg-hover);
-}
+.admin-btn-owner { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); }
+.admin-btn-owner:hover { background: var(--bg-hover); }
 
-/* Admin modal sections */
+.admin-btn-access { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); }
+.admin-btn-access:hover { background: var(--bg-hover); }
 
 .admin-modal-section {
-  margin-bottom: 20px;
-  padding-bottom: 16px;
+  margin-bottom: 18px;
+  padding-bottom: 14px;
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -761,33 +763,33 @@ nav {
 }
 
 .admin-modal-section h3 {
-  font-size: 1rem;
+  font-size: 0.95rem;
   color: var(--text-secondary);
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .admin-input-group {
   display: flex;
   gap: 8px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   align-items: center;
 }
 
 .admin-input-group label {
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   color: var(--text-muted);
-  min-width: 70px;
+  min-width: 65px;
 }
 
 .admin-input-group input,
 .admin-input-group select {
   flex: 1;
-  padding: 7px 10px;
+  padding: 6px 9px;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
   color: var(--text-secondary);
   border-radius: 5px;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 
 .admin-input-group input:focus,
@@ -799,59 +801,71 @@ nav {
 .admin-tag-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin: 8px 0;
+  gap: 5px;
+  margin: 6px 0;
 }
 
 .admin-tag-item {
-  padding: 4px 10px;
+  padding: 3px 8px;
   background: var(--bg-card);
   border-radius: 4px;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
   color: var(--text-secondary);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
 }
 
 .admin-tag-item .tag-version {
   color: var(--text-muted);
 }
 
-.admin-warning-text {
-  color: #ffcc00;
-  font-size: 0.82rem;
-  margin-top: 4px;
-}
-
-.admin-danger-text {
-  color: #ff6666;
-  font-size: 0.82rem;
-  margin-top: 4px;
-}
+.admin-warning-text { color: #ffcc00; font-size: 0.8rem; margin-top: 4px; }
+.admin-danger-text { color: #ff6666; font-size: 0.8rem; margin-top: 4px; }
 
 .admin-checkbox-group {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .admin-checkbox-group label {
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   color: var(--text-secondary);
 }
 
 .admin-radio-group {
   display: flex;
-  gap: 16px;
-  margin-bottom: 10px;
+  gap: 14px;
+  margin-bottom: 8px;
 }
 
 .admin-radio-group label {
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   color: var(--text-secondary);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
+}
+
+/* -----------------------------------------------------------------------------
+   滚动条
+   ----------------------------------------------------------------------------- */
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-card);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--bg-hover);
 }

package/package.json

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