huhaa-myskills 0.2.13 → 0.3.4

package/packages/web/package.json

@@ -1,20 +1,33 @@
 {
   "name": "@huhaa/web",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite --host 127.0.0.1 --port 11521",
     "build": "vite build",
-    "preview": "vite preview --host 127.0.0.1 --port 11522"
+    "preview": "vite preview --host 127.0.0.1 --port 11522",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
-    "vite": "^6.0.0",
-    "vue": "^3.5.13",
-    "pinia": "^2.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "fuse.js": "^7.0.0",
-    "markdown-it": "^14.1.0"
+    "lucide-react": "^0.460.0",
+    "markdown-it": "^14.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.5"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.0"
+  }
 }

package/packages/web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/packages/web/public/favicon-source.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="192" height="192" rx="48" fill="#7c3aed"/>
+  <text x="96" y="120" font-size="100" font-weight="bold" fill="white" text-anchor="middle" font-family="system-ui">🛠</text>
+</svg>

package/packages/web/src/App.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { reducer, initialState, type UIState } from './App'
+
+describe('App reducer 状态机（module × view）', () => {
+  it('editor 动作进入技能视图并重置 kind/选中（避免脏筛选）', () => {
+    const dirty: UIState = {
+      ...initialState,
+      view: 'dashboard',
+      kindFilter: 'skill',
+      selectedId: 'abc',
+    }
+    const next = reducer(dirty, { type: 'editor', key: 'Cursor' })
+    expect(next.view).toBe('skills')
+    expect(next.editorFilter).toBe('Cursor')
+    expect(next.kindFilter).toBeNull()
+    expect(next.selectedId).toBeNull()
+  })
+
+  it('editor=null 表示全部技能', () => {
+    expect(reducer(initialState, { type: 'editor', key: null }).editorFilter).toBeNull()
+  })
+
+  it('dashboard / settings 切换视图', () => {
+    expect(reducer(initialState, { type: 'settings' }).view).toBe('settings')
+    const back = reducer(reducer(initialState, { type: 'settings' }), { type: 'dashboard' })
+    expect(back.view).toBe('dashboard')
+  })
+
+  it('query / kind / select 只改对应字段', () => {
+    expect(reducer(initialState, { type: 'query', query: 'mcp' }).query).toBe('mcp')
+    expect(reducer(initialState, { type: 'kind', kind: 'skill' }).kindFilter).toBe('skill')
+    expect(reducer(initialState, { type: 'select', id: 'x1' }).selectedId).toBe('x1')
+  })
+
+  it('module 切换不丢其它状态', () => {
+    const s = reducer({ ...initialState, query: 'q' }, { type: 'module', module: 'commands' })
+    expect(s.module).toBe('commands')
+    expect(s.query).toBe('q')
+  })
+})

package/packages/web/src/App.tsx

