@weibaohui/skills-management 0.1.0

package/client/components/skills/helpers.ts

@@ -0,0 +1,108 @@
+/**
+ * Skills management helpers - ported from ntd
+ */
+
+// 根据文件扩展名返回对应图标颜色
+export function getFileColor(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase();
+  const colorMap: Record<string, string> = {
+    md: '#0891b2',
+    ts: '#3178c6',
+    tsx: '#3178c6',
+    js: '#f7df1e',
+    jsx: '#f7df1e',
+    json: '#f59e0b',
+    yaml: '#e11d48',
+    yml: '#e11d48',
+    toml: '#9333ea',
+    txt: '#94a3b8',
+    css: '#06b6d4',
+    html: '#ea580c',
+  };
+  return colorMap[ext || ''] || '#94a3b8';
+}
+
+// 格式化文件大小
+export function formatSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return '-';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// 格式化时间
+export function formatTime(isoString: string | null | undefined): string {
+  if (!isoString) return '-';
+  try {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    
+    if (days > 30) {
+      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'short', day: 'numeric' });
+    } else if (days > 0) {
+      return `${days}天前`;
+    } else if (hours > 0) {
+      return `${hours}小时前`;
+    } else if (minutes > 0) {
+      return `${minutes}分钟前`;
+    } else {
+      return '刚刚';
+    }
+  } catch {
+    return '-';
+  }
+}
+
+// 分割技能名称（category/shortName）
+export function splitSkillName(name: string): { category: string | null; shortName: string } {
+  if (!name.includes('/')) return { category: null, shortName: name };
+  const parts = name.split('/');
+  return { category: parts[0], shortName: parts.slice(1).join('/') };
+}
+
+// 规范化执行器名称
+export function normalizeExecutor(name: string): string {
+  return name.toLowerCase().replace(/[_\s-]/g, '');
+}
+
+// 渐变背景色生成器
+export function generateGradient(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0;
+  }
+  const h1 = Math.abs(hash) % 360;
+  const h2 = (h1 + 40) % 360;
+  return `linear-gradient(135deg, hsl(${h1}, 70%, 60%), hsl(${h2}, 60%, 50%))`;
+}
+
+// 执行器颜色映射
+export const EXECUTOR_COLORS: Record<string, string> = {
+  claudecode: '#7C3AED',
+  codebuddy: '#0891B2',
+  opencode: '#059669',
+  mobilecoder: '#DC2626',
+  atomcode: '#D97706',
+  hermes: '#7C3AED',
+  kimi: '#2563EB',
+  codex: '#10B981',
+  pi: '#F59E0B',
+  mimo: '#EC4899',
+  zhanlu: '#8B5CF6',
+  agents: '#6366F1',
+};
+
+// 导出任务状态
+export interface ExportTask {
+  id: string;
+  skillName: string;
+  status: 'pending' | 'exporting' | 'completed' | 'failed';
+  progress: number;
+  error?: string;
+  blobUrl?: string;
+}

package/client/hooks/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Skills management hooks - barrel export
+ */
+
+export { useSkillCatalog } from './useSkillCatalog';
+export type { SkillCatalogState, SkillMeta, SkillSourceMeta, InstalledSkillMeta, SkillDetailData } from './useSkillCatalog';
+export { useSkillDetail } from './useSkillDetail';
+export type { SkillDetailState, SkillDetailData as SkillDetailData2, SkillFileInfo, SkillMeta as SkillMeta2 } from './useSkillDetail';
+export { useSkillInstall } from './useSkillInstall';
+export type { SkillInstallState } from './useSkillInstall';

package/client/hooks/useSkillCatalog.ts

