itismyskillmarket 1.3.26 → 1.3.27

package/dist/index.js

@@ -1575,9 +1575,10 @@ async function verifySkill(skillName) {
 
 // src/commands/ui.ts
 import { createServer } from "http";
-import { readFileSync as readFileSync2, existsSync as existsSync3 } from "fs";
-import { join as join3, extname, dirname } from "path";
+import { readFileSync as readFileSync2, existsSync as existsSync3, mkdirSync, rmSync } from "fs";
+import { join as join3, extname, dirname, basename } from "path";
 import { fileURLToPath as fileURLToPath3 } from "url";
+import AdmZip from "adm-zip";
 
 // src/commands/admin.ts
 import { execSync as execSync2 } from "child_process";
@@ -2537,6 +2538,117 @@ API_ROUTES.POST["/api/update"] = async (req, res, _url) => {
     jsonResponse(res, 500, { error: String(err) });
   }
 };
+var PROJECT_ROOT = join3(__dirname2, "..");
+API_ROUTES.POST["/api/upload"] = async (req, res, _url) => {
+  try {
+    const body = await parseBody(req);
+    const fileData = String(body.fileData || "");
+    const fileName = String(body.fileName || "upload.zip");
+    const skillNameOverride = body.skillNameOverride ? String(body.skillNameOverride).trim() : "";
+    if (!fileData) {
+      jsonResponse(res, 400, { error: "Missing fileData" });
+      return;
+    }
+    const buffer = Buffer.from(fileData, "base64");
+    if (buffer.length === 0) {
+      jsonResponse(res, 400, { error: "Empty file data" });
+      return;
+    }
+    const zip = new AdmZip(buffer);
+    const entries = zip.getEntries();
+    if (entries.length === 0) {
+      jsonResponse(res, 400, { error: "ZIP archive is empty" });
+      return;
+    }
+    const pkgEntry = entries.find((e) => e.entryName === "package.json" || e.entryName.endsWith("/package.json"));
+    let skillName = "";
+    let pkgInfo = {};
+    if (pkgEntry) {
+      try {
+        pkgInfo = JSON.parse(pkgEntry.getData().toString("utf-8"));
+        skillName = pkgInfo.skillmarket?.id || pkgInfo.name?.replace(/^@[^/]+\//, "") || "";
+      } catch {
+      }
+    }
+    if (skillNameOverride) {
+      skillName = skillNameOverride;
+    }
+    if (!skillName) {
+      const rootDirs = [...new Set(entries.map((e) => e.entryName.split("/")[0]))].filter(Boolean);
+      skillName = rootDirs.length === 1 ? rootDirs[0] : basename(fileName, ".zip");
+    }
+    skillName = skillName.replace(/[^a-zA-Z0-9_-]/g, "_").toLowerCase();
+    if (!skillName) skillName = "untitled-skill";
+    const skillDir = join3(PROJECT_ROOT, "skills", skillName);
+    if (existsSync3(skillDir)) {
+      rmSync(skillDir, { recursive: true, force: true });
+    }
+    mkdirSync(skillDir, { recursive: true });
+    zip.extractAllTo(skillDir, true);
+    const skillMdExists = existsSync3(join3(skillDir, "SKILL.md")) || entries.some((e) => e.entryName.endsWith("SKILL.md"));
+    const pkgJsonPath = join3(skillDir, "package.json");
+    if (existsSync3(pkgJsonPath)) {
+      try {
+        pkgInfo = JSON.parse(readFileSync2(pkgJsonPath, "utf-8"));
+      } catch {
+      }
+    }
+    const meta = pkgInfo?.skillmarket || {};
+    const result = {
+      skillName,
+      displayName: meta.displayName || pkgInfo.displayName || skillName,
+      version: pkgInfo.version || "0.0.0",
+      description: pkgInfo.description || meta.description || "",
+      platforms: meta.platforms || [],
+      hasPackageJson: existsSync3(pkgJsonPath),
+      hasSkillMd: skillMdExists,
+      fileCount: entries.length
+    };
+    jsonResponse(res, 200, result);
+  } catch (err) {
+    jsonResponse(res, 500, { error: String(err) });
+  }
+};
+API_ROUTES.POST["/api/upload/action"] = async (req, res, _url) => {
+  try {
+    const body = await parseBody(req);
+    const skillName = String(body.skillName || "");
+    const action = String(body.action || "");
+    if (!skillName) {
+      jsonResponse(res, 400, { error: "Missing skillName" });
+      return;
+    }
+    if (!["publish", "install", "both"].includes(action)) {
+      jsonResponse(res, 400, { error: 'action must be "publish", "install", or "both"' });
+      return;
+    }
+    const skillDir = join3(PROJECT_ROOT, "skills", skillName);
+    if (!existsSync3(skillDir)) {
+      jsonResponse(res, 404, { error: `Skill "${skillName}" not found in skills/ directory. Upload first.` });
+      return;
+    }
+    const results = {};
+    if (action === "publish" || action === "both") {
+      try {
+        await publishSkill(skillName);
+        results.publish = { success: true, message: `${skillName} published to npm` };
+      } catch (err) {
+        results.publish = { success: false, message: String(err) };
+      }
+    }
+    if (action === "install" || action === "both") {
+      try {
+        await installSkill(skillName, void 0, { force: true });
+        results.install = { success: true, message: `${skillName} installed locally` };
+      } catch (err) {
+        results.install = { success: false, message: String(err) };
+      }
+    }
+    jsonResponse(res, 200, { success: true, skillName, action, results });
+  } catch (err) {
+    jsonResponse(res, 500, { error: String(err) });
+  }
+};
 function serveStaticFile(res, filePath) {
   if (!existsSync3(filePath)) {
     res.writeHead(404, { "Content-Type": "text/plain" });

package/gui/app.js

@@ -27,6 +27,7 @@ const translations = {
     'nav.skills': 'Skills',
     'nav.installed': 'Installed',
     'nav.platforms': 'Platforms',
+    'nav.upload': 'Upload',
     'nav.admin': 'Admin',
     'nav.help': 'Help',
     'nav.back': 'Back',
@@ -205,6 +206,42 @@ const translations = {
     'lang.en': 'EN',
     'lang.zh': '中',
     
+    // Upload 视图
+    'upload.title': 'Upload Skill',
+    'upload.dropzoneText': 'Drop a skill .zip file here, or click to select',
+    'upload.dropzoneHint': 'The zip should contain SKILL.md and optionally package.json',
+    'upload.chooseFile': 'Choose File',
+    'upload.skillNameLabel': 'Skill Name',
+    'upload.skillNamePlaceholder': 'Auto-detected from zip, or override here',
+    'upload.uploadParse': '📤 Upload & Parse',
+    'upload.processing': 'Processing...',
+    'upload.parsing': 'Parsing skill archive...',
+    'upload.previewTitle': 'Skill Preview',
+    'upload.id': 'ID',
+    'upload.version': 'Version',
+    'upload.description': 'Description',
+    'upload.platforms': 'Platforms',
+    'upload.fileCount': 'Files',
+    'upload.hasPackageJson': 'package.json',
+    'upload.hasSkillMd': 'SKILL.md',
+    'upload.yes': 'Yes',
+    'upload.no': 'No',
+    'upload.actionPublish': '📦 Publish to npm',
+    'upload.actionInstall': '💻 Install Locally',
+    'upload.actionBoth': '✅ Both',
+    'upload.actionDiscard': '🗑 Discard',
+    'upload.publishing': 'Publishing {skillName}...',
+    'upload.installing': 'Installing {skillName}...',
+    'upload.bothStarted': 'Publishing & installing {skillName}...',
+    'upload.publishSuccess': '{skillName} published to npm successfully!',
+    'upload.installSuccess': '{skillName} installed locally!',
+    'upload.bothSuccess': '{skillName} published & installed!',
+    'upload.discarded': 'Upload discarded',
+    'upload.errorInvalidZip': 'Invalid or empty zip file',
+    'upload.errorNoFile': 'Please select a zip file first',
+    'upload.uploadError': 'Upload failed: {error}',
+    'upload.actionError': 'Action failed: {error}',
+
     // 通用错误
     'error.generic': 'Error',
   },
@@ -214,6 +251,7 @@ const translations = {
     'nav.skills': '技能',
     'nav.installed': '已安装',
     'nav.platforms': '平台',
+    'nav.upload': '上传',
     'nav.admin': '管理',
     'nav.help': '帮助',
     'nav.back': '返回',
@@ -392,6 +430,42 @@ const translations = {
     'lang.en': 'EN',
     'lang.zh': '中',
     
+    // Upload 视图
+    'upload.title': '上传 Skill',
+    'upload.dropzoneText': '将 skill 的 .zip 文件拖放到此处，或点击选择',
+    'upload.dropzoneHint': 'zip 应包含 SKILL.md 和可选的 package.json',
+    'upload.chooseFile': '选择文件',
+    'upload.skillNameLabel': 'Skill 名称',
+    'upload.skillNamePlaceholder': '自动从 zip 中检测，也可手动覆盖',
+    'upload.uploadParse': '📤 上传并解析',
+    'upload.processing': '处理中...',
+    'upload.parsing': '正在解析 skill 压缩包...',
+    'upload.previewTitle': 'Skill 预览',
+    'upload.id': 'ID',
+    'upload.version': '版本',
+    'upload.description': '描述',
+    'upload.platforms': '支持平台',
+    'upload.fileCount': '文件数',
+    'upload.hasPackageJson': 'package.json',
+    'upload.hasSkillMd': 'SKILL.md',
+    'upload.yes': '是',
+    'upload.no': '否',
+    'upload.actionPublish': '📦 发布到 npm',
+    'upload.actionInstall': '💻 安装到本地',
+    'upload.actionBoth': '✅ 两者都做',
+    'upload.actionDiscard': '🗑 丢弃',
+    'upload.publishing': '正在发布 {skillName}...',
+    'upload.installing': '正在安装 {skillName}...',
+    'upload.bothStarted': '正在发布并安装 {skillName}...',
+    'upload.publishSuccess': '{skillName} 已成功发布到 npm！',
+    'upload.installSuccess': '{skillName} 已安装到本地！',
+    'upload.bothSuccess': '{skillName} 已发布并安装！',
+    'upload.discarded': '上传已丢弃',
+    'upload.errorInvalidZip': '无效或空的 zip 文件',
+    'upload.errorNoFile': '请先选择一个 zip 文件',
+    'upload.uploadError': '上传失败：{error}',
+    'upload.actionError': '操作失败：{error}',
+
     // 通用错误
     'error.generic': '错误',
   }
@@ -454,12 +528,14 @@ function applyI18nToStaticElements() {
   const navSkills = document.querySelector('.nav-btn[data-view="skills"]');
   const navInstalled = document.querySelector('.nav-btn[data-view="installed"]');
   const navPlatforms = document.querySelector('.nav-btn[data-view="platforms"]');
+  const navUpload = document.querySelector('.nav-btn[data-view="upload"]');
   const navAdmin = document.querySelector('.nav-btn[data-view="admin"]');
   const navHelp = document.querySelector('.nav-btn[data-view="help"]');
   
   if (navSkills) navSkills.innerHTML = `📋 ${t('nav.skills')}`;
   if (navInstalled) navInstalled.innerHTML = `✅ ${t('nav.installed')}`;
   if (navPlatforms) navPlatforms.innerHTML = `💻 ${t('nav.platforms')}`;
+  if (navUpload) navUpload.innerHTML = `📤 ${t('nav.upload')}`;
   if (navAdmin) navAdmin.innerHTML = `⚙️ ${t('nav.admin')}`;
   if (navHelp) navHelp.innerHTML = `📖 ${t('nav.help')}`;
   
@@ -470,6 +546,7 @@ function applyI18nToStaticElements() {
     { selector: '#view-platforms .view-header h2', key: 'title.platforms' },
     { selector: '#view-help .view-header h2', key: 'title.help' },
     { selector: '#view-admin .view-header h2', key: 'title.admin' },
+    { selector: '#view-upload .view-header h2', key: 'upload.title' },
   ];
   
   titles.forEach(({ selector, key }) => {
@@ -564,6 +641,9 @@ function reRenderCurrentView() {
     case 'help':
       loadHelp();
       break;
+    case 'upload':
+      // Upload 视图不需要重新加载
+      break;
     case 'admin':
       loadAdminDashboard();
       break;
@@ -581,6 +661,7 @@ document.addEventListener('DOMContentLoaded', () => {
   initializeNavigation();
   initializeControls();
   initializeCollapsibleSections();
+  initializeUploadControls();
   loadVersion();
   loadSkills();
 });
@@ -650,6 +731,9 @@ function switchView(view) {
       case 'help':
         loadHelp();
         break;
+      case 'upload':
+        resetUploadView();
+        break;
       case 'admin':
         loadAdminDashboard();
         break;
@@ -1806,3 +1890,258 @@ async function execAdminAccess(skillId) {
     showToast(`${t('error.generic')}: ${err.message}`, 'error');
   }
 }
+
+// -----------------------------------------------------------------------------
+// Upload 视图
+// -----------------------------------------------------------------------------
+
+/** Upload 状态 */
+const uploadState = {
+  skillName: '',
+  file: null,
+  data: null, // Parsed result from backend
+};
+
+/** 初始化 Upload 控件 */
+function initializeUploadControls() {
+  const dropzone = document.getElementById('upload-dropzone');
+  const fileInput = document.getElementById('upload-file-input');
+  const selectBtn = document.getElementById('upload-select-btn');
+  const submitBtn = document.getElementById('upload-submit-btn');
+  const skillNameInput = document.getElementById('upload-skill-name');
+
+  if (!dropzone) return;
+
+  // 文件选择
+  selectBtn.addEventListener('click', () => fileInput.click());
+  fileInput.addEventListener('change', (e) => {
+    if (e.target.files.length > 0) {
+      uploadState.file = e.target.files[0];
+      submitBtn.disabled = false;
+    }
+  });
+
+  // 拖拽上传
+  dropzone.addEventListener('click', () => fileInput.click());
+
+  dropzone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropzone.classList.add('drag-over');
+  });
+
+  dropzone.addEventListener('dragleave', () => {
+    dropzone.classList.remove('drag-over');
+  });
+
+  dropzone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropzone.classList.remove('drag-over');
+    if (e.dataTransfer.files.length > 0) {
+      uploadState.file = e.dataTransfer.files[0];
+      submitBtn.disabled = false;
+    }
+  });
+
+  // Upload & Parse
+  submitBtn.addEventListener('click', () => {
+    if (!uploadState.file) {
+      showToast(t('upload.errorNoFile'), 'error');
+      return;
+    }
+    // Use skill name override if provided
+    const override = skillNameInput.value.trim();
+    handleUpload(uploadState.file, override || undefined);
+  });
+
+  // Action buttons
+  document.getElementById('upload-action-publish').addEventListener('click', () => {
+    executeUploadAction('publish');
+  });
+  document.getElementById('upload-action-install').addEventListener('click', () => {
+    executeUploadAction('install');
+  });
+  document.getElementById('upload-action-both').addEventListener('click', () => {
+    executeUploadAction('both');
+  });
+  document.getElementById('upload-action-discard').addEventListener('click', () => {
+    resetUploadView();
+    showToast(t('upload.discarded'), 'info');
+  });
+}
+
+/** 重置 Upload 视图到 Phase 1 */
+function resetUploadView() {
+  uploadState.file = null;
+  uploadState.data = null;
+  uploadState.skillName = '';
+  document.getElementById('upload-phase1').classList.remove('hidden');
+  document.getElementById('upload-phase2').classList.add('hidden');
+  document.getElementById('upload-submit-btn').disabled = true;
+  document.getElementById('upload-progress').classList.add('hidden');
+  document.getElementById('upload-file-input').value = '';
+  document.getElementById('upload-skill-name').value = '';
+}
+
+/** 上传 zip 到后端 */
+async function handleUpload(file, skillNameOverride) {
+  const submitBtn = document.getElementById('upload-submit-btn');
+  const progress = document.getElementById('upload-progress');
+  const progressFill = document.getElementById('upload-progress-fill');
+  const progressText = document.getElementById('upload-progress-text');
+
+  submitBtn.disabled = true;
+  progress.classList.remove('hidden');
+  progressFill.style.width = '30%';
+  progressText.textContent = t('upload.processing');
+
+  try {
+    // Read file as base64
+    const reader = new FileReader();
+    const base64 = await new Promise((resolve, reject) => {
+      reader.onload = () => {
+        // Remove data URL prefix
+        const result = reader.result;
+        const commaIndex = result.indexOf(',');
+        resolve(commaIndex >= 0 ? result.slice(commaIndex + 1) : result);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+
+    progressFill.style.width = '60%';
+    progressText.textContent = t('upload.parsing');
+
+    // Send to backend
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        fileData: base64,
+        fileName: file.name,
+        skillNameOverride: skillNameOverride || undefined,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error) {
+      showToast(t('upload.uploadError', { error: result.error }), 'error');
+      resetUploadView();
+      return;
+    }
+
+    progressFill.style.width = '100%';
+    progressText.textContent = '✅ Done';
+
+    uploadState.data = result;
+    uploadState.skillName = skillNameOverride || result.skillName;
+
+    // Switch to preview phase
+    setTimeout(() => {
+      document.getElementById('upload-phase1').classList.add('hidden');
+      document.getElementById('upload-phase2').classList.remove('hidden');
+      progress.classList.add('hidden');
+      renderUploadPreview(result);
+    }, 400);
+  } catch (err) {
+    showToast(t('upload.uploadError', { error: err.message }), 'error');
+    resetUploadView();
+  }
+}
+
+/** 渲染 skill 预览卡片 */
+function renderUploadPreview(data) {
+  const container = document.getElementById('upload-preview');
+
+  const platformsHtml = data.platforms && data.platforms.length
+    ? data.platforms.map(p => `<span class="platform-tag">${p}</span>`).join('')
+    : `<span style="color: var(--text-muted); font-size: 0.85rem;">N/A</span>`;
+
+  container.innerHTML = `
+    <h2>${data.displayName || data.skillName}</h2>
+    <div class="upload-preview-id">${data.skillName}@${data.version}</div>
+
+    <div class="upload-preview-section">
+      <h3>${t('upload.description')}</h3>
+      <p>${data.description || t('detail.noDescription')}</p>
+    </div>
+
+    <div class="upload-preview-section">
+      <h3>${t('upload.platforms')}</h3>
+      <div style="display:flex;flex-wrap:wrap;gap:5px;">${platformsHtml}</div>
+    </div>
+
+    <div class="upload-preview-section">
+      <h3>Validation</h3>
+      <div>
+        <span class="upload-preview-badge ${data.hasPackageJson ? 'success' : 'warning'}">
+          📦 ${t('upload.hasPackageJson')}: ${data.hasPackageJson ? t('upload.yes') : t('upload.no')}
+        </span>
+        <span class="upload-preview-badge ${data.hasSkillMd ? 'success' : 'warning'}">
+          📄 ${t('upload.hasSkillMd')}: ${data.hasSkillMd ? t('upload.yes') : t('upload.no')}
+        </span>
+      </div>
+    </div>
+
+    <div class="upload-preview-section" style="border-bottom:none;margin-bottom:0;padding-bottom:0;">
+      <h3>Stats</h3>
+      <div class="upload-preview-stats">
+        <div class="upload-preview-stat">
+          <div class="upload-preview-stat-value">${data.fileCount}</div>
+          <div class="upload-preview-stat-label">${t('upload.fileCount')}</div>
+        </div>
+        <div class="upload-preview-stat">
+          <div class="upload-preview-stat-value">${data.version}</div>
+          <div class="upload-preview-stat-label">${t('upload.version')}</div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/** 执行上传后的操作 */
+async function executeUploadAction(action) {
+  if (!uploadState.data || !uploadState.skillName) {
+    showToast('No skill uploaded. Please upload first.', 'error');
+    return;
+  }
+
+  const actionLabel = { publish: 'upload.publishing', install: 'upload.installing', both: 'upload.bothStarted' };
+  const successMsg = { publish: 'upload.publishSuccess', install: 'upload.installSuccess', both: 'upload.bothSuccess' };
+
+  showToast(t(actionLabel[action], { skillName: uploadState.skillName }), 'info');
+
+  try {
+    const response = await fetch('/api/upload/action', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        skillName: uploadState.skillName,
+        action: action,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error) {
+      showToast(t('upload.actionError', { error: result.error }), 'error');
+      return;
+    }
+
+    // Check for individual operation results
+    const hasError = Object.values(result.results || {}).some(r => !r.success);
+    if (hasError) {
+      const errors = Object.entries(result.results || {})
+        .filter(([, r]) => !r.success)
+        .map(([k, r]) => `${k}: ${r.message}`)
+        .join('; ');
+      showToast(`⚠️ ${errors}`, 'error');
+      return;
+    }
+
+    showToast(t(successMsg[action], { skillName: uploadState.skillName }), 'success');
+    resetUploadView();
+  } catch (err) {
+    showToast(t('upload.actionError', { error: err.message }), 'error');
+  }
+}

package/gui/index.html

@@ -18,6 +18,7 @@
         <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="upload">📤 Upload</button>
         <button class="nav-btn" data-view="admin">⚙️ Admin</button>
         <button class="nav-btn" data-view="help">📖 Help</button>
      </nav>
@@ -94,6 +95,45 @@
         <div id="admin-skills-list" class="admin-skills-list"></div>
       </div>
 
+      <!-- Upload 视图 -->
+      <div id="view-upload" class="view">
+        <div class="view-header">
+          <h2>Upload Skill</h2>
+        </div>
+        <!-- Phase 1: Upload -->
+        <div id="upload-phase1" class="upload-phase">
+          <div class="upload-dropzone" id="upload-dropzone">
+            <div class="upload-dropzone-icon">📦</div>
+            <p class="upload-dropzone-text">Drop a skill .zip file here, or click to select</p>
+            <p class="upload-dropzone-hint">The zip should contain SKILL.md and optionally package.json</p>
+            <input type="file" id="upload-file-input" accept=".zip" style="display:none">
+            <button id="upload-select-btn" class="btn btn-primary" style="margin-top:12px;">Choose File</button>
+          </div>
+          <div class="upload-skill-name-input">
+            <label for="upload-skill-name">Skill Name</label>
+            <input type="text" id="upload-skill-name" placeholder="Auto-detected from zip, or override here">
+          </div>
+          <button id="upload-submit-btn" class="btn btn-success" disabled style="align-self:center;margin-top:8px;">
+            📤 Upload &amp; Parse
+          </button>
+          <div id="upload-progress" class="upload-progress hidden">
+            <div class="upload-progress-bar"><div class="upload-progress-fill" id="upload-progress-fill"></div></div>
+            <span id="upload-progress-text">Processing...</span>
+          </div>
+        </div>
+        <!-- Phase 2: Preview -->
+        <div id="upload-phase2" class="upload-phase hidden">
+          <div id="upload-preview" class="upload-preview"></div>
+          <div class="upload-actions">
+            <button id="upload-action-publish" class="btn btn-primary">📦 Publish to npm</button>
+            <button id="upload-action-install" class="btn btn-success">💻 Install Locally</button>
+            <button id="upload-action-both" class="btn btn-primary" style="background:var(--accent)">✅ Both</button>
+            <button id="upload-action-discard" class="btn btn-secondary">🗑 Discard</button>
+          </div>
+        </div>
+        <!-- Phase 3: Result (toast-based) -->
+      </div>
+
       <!-- Skill 详情视图 -->
       <div id="view-skill-detail" class="view">
         <div class="view-header">

package/gui/style.css

@@ -914,6 +914,205 @@ body {
   gap: 5px;
 }
 
+/* -----------------------------------------------------------------------------
+   Upload 视图
+   ----------------------------------------------------------------------------- */
+
+.upload-phase {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.upload-phase.hidden {
+  display: none;
+}
+
+.upload-dropzone {
+  border: 2px dashed var(--border-color);
+  border-radius: 12px;
+  padding: 40px 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  background: var(--bg-secondary);
+}
+
+.upload-dropzone:hover,
+.upload-dropzone.drag-over {
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
+
+.upload-dropzone-icon {
+  font-size: 3rem;
+  margin-bottom: 10px;
+}
+
+.upload-dropzone-text {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.upload-dropzone-hint {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+.upload-skill-name-input {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.upload-skill-name-input label {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.upload-skill-name-input input {
+  padding: 9px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.upload-skill-name-input input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.upload-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.upload-progress.hidden {
+  display: none;
+}
+
+.upload-progress-bar {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-card);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.upload-progress-fill {
+  height: 100%;
+  width: 0%;
+  background: var(--accent);
+  border-radius: 4px;
+  transition: width 0.3s;
+}
+
+.upload-progress-text {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.upload-preview {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.upload-preview h2 {
+  font-size: 1.4rem;
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+
+.upload-preview .upload-preview-id {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 14px;
+}
+
+.upload-preview .upload-preview-section {
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.upload-preview .upload-preview-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.upload-preview .upload-preview-section h3 {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.upload-preview .upload-preview-section p,
+.upload-preview .upload-preview-section div {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.upload-preview .upload-preview-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 0.78rem;
+  margin-right: 6px;
+  margin-bottom: 4px;
+}
+
+.upload-preview .upload-preview-badge.success {
+  background: rgba(76, 175, 80, 0.2);
+  color: var(--success);
+}
+
+.upload-preview .upload-preview-badge.warning {
+  background: rgba(255, 152, 0, 0.2);
+  color: var(--warning);
+}
+
+.upload-preview .upload-preview-stats {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.upload-preview .upload-preview-stat {
+  text-align: center;
+  min-width: 60px;
+}
+
+.upload-preview .upload-preview-stat-value {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.upload-preview .upload-preview-stat-label {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+
+.upload-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 8px;
+}
+
 /* -----------------------------------------------------------------------------
    滚动条
    ----------------------------------------------------------------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itismyskillmarket",
-  "version": "1.3.26",
+  "version": "1.3.27",
   "description": "Cross-platform skill manager for AI coding tools",
   "type": "module",
   "bin": {
@@ -12,6 +12,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "adm-zip": "^0.5.17",
     "commander": "^12.0.0",
     "fs-extra": "^11.2.0"
   },