@@ -0,0 +1,177 @@
+import { useCallback, useEffect, useReducer, useState } from 'react'
+import { Sidebar } from '@/components/layout/Sidebar'
+import { Topbar, type ModuleKey } from '@/components/layout/Topbar'
+import { DashboardView } from '@/components/views/DashboardView'
+import { SkillsView } from '@/components/views/SkillsView'
+import { SettingsView } from '@/components/views/SettingsView'
+import { OtherSkillsView } from '@/components/views/OtherSkillsView'
+import { ComingSoon } from '@/components/ComingSoon'
+import { useLiveReload } from '@/hooks/useLiveReload'
+import { fetchSkills, fetchStats, reload } from '@/lib/api'
+import type { SkillItem, Stats } from '@/types'
+
+export type View = 'dashboard' | 'skills' | 'otherSkills' | 'settings'
+
+export interface UIState {
+  module: ModuleKey
+  view: View
+  editorFilter: string | null
+  kindFilter: string | null
+  query: string
+  selectedId: string | null
+  otherSkillsQuery: string
+}
+
+export type Action =
+  | { type: 'module'; module: ModuleKey }
+  | { type: 'dashboard' }
+  | { type: 'settings' }
+  | { type: 'otherSkills' }
+  | { type: 'otherSkillsQuery'; query: string }
+  | { type: 'editor'; key: string | null }
+  | { type: 'query'; query: string }
+  | { type: 'kind'; kind: string | null }
+  | { type: 'select'; id: string }
+
+export const initialState: UIState = {
+  module: 'skills',
+  view: 'dashboard',
+  editorFilter: null,
+  kindFilter: null,
+  query: '',
+  selectedId: null,
+  otherSkillsQuery: '',
+}
+
+export function reducer(state: UIState, action: Action): UIState {
+  switch (action.type) {
+    case 'module':
+      return { ...state, module: action.module }
+    case 'dashboard':
+      return { ...state, view: 'dashboard' }
+    case 'settings':
+      return { ...state, view: 'settings' }
+    case 'otherSkills':
+      return { ...state, view: 'otherSkills' }
+    case 'otherSkillsQuery':
+      return { ...state, otherSkillsQuery: action.query }
+    case 'editor':
+      // 切换来源：进入技能视图，重置 kind/选中
+      return { ...state, view: 'skills', editorFilter: action.key, kindFilter: null, selectedId: null }
+    case 'query':
+      return { ...state, query: action.query }
+    case 'kind':
+      return { ...state, kindFilter: action.kind }
+    case 'select':
+      return { ...state, selectedId: action.id }
+    default:
+      return state
+  }
+}
+
+export default function App() {
+  const [items, setItems] = useState<SkillItem[]>([])
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [reloading, setReloading] = useState(false)
+  const [ui, dispatch] = useReducer(reducer, initialState)
+
+  async function load() {
+    setLoading(true)
+    setError(null)
+    try {
+      const [skills, s] = await Promise.all([fetchSkills(), fetchStats()])
+      setItems(skills)
+      setStats(s)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '加载失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [])
+
+  // SSE 静默刷新：文件变更时不闪「加载中」，只更新数据
+  const refresh = useCallback(async () => {
+    try {
+      const [skills, s] = await Promise.all([fetchSkills(), fetchStats()])
+      setItems(skills)
+      setStats(s)
+    } catch {
+      // 静默：实时刷新失败不打断当前界面
+    }
+  }, [])
+  useLiveReload(refresh)
+
+  async function handleReload() {
+    setReloading(true)
+    try {
+      await reload()
+      await load()
+    } finally {
+      setReloading(false)
+    }
+  }
+
+  function renderMain() {
+    if (ui.module !== 'skills') {
+      return <ComingSoon title={ui.module === 'commands' ? '命令' : '编辑器'} />
+    }
+    if (loading) return <p className="text-body-sm text-muted-foreground">加载中…</p>
+    if (error) {
+      return (
+        <div className="detail border-destructive">
+          <p className="text-body-sm text-destructive">加载失败：{error}</p>
+        </div>
+      )
+    }
+    if (ui.view === 'dashboard') return <DashboardView stats={stats} items={items} />
+    if (ui.view === 'otherSkills')
+      return (
+        <OtherSkillsView
+          query={ui.otherSkillsQuery}
+          onQuery={(q) => dispatch({ type: 'otherSkillsQuery', query: q })}
+          selectedId={ui.selectedId}
+          onSelect={(id) => dispatch({ type: 'select', id })}
+        />
+      )
+    if (ui.view === 'settings') return <SettingsView />
+    return (
+      <SkillsView
+        items={items}
+        editorFilter={ui.editorFilter}
+        query={ui.query}
+        onQuery={(q) => dispatch({ type: 'query', query: q })}
+        kindFilter={ui.kindFilter}
+        onKind={(k) => dispatch({ type: 'kind', kind: k })}
+        selectedId={ui.selectedId}
+        onSelect={(id) => dispatch({ type: 'select', id })}
+      />
+    )
+  }
+
+  return (
+    <div className="app-shell">
+      <Topbar
+        module={ui.module}
+        onModule={(m) => dispatch({ type: 'module', module: m })}
+        onReload={handleReload}
+        reloading={reloading}
+      />
+      <Sidebar
+        view={ui.view}
+        editorFilter={ui.editorFilter}
+        stats={stats}
+        onDashboard={() => dispatch({ type: 'dashboard' })}
+        onSettings={() => dispatch({ type: 'settings' })}
+        onOtherSkills={() => dispatch({ type: 'otherSkills' })}
+        onEditor={(key) => dispatch({ type: 'editor', key })}
+      />
+      <main className="main-pane">{renderMain()}</main>
+    </div>
+  )
+}

package/packages/web/src/components/ComingSoon.tsx

@@ -0,0 +1,14 @@
+interface ComingSoonProps {
+  title: string
+}
+
+export function ComingSoon({ title }: ComingSoonProps) {
+  return (
+    <div className="grid h-full place-items-center text-muted-foreground">
+      <div className="text-center">
+        <p className="text-h4 text-foreground">{title}</p>
+        <p className="mt-1 text-body-sm">待开发，敬请期待</p>
+      </div>
+    </div>
+  )
+}

package/packages/web/src/components/layout/Sidebar.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Sidebar } from './Sidebar'
+import type { Stats } from '@/types'
+
+function statsWith(byEditor: Record<string, number>): Stats {
+  const total = Object.values(byEditor).reduce((a, b) => a + b, 0)
+  return {
+    total,
+    bySource: {},
+    byEditor,
+    byKind: {},
+    byCategory: {},
+    byBrand: {},
+  }
+}
+
+const noop = () => {}
+
+describe('Sidebar editor 导航（D2 + C6 临界缺口）', () => {
+  it('渲染真实 editor 项，(none) 不作首项且标注「未分类」', () => {
+    render(
+      <Sidebar
+        view="skills"
+        editorFilter={null}
+        stats={statsWith({ 'Claude Code': 3, Cursor: 1, '(none)': 2 })}
+        onDashboard={noop}
+        onSettings={noop}
+        onOtherSkills={noop}
+        onEditor={noop}
+      />
+    )
+    // 真实 editor 出现
+    expect(screen.getByText('Claude Code')).toBeInTheDocument()
+    expect(screen.getByText('Cursor')).toBeInTheDocument()
+    // (none) 桶渲染为「未分类」，绝不出现字面 "(none)"
+    expect(screen.getByText('未分类')).toBeInTheDocument()
+    expect(screen.queryByText('(none)')).toBeNull()
+  })
+
+  it('byEditor 全为 (none) 时不产出垃圾首项，只显示「未分类」', () => {
+    render(
+      <Sidebar
+        view="skills"
+        editorFilter={null}
+        stats={statsWith({ '(none)': 5 })}
+        onDashboard={noop}
+        onSettings={noop}
+        onOtherSkills={noop}
+        onEditor={noop}
+      />
+    )
+    expect(screen.queryByText('(none)')).toBeNull()
+    expect(screen.getByText('未分类')).toBeInTheDocument()
+  })
+
+  it('点击 editor 项回传其 key', () => {
+    const onEditor = vi.fn()
+    render(
+      <Sidebar
+        view="skills"
+        editorFilter={null}
+        stats={statsWith({ 'Claude Code': 3 })}
+        onDashboard={noop}
+        onSettings={noop}
+        onOtherSkills={noop}
+        onEditor={onEditor}
+      />
+    )
+    fireEvent.click(screen.getByText('Claude Code'))
+    expect(onEditor).toHaveBeenCalledWith('Claude Code')
+  })
+})

package/packages/web/src/components/layout/Sidebar.tsx

@@ -0,0 +1,114 @@
+import { LayoutDashboard, Settings, Layers, Sparkles } from 'lucide-react'
+import { cn } from '@/lib/cn'
+import { getEditorMeta, isNoneEditor } from '@/lib/editors'
+import type { Stats } from '@/types'
+
+interface SidebarProps {
+  view: 'dashboard' | 'skills' | 'otherSkills' | 'settings'
+  editorFilter: string | null
+  stats: Stats | null
+  onDashboard: () => void
+  onSettings: () => void
+  onOtherSkills: () => void
+  /** key=null 表示「全部技能」 */
+  onEditor: (key: string | null) => void
+}
+
+export function Sidebar({
+  view,
+  editorFilter,
+  stats,
+  onDashboard,
+  onSettings,
+  onOtherSkills,
+  onEditor,
+}: SidebarProps) {
+  const byEditor = stats?.byEditor ?? {}
+
+  // 真实 editor 项（过滤 (none)），按数量降序
+  const editors = Object.entries(byEditor)
+    .filter(([k]) => !isNoneEditor(k))
+    .sort((a, b) => b[1] - a[1])
+  const noneCount = Object.entries(byEditor).find(([k]) => isNoneEditor(k))?.[1] ?? 0
+  const total = stats?.total ?? 0
+
+  const rowCls = (active: boolean) =>
+    cn(
+      'flex items-center justify-between gap-2 rounded-md px-3 py-2 text-body-sm transition-colors',
+      active
+        ? 'bg-primary-soft text-primary'
+        : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+    )
+
+  return (
+    <aside className="sidebar">
+      <button onClick={onDashboard} className={rowCls(view === 'dashboard')}>
+        <span className="flex items-center gap-2">
+          <LayoutDashboard size={16} />
+          仪表盘
+        </span>
+      </button>
+
+      <button onClick={onOtherSkills} className={rowCls(view === 'otherSkills')}>
+        <span className="flex items-center gap-2">
+          <Sparkles size={16} />
+          其它技能
+        </span>
+      </button>
+
+      {/* 技能来源 (Editor) */}
+      <p className="mt-3 px-3 text-caption text-muted-foreground/70">技能来源</p>
+
+      <button
+        onClick={() => onEditor(null)}
+        className={rowCls(view === 'skills' && editorFilter === null)}
+      >
+        <span className="flex items-center gap-2">
+          <Layers size={16} />
+          全部来源
+        </span>
+        <span className="text-caption opacity-80">{total}</span>
+      </button>
+
+      {editors.map(([key, count]) => {
+        const meta = getEditorMeta(key)
+        const Icon = meta.icon
+        const active = view === 'skills' && editorFilter === key
+        return (
+          <button key={key} onClick={() => onEditor(key)} className={rowCls(active)}>
+            <span className="flex min-w-0 items-center gap-2">
+              <span
+                className="grid h-5 w-5 shrink-0 place-items-center rounded"
+                style={{ backgroundColor: meta.color + '1A', color: meta.color }}
+              >
+                <Icon size={13} />
+              </span>
+              <span className="truncate">{meta.label}</span>
+            </span>
+            <span className="text-caption opacity-80">{count}</span>
+          </button>
+        )
+      })}
+
+      {noneCount > 0 && (
+        <button
+          onClick={() => onEditor('(none)')}
+          className={rowCls(view === 'skills' && editorFilter === '(none)')}
+        >
+          <span className="flex items-center gap-2 text-muted-foreground">
+            <Layers size={16} />
+            未分类
+          </span>
+          <span className="text-caption opacity-80">{noneCount}</span>
+        </button>
+      )}
+
+      <button onClick={onSettings} className={cn(rowCls(view === 'settings'), 'mt-auto')}>
+        <span className="flex items-center gap-2">
+          <Settings size={16} />
+          设置
+        </span>
+      </button>
+    </aside>
+  )
+}

package/packages/web/src/components/layout/Topbar.tsx

@@ -0,0 +1,74 @@
+import { Moon, Sun, RefreshCw, Boxes } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useTheme } from '@/hooks/useTheme'
+import { cn } from '@/lib/cn'
+
+export type ModuleKey = 'skills' | 'commands' | 'editor'
+
+const MODULES: { key: ModuleKey; label: string; soon?: boolean }[] = [
+  { key: 'skills', label: '技能 Skills' },
+  { key: 'commands', label: '命令', soon: true },
+  { key: 'editor', label: '编辑器', soon: true },
+]
+
+interface TopbarProps {
+  module: ModuleKey
+  onModule: (m: ModuleKey) => void
+  onReload: () => void
+  reloading: boolean
+}
+
+export function Topbar({ module, onModule, onReload, reloading }: TopbarProps) {
+  const { theme, toggle } = useTheme()
+
+  return (
+    <header className="topbar">
+      {/* 品牌 */}
+      <div className="flex items-center gap-2 pr-2">
+        <span className="grid h-8 w-8 place-items-center rounded-md bg-primary text-primary-foreground">
+          <Boxes size={18} />
+        </span>
+        <span className="text-body-sm font-bold text-foreground">HuHaa</span>
+      </div>
+
+      {/* 模块标签 */}
+      <nav className="flex items-center gap-1">
+        {MODULES.map((m) => {
+          const active = module === m.key
+          return (
+            <button
+              key={m.key}
+              disabled={m.soon}
+              onClick={() => !m.soon && onModule(m.key)}
+              className={cn(
+                'rounded-md px-3 py-1.5 text-body-sm transition-colors',
+                active
+                  ? 'bg-primary-soft text-primary'
+                  : m.soon
+                    ? 'cursor-not-allowed text-muted-foreground/60'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )}
+            >
+              {m.label}
+              {m.soon && <span className="ml-1 text-caption opacity-70">待开发</span>}
+            </button>
+          )
+        })}
+      </nav>
+
+      <div className="ml-auto flex items-center gap-1">
+        <Button variant="ghost" size="icon" onClick={onReload} aria-label="重新扫描">
+          <RefreshCw size={18} className={reloading ? 'animate-spin' : undefined} />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={toggle}
+          aria-label={theme === 'dark' ? '切换到亮色' : '切换到暗色'}
+        >
+          {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
+        </Button>
+      </div>
+    </header>
+  )
+}

package/packages/web/src/components/ui/ActionButton.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { cn } from '@/lib/cn'
+
+interface ActionButtonProps {
+  label: string
+  /** 返回 {ok} 的异步动作（copy/open）；ok=false 或抛错都显示失败 */
+  onAction: () => Promise<{ ok: boolean; error?: string }>
+}
+
+type Status = 'idle' | 'ok' | 'err'
+
+/** 执行一次性动作并短暂反馈结果（用于复制/打开）。 */
+export function ActionButton({ label, onAction }: ActionButtonProps) {
+  const [status, setStatus] = useState<Status>('idle')
+  const [busy, setBusy] = useState(false)
+
+  async function run() {
+    setBusy(true)
+    try {
+      const r = await onAction()
+      setStatus(r.ok ? 'ok' : 'err')
+    } catch {
+      setStatus('err')
+    } finally {
+      setBusy(false)
+      setTimeout(() => setStatus('idle'), 1400)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={run}
+      disabled={busy}
+      className={cn(
+        'rounded-md border px-2.5 py-1 text-caption transition-colors disabled:opacity-60',
+        status === 'ok'
+          ? 'border-primary bg-primary-soft text-primary'
+          : status === 'err'
+            ? 'border-destructive text-destructive'
+            : 'border-border bg-card text-muted-foreground hover:text-foreground'
+      )}
+    >
+      {status === 'ok' ? '✓ ' : status === 'err' ? '✗ ' : ''}
+      {label}
+    </button>
+  )
+}

package/packages/web/src/components/ui/button.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/cn'
+
+// shadcn 风格按钮：用 cva 描述变体，token 全部来自 Tailwind 主题。
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-border bg-transparent hover:bg-muted hover:text-foreground',
+        ghost: 'hover:bg-muted hover:text-foreground',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 px-3',
+        lg: 'h-10 px-6',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+)
+Button.displayName = 'Button'
+
+export { buttonVariants }