@@ -0,0 +1,201 @@
+/**
+ * useSkillCatalog — 技能市场目录（列表/分页/视图/筛选）数据族 hook
+ * Ported from ntd frontend/src/hooks/useSkillCatalog.ts
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const API = '/skills-management/api';
+const PAGE_SIZE = 30;
+
+export interface SkillSourceMeta {
+  source: string;
+  skills: number;
+  displayName: string;
+}
+
+export interface SkillMeta {
+  name: string;
+  shortName: string;
+  source: string;
+  description: string;
+  keywords: string[];
+  version?: string;
+  installed: boolean;
+  totalSize: number;
+}
+
+export interface InstalledSkillMeta {
+  name: string;
+  description: string;
+  path: string;
+  fileCount: number;
+  totalSize: number;
+  modifiedAt?: string;
+}
+
+export interface SkillDetailData {
+  name: string;
+  shortName: string;
+  dir: string;
+  isInstalled: boolean;
+  content: string;
+  contentWithMeta: string;
+  meta: Record<string, any>;
+  files: { path: string; size: number; modifiedAt: string }[];
+  fileCount: number;
+  totalSize: number;
+  modifiedAt?: string;
+}
+
+type ViewMode = 'browse-sources' | 'all-skills' | 'installed';
+
+export interface SkillCatalogState {
+  skills: SkillMeta[];
+  sources: SkillSourceMeta[];
+  installed: InstalledSkillMeta[];
+  loading: boolean;
+  total: number;
+  viewMode: ViewMode;
+  activeSource: string | null;
+  searchText: string;
+  filterSource: string;
+  browseSourcesPage: number;
+  browseSkillsPage: number;
+  allPage: number;
+  setSearchText: (v: string) => void;
+  setFilterSource: (v: string) => void;
+  setBrowseSourcesPage: (v: number) => void;
+  setBrowseSkillsPage: (v: number) => void;
+  setAllPage: (v: number) => void;
+  switchToSourceBrowse: () => void;
+  switchToAllSkills: () => void;
+  switchToInstalled: () => void;
+  enterSource: (sourceKey: string) => void;
+  backToSourceGrid: () => void;
+  refresh: () => void;
+}
+
+export function useSkillCatalog(): SkillCatalogState & { message: { error: (msg: string) => void } } {
+  // ── Data states ──
+  const [skills, setSkills] = useState<SkillMeta[]>([]);
+  const [sources, setSources] = useState<SkillSourceMeta[]>([]);
+  const [installed, setInstalled] = useState<InstalledSkillMeta[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // ── Pagination states ──
+  const [browseSourcesPage, setBrowseSourcesPage] = useState(1);
+  const [browseSkillsPage, setBrowseSkillsPage] = useState(1);
+  const [allPage, setAllPage] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  // ── View states ──
+  const [viewMode, setViewMode] = useState<ViewMode>('browse-sources');
+  const [activeSource, setActiveSource] = useState<string | null>(null);
+
+  // ── Filter states ──
+  const [searchText, setSearchText] = useState('');
+  const [filterSource, setFilterSource] = useState<string>('all');
+
+  // Request race guard
+  const reqGenRef = useRef(0);
+
+  // ── Load data ──
+  const loadData = useCallback(async () => {
+    const myGen = ++reqGenRef.current;
+    setLoading(true);
+    try {
+      const res = await fetch(API);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      if (myGen !== reqGenRef.current) return;
+
+      setSources(data.sources || []);
+      setSkills(data.market || []);
+      setInstalled(data.installed || []);
+      setTotal((data.market || []).length);
+    } catch (e: any) {
+      if (myGen !== reqGenRef.current) return;
+      console.error('Failed to load skills:', e);
+    } finally {
+      if (myGen === reqGenRef.current) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // ── View switchers ──
+  const switchToSourceBrowse = useCallback(() => {
+    setViewMode('browse-sources');
+    setActiveSource(null);
+    setSearchText('');
+    setBrowseSourcesPage(1);
+    setBrowseSkillsPage(1);
+  }, []);
+
+  const switchToAllSkills = useCallback(() => {
+    setViewMode('all-skills');
+    setActiveSource(null);
+    setFilterSource('all');
+    setSearchText('');
+    setAllPage(1);
+  }, []);
+
+  const switchToInstalled = useCallback(() => {
+    setViewMode('installed');
+    setActiveSource(null);
+    setSearchText('');
+  }, []);
+
+  const enterSource = useCallback((sourceKey: string) => {
+    setActiveSource(sourceKey);
+    setBrowseSkillsPage(1);
+    setSearchText('');
+  }, []);
+
+  const backToSourceGrid = useCallback(() => {
+    setActiveSource(null);
+    setBrowseSkillsPage(1);
+    setBrowseSourcesPage(1);
+  }, []);
+
+  const refresh = useCallback(() => {
+    loadData();
+  }, [loadData]);
+
+  // Simple message mock (DSH uses App.useApp())
+  const message = {
+    error: (msg: string) => console.error(msg),
+  };
+
+  return {
+    skills,
+    sources,
+    installed,
+    loading,
+    total,
+    viewMode,
+    activeSource,
+    searchText,
+    filterSource,
+    browseSourcesPage,
+    browseSkillsPage,
+    allPage,
+    setSearchText,
+    setFilterSource,
+    setBrowseSourcesPage,
+    setBrowseSkillsPage,
+    setAllPage,
+    switchToSourceBrowse,
+    switchToAllSkills,
+    switchToInstalled,
+    enterSource,
+    backToSourceGrid,
+    refresh,
+    message,
+  };
+}
+
+export { PAGE_SIZE as ALL_SKILLS_PAGE_SIZE };

package/client/hooks/useSkillDetail.ts

@@ -0,0 +1,89 @@
+/**
+ * useSkillDetail - Skill detail drawer state hook
+ */
+
+import { useRef, useState } from 'react';
+
+const API = '/skills-management/api';
+
+export interface SkillFileInfo {
+  path: string;
+  size: number;
+  modifiedAt: string;
+}
+
+export interface SkillDetailData {
+  name: string;
+  shortName: string;
+  dir: string;
+  isInstalled: boolean;
+  content: string;
+  contentWithMeta: string;
+  meta: Record<string, any>;
+  files: SkillFileInfo[];
+  fileCount: number;
+  totalSize: number;
+  modifiedAt?: string;
+}
+
+export interface SkillMeta {
+  name: string;
+  shortName: string;
+  source: string;
+  description: string;
+  keywords: string[];
+  version?: string;
+  installed: boolean;
+  totalSize: number;
+}
+
+export interface SkillDetailState {
+  selectedSkill: SkillMeta | null;
+  drawerOpen: boolean;
+  detail: SkillDetailData | null;
+  contentLoading: boolean;
+  openDetail: (skill: SkillMeta) => Promise<void>;
+  closeDetail: () => void;
+}
+
+export function useSkillDetail(): SkillDetailState {
+  const [selectedSkill, setSelectedSkill] = useState<SkillMeta | null>(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [detail, setDetail] = useState<SkillDetailData | null>(null);
+  const [contentLoading, setContentLoading] = useState(false);
+
+  const detailReqIdRef = useRef(0);
+
+  const openDetail = async (skill: SkillMeta) => {
+    const reqId = ++detailReqIdRef.current;
+    setSelectedSkill(skill);
+    setDrawerOpen(true);
+    setDetail(null);
+    setContentLoading(true);
+
+    try {
+      const res = await fetch(API + '/detail?name=' + encodeURIComponent(skill.name));
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const data = await res.json();
+      
+      if (reqId !== detailReqIdRef.current) return;
+      setDetail(data);
+    } catch (e) {
+      if (reqId !== detailReqIdRef.current) return;
+      console.error('Failed to load skill detail:', e);
+    } finally {
+      if (reqId === detailReqIdRef.current) setContentLoading(false);
+    }
+  };
+
+  const closeDetail = () => setDrawerOpen(false);
+
+  return {
+    selectedSkill,
+    drawerOpen,
+    detail,
+    contentLoading,
+    openDetail,
+    closeDetail,
+  };
+}

package/client/hooks/useSkillInstall.ts

@@ -0,0 +1,74 @@
+/**
+ * useSkillInstall - Skill install state hook
+ */
+
+import { useState, useCallback } from 'react';
+import { SkillMeta } from './useSkillDetail';
+
+const API = '/skills-management/api';
+
+export interface SkillInstallState {
+  installModalOpen: boolean;
+  installing: boolean;
+  installResult: { success: number; failed: number } | null;
+  openInstall: (skill: SkillMeta) => void;
+  closeInstall: () => void;
+  install: (skill: SkillMeta) => Promise<void>;
+}
+
+export function useSkillInstall(onDone?: () => void): SkillInstallState {
+  const [installModalOpen, setInstallModalOpen] = useState(false);
+  const [installing, setInstalling] = useState(false);
+  const [installResult, setInstallResult] = useState<{ success: number; failed: number } | null>(null);
+  const [targetSkill, setTargetSkill] = useState<SkillMeta | null>(null);
+
+  const openInstall = (skill: SkillMeta) => {
+    setTargetSkill(skill);
+    setInstallModalOpen(true);
+    setInstallResult(null);
+  };
+
+  const closeInstall = () => {
+    setInstallModalOpen(false);
+    setInstallResult(null);
+    setTargetSkill(null);
+  };
+
+  const install = async (skill: SkillMeta) => {
+    setInstalling(true);
+    setInstallResult(null);
+
+    try {
+      const res = await fetch(API + '/install', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: skill.name }),
+      });
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: 'Unknown error' }));
+        throw new Error(err.error || 'HTTP ' + res.status);
+      }
+
+      setInstallResult({ success: 1, failed: 0 });
+      console.log('Install success:', skill.shortName || skill.name);
+      onDone?.();
+      
+      setTimeout(() => { closeInstall(); }, 1500);
+    } catch (e) {
+      setInstallResult({ success: 0, failed: 1 });
+      console.error('Install failed:', e);
+    } finally {
+      setInstalling(false);
+    }
+  };
+
+  return {
+    installModalOpen,
+    installing,
+    installResult,
+    openInstall,
+    closeInstall,
+    install,
+  };
+}