dsh-skill-hub 0.2.6 → 0.3.0

package/src/client/panel/MarketView.tsx

@@ -5,10 +5,10 @@
  * update-all actions and the repo scan result with the importable checklist.
  */
 
-import { Fragment, type JSX } from 'react'
+import { Fragment, useEffect, useMemo, useState, type JSX } from 'react'
 import { tt } from '../helpers.ts'
 import { MARKET_CATALOG } from '../market-catalog.ts'
-import type { MarketSourceRecord } from '../../protocol.ts'
+import type { MarketSourceRecord, RepoSkillEntry } from '../../protocol.ts'
 import { ConfirmDialog } from './dialogs.tsx'
 import type { SkillHubState } from './useSkillHub.ts'
 import css from './panel.module.css'
@@ -19,19 +19,60 @@ function formatBytes(bytes: number): string {
   if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
   return (bytes / 1024 / 1024).toFixed(1) + ' MB'
 }
+function formatSpeed(bps?: number): string {
+  if (bps === undefined || bps <= 0) return ''
+  if (bps < 1024) return bps + ' B/s'
+  if (bps < 1024 * 1024) return (bps / 1024).toFixed(1) + ' KB/s'
+  return (bps / 1024 / 1024).toFixed(1) + ' MB/s'
+}
 
 export function MarketView(props: { hub: SkillHubState }): JSX.Element {
   const { hub } = props
-  const { marketState, marketCheck, sourceCheck, sourcesState, repoDiscoverState, scanningRepo, repoSelected, setRepoSelected, repoImporting, repoResult, newSourceName, setNewSourceName, syncingMarket, tagBusy, addSource, addMarketSource, removeMarketSource, scanRepo, checkMarket, checkSources, syncMarketSource, toggleRepoSelected, importRepo, updateAllDialog, setUpdateAllDialog, updateAll } = hub
+  const { marketState, marketCheck, sourceCheck, sourcesState, repoDiscoverState, scanningRepo, repoSelected, setRepoSelected, repoImporting, repoResult, newSourceName, setNewSourceName, syncingMarket, tagBusy, checkingSource, addSource, addMarketSource, removeMarketSource, scanRepo, checkMarket, checkSources, syncMarketSource, toggleRepoSelected, importRepo, cancelImport, updateAllDialog, setUpdateAllDialog, updateAll } = hub
   /** 有可更新技能的来源（全部更新按钮与确认列表共用）。 */
   const updatableRepos = Object.entries(sourceCheck).filter(([, check]) => check.changed && check.updated.length > 0)
 
-  /** 一个已添加来源的完整行：状态徽章 + 操作按钮。 */
+  // 276 列表本地状态：搜索 / 过滤 / 分页（精简：扁平列表，无 A-Z 分组）
+  const [repoSearch, setRepoSearch] = useState('')
+  const [repoFilter, setRepoFilter] = useState<string>('all')
+  const [visibleCount, setVisibleCount] = useState(50)
+  useEffect(() => { setVisibleCount(50) }, [repoDiscoverState, repoSearch, repoFilter])
+
+  /** 一个已添加来源的完整行：状态徽章 + 操作按钮。B 方案：扫描主按钮 + 智能更新按钮（检查/更新二合一）+ 溢出移除 */
   const sourceRow = (record: MarketSourceRecord): JSX.Element => {
     const releaseCheck = marketCheck[record.repo]
     const skillCheck = sourceCheck[record.repo]
     const installedCount = sourcesState?.sources.find((source) => source.repo === record.repo)?.skills.length ?? 0
     const scanning = scanningRepo === record.repo
+    const syncing = syncingMarket === record.repo
+    const checking = checkingSource === record.repo
+    const hasSkillUpdate = skillCheck?.changed === true && skillCheck.updated.length > 0
+    const hasReleaseUpdate = releaseCheck?.updateAvailable === true
+    const hasUpdate = hasSkillUpdate || hasReleaseUpdate
+    const isChecked = releaseCheck !== undefined || skillCheck !== undefined
+    // 智能按钮三态：未检查→检查更新，未检查完/有更新→更新 N 个，已检查无更新→已是最新
+    let updateLabel: string
+    let updateDisabled = false
+    let updateDanger = false
+    let updateAction: () => void = () => {}
+    if (syncing) {
+      updateLabel = tt('market.syncing')
+      updateDisabled = true
+    } else if (checking) {
+      updateLabel = tt('market.checking')
+      updateDisabled = true
+    } else if (!isChecked) {
+      updateLabel = tt('market.checkUpdate')
+      updateAction = () => { void checkSources(record.repo); void checkMarket() }
+    } else if (hasUpdate) {
+      const count = hasSkillUpdate ? skillCheck!.updated.length : 1
+      updateLabel = count > 1 || hasSkillUpdate ? tt('market.updateCount', { count }) : tt('market.update')
+      updateDanger = true
+      updateAction = () => { void syncMarketSource(record.repo) }
+    } else {
+      updateLabel = tt('market.upToDate')
+      updateDisabled = true
+    }
     return (
       <div className={css.row + ' ' + css.rowStatic}>
         <div className={css.rowMain}>
@@ -39,25 +80,38 @@ export function MarketView(props: { hub: SkillHubState }): JSX.Element {
             <a className={css.sourceLink} href={'https://github.com/' + record.repo} target='_blank' rel='noreferrer'>{record.repo}</a>
             {record.ref !== undefined ? <span className={css.badge + ' ' + css.badgeSource}>{record.ref}</span> : null}
             {installedCount > 0 ? <span className={css.badge + ' ' + css.badgeCount}>{tt('market.installed', { count: installedCount })}</span> : null}
-            {skillCheck?.changed === true && skillCheck.updated.length > 0
-              ? <span className={css.badge + ' ' + css.statusUpdated}>{tt('market.updatable', { count: skillCheck.updated.length })}</span>
+            {hasSkillUpdate
+              ? <span className={css.badge + ' ' + css.statusUpdated}>{tt('market.updatable', { count: skillCheck!.updated.length })}</span>
               : null}
             {skillCheck !== undefined && skillCheck.deleted.length > 0
               ? <span className={css.badge + ' ' + css.statusError}>{tt('market.deletedUpstream', { count: skillCheck.deleted.length })}</span>
               : null}
-            {releaseCheck?.updateAvailable === true
-              ? <span className={css.badge + ' ' + css.statusUpdated}>{releaseCheck.latestTag !== undefined ? tt('market.newRelease', { version: releaseCheck.latestTag }) : tt('market.updated')}</span>
+            {hasReleaseUpdate
+              ? <span className={css.badge + ' ' + css.statusUpdated}>{releaseCheck!.latestTag !== undefined ? tt('market.newRelease', { version: releaseCheck!.latestTag }) : tt('market.updated')}</span>
               : null}
           </div>
         </div>
-        <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void checkMarket() }}>{tt('market.check')}</button>
-        <button type='button' className={css.opBtn + (releaseCheck?.updateAvailable === true ? ' ' + css.opDanger : '')} disabled={syncingMarket === record.repo} onClick={() => { void syncMarketSource(record.repo) }}>
-          {syncingMarket === record.repo ? tt('market.syncing') : tt('market.sync')}
-        </button>
-        <button type='button' className={css.opBtn} disabled={scanning} onClick={() => { void scanRepo(record.repo) }}>
+        <button type='button' className={css.button + ' ' + css.primary} style={{ padding:'4px 10px', fontSize:12 }} disabled={scanning} onClick={() => { void scanRepo(record.repo) }}>
           {scanning ? tt('market.scanning') : tt('market.scan')}
         </button>
-        <button type='button' className={css.opBtn} disabled={tagBusy} title={tt('market.removeHint')} onClick={() => { void removeMarketSource(record.repo) }}>{tt('market.deleteSource')}</button>
+        <button
+          type='button'
+          className={css.opBtn + (updateDanger ? ' ' + css.opDanger : '')}
+          disabled={updateDisabled}
+          title={hasUpdate ? '将同步到上游最新版并提示可更新的本地技能' : undefined}
+          onClick={updateAction}
+        >
+          {updateLabel}
+        </button>
+        <button
+          type='button'
+          className={css.opBtn}
+          disabled={tagBusy}
+          title={tt('market.removeHint')}
+          aria-label={tt('market.deleteSource')}
+          onClick={() => { void removeMarketSource(record.repo) }}
+          style={{ padding:'4px 8px', minWidth:28 }}
+        >×</button>
       </div>
     )
   }
@@ -122,53 +176,153 @@ export function MarketView(props: { hub: SkillHubState }): JSX.Element {
         {marketState.status !== 'loading' && rows.length === 0 ? <div className={css.empty}>{tt('market.noSources')}</div> : null}
         {marketState.status !== 'loading' ? rows.map((row) => <Fragment key={row.key}>{row.element}</Fragment>) : null}
       </section>
-      {repoDiscoverState.status === 'scanning' ? <div className={css.empty}>{tt('market.scanning')}</div> : null}
-      {repoDiscoverState.status === 'error' ? <div className={css.errorBanner}>{repoDiscoverState.message}</div> : null}
-      {repoDiscoverState.status === 'ready' ? (() => {
+      {/* 扫描结果归属卡片：用同一 section 卡片包裹扫描中/错误/就绪，标题直接点明所属仓库，消除割裂感 */}
+      {(repoDiscoverState.status !== 'idle' || repoResult !== null) ? (
+        <section className={css.section} style={{ borderLeft: '3px solid var(--hub-model, #2f81f7)', background: 'rgba(47,129,247,0.04)' }}>
+          <div className={css.sectionTitle + ' ' + css.sectionHeadRow} style={{ margin: '10px 14px 6px' }}>
+            <span className={css.sectionTitleFill} style={{ display:'flex', alignItems:'center', gap:6 }}>
+              <span style={{ width:7, height:7, borderRadius:'50%', background:'var(--hub-model, #2f81f7)', display:'inline-block' }} />
+              扫描结果
+              <span style={{ fontWeight:400, opacity:.75 }}>
+                — {repoDiscoverState.status === 'ready' ? repoDiscoverState.data.repo : repoDiscoverState.status === 'error' ? (scanningRepo ?? '') : (scanningRepo ?? '')}
+                {repoDiscoverState.status === 'ready' && repoDiscoverState.data.ref !== null ? <span style={{ opacity:.5, marginLeft:6 }}>ref {repoDiscoverState.data.ref}</span> : null}
+              </span>
+            </span>
+            <button type='button' className={css.opBtn} onClick={() => { hub.clearScan() }}>关闭</button>
+          </div>
+          <div style={{ padding:'0 12px 12px' }}>
+            {repoDiscoverState.status === 'scanning' ? <div className={css.empty} style={{ padding:'12px 0' }}>{tt('market.scanning')}</div> : null}
+            {repoDiscoverState.status === 'error' ? <div className={css.errorBanner}>{repoDiscoverState.message}</div> : null}
+            {repoDiscoverState.status === 'ready' ? (() => {
         const entries = repoDiscoverState.data.entries
-        const selected = entries.filter((entry) => repoSelected.has(entry.path) && !entry.existing)
+        // 导入后 catalog 已包含新技能，但 scan 快照的 existing 仍为 false，需用实时 catalog + 本次导入结果兜底，避免已导入仍可选
+        const installedNames = new Set<string>([
+          ...((hub.catalog?.skills ?? []).map((s) => s.name)),
+          ...((hub.catalog?.disabled ?? []).map((d) => d.name)),
+          ...((repoResult?.imported ?? []).map((r) => r.name)),
+          ...((repoResult?.skipped ?? []).map((r) => r.name)),
+        ])
+        const isExisting = (entry: RepoSkillEntry): boolean => entry.existing || installedNames.has(entry.name)
+        const selected = entries.filter((entry) => repoSelected.has(entry.path) && !isExisting(entry))
+        const selectedBytes = selected.reduce((s, e) => s + e.totalBytes, 0)
+        // 过滤 + 搜索（276 场景核心）
+        const filtered = entries.filter((entry) => {
+          if (repoFilter !== 'all' && entry.root !== repoFilter) return false
+          if (repoSearch.trim() !== '' && !entry.name.toLowerCase().includes(repoSearch.trim().toLowerCase())) return false
+          return true
+        }).sort((a, b) => a.name.localeCompare(b.name))
+        const paged = filtered.slice(0, visibleCount)
         return (
           <>
-            <p className={css.hintLine + ' ' + css.hintInline}>{tt('repo.ready', { count: entries.length })}</p>
+            <p className={css.hintLine + ' ' + css.hintInline}>{tt('repo.ready', { count: entries.length })} · {repoDiscoverState.data.ref !== null ? `ref ${repoDiscoverState.data.ref}` : ''}</p>
             {entries.length === 0 ? <div className={css.empty}>{tt('repo.empty')}</div> : (
               <>
-                <div className={css.buttons + ' ' + css.actionsBottom}>
-                  <button type='button' className={css.button} onClick={() => { setRepoSelected(new Set(entries.filter((entry) => !entry.existing).map((entry) => entry.path))) }}>{tt('repo.selectAll')}</button>
-                  <button type='button' className={css.button} onClick={() => { setRepoSelected(new Set()) }}>{tt('repo.clearAll')}</button>
-                </div>
-                {(['skills', 'design-templates'] as const).map((root) => {
-                  const rootEntries = entries.filter((entry) => entry.root === root)
-                  if (rootEntries.length === 0) return null
+                {/* 搜索 + 过滤 + 统计 — 精简 */}
+                {(() => {
+                  // 动态根：按已知顺序 skills/design-templates 优先，其余按字母序
+                  const order = new Map<string, number>([['skills', 0], ['design-templates', 1]])
+                  const roots = [...new Set(entries.map((e) => e.root))].sort((a, b) => {
+                    const ao = order.get(a) ?? 99
+                    const bo = order.get(b) ?? 99
+                    return ao !== bo ? ao - bo : a.localeCompare(b)
+                  })
+                  const counts = new Map<string, number>()
+                  for (const e of entries) counts.set(e.root, (counts.get(e.root) ?? 0) + 1)
                   return (
-                    <div key={root} className={css.section}>
-                      <div className={css.sectionTitle}>{root === 'skills' ? tt('repo.root.skills') : tt('repo.root.designTemplates')}</div>
-                      {rootEntries.map((entry) => (
-                        <label key={entry.path} className={css.row + (entry.existing ? ' ' + css.rowMuted : '')}>
-                          <input
-                            type='checkbox'
-                            checked={repoSelected.has(entry.path)}
-                            disabled={entry.existing}
-                            onChange={(event) => { toggleRepoSelected(entry.path, event.target.checked) }}
-                          />
-                          <div className={css.rowMain}>
-                            <div className={css.rowName}>{entry.name}</div>
-                            <div className={css.rowDesc}>{entry.dir} · {tt('repo.files', { count: entry.fileCount, size: formatBytes(entry.totalBytes) })}</div>
-                          </div>
-                          {entry.existing
-                            ? <span className={css.badge + ' ' + css.badgeReadonly}>{tt('repo.existing')}</span>
-                            : <span className={css.badge + ' ' + css.badgeSource}>{entry.origin}</span>}
-                        </label>
+                    <div style={{ display:'flex', gap:8, marginBottom:8, flexWrap:'wrap' }}>
+                      <input
+                        className={css.input}
+                        style={{ flex:1, minWidth:140 }}
+                        value={repoSearch}
+                        onChange={(e) => setRepoSearch(e.target.value)}
+                        placeholder="搜索技能名…"
+                      />
+                      <button type='button' className={css.button + (repoFilter === 'all' ? ' ' + css.primary : '')} style={{ padding:'6px 10px', fontSize:12 }} onClick={() => setRepoFilter('all')}>全部 {entries.length}</button>
+                      {roots.map((root) => (
+                        <button key={root} type='button' className={css.button + (repoFilter === root ? ' ' + css.primary : '')} style={{ padding:'6px 10px', fontSize:12 }} onClick={() => setRepoFilter(root)}>{root} {counts.get(root) ?? 0}</button>
                       ))}
                     </div>
                   )
-                })}
-                <button type='button' className={css.button + ' ' + css.primary} disabled={selected.length === 0 || repoImporting} onClick={() => { void importRepo() }}>{repoImporting ? tt('repo.importing') : tt('repo.import', { count: selected.length })}</button>
+                })()}
+                <div className={css.hintLine} style={{ display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:8 }}>
+                  <span>已选 {selected.length}/{entries.length} · {formatBytes(selectedBytes)} · 显示 {paged.length}/{filtered.length}（过滤后）</span>
+                  <span style={{ display:'flex', gap:6 }}>
+                    <button type='button' className={css.button} style={{ padding:'4px 8px', fontSize:11 }} onClick={() => { setRepoSelected(new Set(filtered.filter((e)=>!isExisting(e)).slice(0, visibleCount).map((e)=>e.path))) }}>全选当前显示</button>
+                    <button type='button' className={css.button} style={{ padding:'4px 8px', fontSize:11 }} onClick={() => { setRepoSelected(new Set(entries.filter((e)=>!isExisting(e)).map((e)=>e.path))) }}>全选全部 {entries.filter(e=>!isExisting(e)).length}</button>
+                    <button type='button' className={css.button} style={{ padding:'4px 8px', fontSize:11 }} onClick={() => { setRepoSelected(new Set()) }}>{tt('repo.clearAll')}</button>
+                  </span>
+                </div>
+
+                {/* 扁平虚拟滚动容器 — 主题自适应，CSS Modules */}
+                <div className={css.scanList}>
+                  {paged.length === 0 ? <div className={css.empty} style={{ padding:20 }}>无匹配技能</div> : paged.map((entry) => {
+                    const existing = isExisting(entry)
+                    return (
+                    <label key={entry.path} className={css.row + (existing ? ' ' + css.rowMuted : '')}>
+                      <input
+                        type='checkbox'
+                        checked={repoSelected.has(entry.path)}
+                        disabled={existing}
+                        onChange={(event) => { toggleRepoSelected(entry.path, event.target.checked) }}
+                      />
+                      <div className={css.rowMain}>
+                        <div className={css.rowName}>{entry.name}</div>
+                        <div className={css.rowDesc}>{entry.dir} · {tt('repo.files', { count: entry.fileCount, size: formatBytes(entry.totalBytes) })}</div>
+                      </div>
+                      {existing
+                        ? <span className={css.badge + ' ' + css.badgeReadonly}>{tt('repo.existing')}</span>
+                        : <span className={css.badge + ' ' + css.badgeSource}>{entry.origin}</span>}
+                    </label>
+                  )})}
+                </div>
+                {visibleCount < filtered.length ? (
+                  <div style={{ textAlign:'center', marginTop:8 }}>
+                    <button type='button' className={css.button} onClick={() => setVisibleCount((n) => n + 50)}>加载更多 50 (剩余 {filtered.length - visibleCount})</button>
+                  </div>
+                ) : null}
+
+                <div className={css.buttons + ' ' + css.actionsTop}>
+                  <button type='button' className={css.button + ' ' + css.primary} disabled={selected.length === 0 || repoImporting} onClick={() => { void importRepo() }}>{repoImporting ? tt('repo.importing') : `${tt('repo.import', { count: selected.length })} · ${formatBytes(selectedBytes)}`}</button>
+                  {repoImporting ? <button type='button' className={css.button} onClick={() => { void cancelImport() }}>{tt('repo.cancel')}</button> : null}
+                </div>
+                {repoResult !== null && repoResult.status === 'running' ? (() => {
+                  const pct = repoResult.totalBytes > 0 ? Math.min(100, Math.round(repoResult.downloadedBytes / repoResult.totalBytes * 100)) : (repoResult.total > 0 ? Math.round(repoResult.done / repoResult.total * 100) : 0)
+                  const speed = formatSpeed(repoResult.bytesPerSecond)
+                  return (
+                    <div className={css.formSuccess + ' ' + css.actionsTop}>
+                      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
+                        <div className={css.scanProgressTrack}>
+                          <div className={css.scanProgressFill} style={{ width: `${pct}%` }} />
+                        </div>
+                        <span style={{ fontSize:11, opacity:.75, minWidth:32, textAlign:'right' }}>{pct}%</span>
+                      </div>
+                      <div className={css.hintLine}>
+                        {formatBytes(repoResult.downloadedBytes)} / {formatBytes(repoResult.totalBytes)}
+                        {speed !== '' ? ` · ${speed}` : ''} · {repoResult.done}/{repoResult.total} 个技能
+                      </div>
+                      <div className={css.hintLine} style={{marginTop:4}}>
+                        {repoResult.current !== undefined ? tt('repo.importingCurrent', { name: repoResult.current, done: repoResult.done + 1, total: repoResult.total }) : tt('repo.importing')}
+                        {repoResult.currentFile !== undefined ? ` · ${repoResult.currentFile}` : ''}
+                      </div>
+                      {repoResult.failed.length > 0 ? <div className={css.errorBanner} style={{marginTop:6}}>{repoResult.failed.map(f => `${f.name}: ${f.error}`).join('; ')}</div> : null}
+                    </div>
+                  )
+                })() : null}
               </>
             )}
           </>
         )
       })() : null}
-      {repoResult !== null ? <div className={css.formSuccess + ' ' + css.actionsTop}>{tt('repo.imported', { count: repoResult.imported.length })} · {tt('repo.skippedExisting', { count: repoResult.skipped.length })} · {tt('repo.failed', { count: repoResult.failed.length })}</div> : null}
+      {repoResult !== null && repoResult.status !== 'running' ? (
+        <div className={repoResult.status === 'cancelled' ? css.errorBanner + ' ' + css.actionsTop : css.formSuccess + ' ' + css.actionsTop}>
+          {repoResult.status === 'cancelled' ? tt('repo.cancelled', { imported: repoResult.imported.length, total: repoResult.total }) : `${tt('repo.imported', { count: repoResult.imported.length })} · ${tt('repo.skippedExisting', { count: repoResult.skipped.length })} · ${tt('repo.failed', { count: repoResult.failed.length })}`}
+          {repoResult.failed.length > 0 ? <div style={{marginTop:6}}>{repoResult.failed.map(f => `${f.name}: ${f.error}`).join('; ')}</div> : null}
+          {repoResult.status === 'error' && repoResult.error ? <div style={{marginTop:6}}>{repoResult.error}</div> : null}
+        </div>
+      ) : null}
+          </div>
+        </section>
+      ) : null}
 
       {updateAllDialog ? (
         <ConfirmDialog

package/src/client/panel/ScenesView.tsx

@@ -5,7 +5,7 @@
  * are managed in the sources tab.
  */
 
-import type { JSX } from 'react'
+import { useState, type JSX } from 'react'
 import { tt } from '../helpers.ts'
 import { groupSwitchView } from '../grouping.ts'
 import { SkillRow } from './SkillRow.tsx'
@@ -17,6 +17,19 @@ import css from './panel.module.css'
 export function ScenesView(props: { hub: SkillHubState }): JSX.Element {
   const { hub } = props
   const { catalog, groupsState, sorted, normalized, collapsedGroups, viewNames, actionNames, batchBusy, busyNames, newTagName, setNewTagName, tagBusy, createTag, toggleGroupCollapse, toggleGroup, setEditingTag, setEditName, setMembersDraft, setEditSearch, enableDisabled } = hub
+  const [dragId, setDragId] = useState<string | null>(null)
+  const [overId, setOverId] = useState<string | null>(null)
+  const handleDrop = (targetId: string): void => {
+    if (dragId === null || dragId === targetId || groupsState === null) return
+    const ids = groupsState.tags.map((t) => t.id)
+    const from = ids.indexOf(dragId)
+    const to = ids.indexOf(targetId)
+    if (from === -1 || to === -1) return
+    const next = [...ids]
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved)
+    void hub.reorderTags(next)
+  }
   return (
     <>
       <form className={css.form} onSubmit={(event) => { void createTag(event) }}>
@@ -38,9 +51,21 @@ export function ScenesView(props: { hub: SkillHubState }): JSX.Element {
         const collapsed = collapsedGroups.has('tag:' + tag.id)
         const view = groupSwitchView(tag.skillNames, viewNames)
         const hasWritable = tag.skillNames.some((name) => actionNames.has(name))
+        const isDragging = dragId === tag.id
+        const isOver = overId === tag.id && dragId !== tag.id
         return (
-          <section key={'tag:' + tag.id} className={css.section}>
+          <section
+            key={'tag:' + tag.id}
+            className={css.section + (isDragging ? ' ' + css.dragging : '') + (isOver ? ' ' + css.dragOver : '')}
+            draggable
+            onDragStart={(e) => { setDragId(tag.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', tag.id) }}
+            onDragOver={(e) => { e.preventDefault(); if (overId !== tag.id) setOverId(tag.id) }}
+            onDragLeave={() => { if (overId === tag.id) setOverId(null) }}
+            onDrop={(e) => { e.preventDefault(); handleDrop(tag.id); setOverId(null) }}
+            onDragEnd={() => { setDragId(null); setOverId(null) }}
+          >
             <div className={css.groupHead}>
+              <span className={css.dragHandle} aria-hidden title="拖拽调整顺序">⋮⋮</span>
               <button type='button' className={css.disclosure} aria-expanded={!collapsed} onClick={() => { toggleGroupCollapse('tag:' + tag.id) }}>
                 <span className={css.chevron + (collapsed ? ' ' + css.chevronCollapsed : '')} />
                 <span className={css.groupTitle}>

package/src/client/panel/SkillHubPanel.tsx

@@ -24,7 +24,6 @@ import { TagEditorView } from './TagEditorView.tsx'
 import { SourcesView } from './SourcesView.tsx'
 import { ScenesView } from './ScenesView.tsx'
 import { MarketView } from './MarketView.tsx'
-import { DisabledRow } from './DisabledRow.tsx'
 import { BranchChoiceDialog, ConfirmDialog, ConflictDialog, MarketSyncDialog } from './dialogs.tsx'
 import { useSkillHub } from './useSkillHub.ts'
 import css from './panel.module.css'
@@ -42,14 +41,14 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
     formRoot, formBusy, formMessage, hubConfig, tab, skillView, sourceFilter, sortKey, search,
     workspace, setWorkspace,
     sourcesState, tagBusy, busyNames, normalized, origins, sourceOptions, filtered,
-    conflictDialog, confirmDialog, deleteSkillDialog, confirmClearTrash, branchChoice, branchBusy, marketSyncDialog,
+    conflictDialog, confirmDialog, deleteSkillDialog, deleteGroupDialog, confirmClearTrash, branchChoice, branchBusy, marketSyncDialog,
     syncBusy, editingTag, editName, membersDraft, editSearch, uses, groupsState, sourceCheck, checkingSource, syncingSource,
-    showLegend,
+    showLegend, editMode,
     setLoadError, setSuccessBanner, setDetail, setShowForm, setFormName, setFormDesc, setFormRoot, setFormMessage, setTab,
-    setSkillView, setSourceFilter, setSortKey, setSearch, setConflictDialog, setConfirmDialog, setDeleteSkillDialog,
+    setSkillView, setSourceFilter, setSortKey, setSearch, setConflictDialog, setConfirmDialog, setDeleteSkillDialog, setDeleteGroupDialog,
     setConfirmClearTrash, setBranchChoice, setMarketSyncDialog, setEditingTag, setEditName, setMembersDraft, setEditSearch,
-    setShowLegend,
-    checkUpdate, loadMarket, checkSources, requestSync, requestDelete, restoreTrash, clearTrash, runDeleteSkill,
+    setShowLegend, setEditMode,
+    checkUpdate, loadMarket, checkSources, requestSync, requestDelete, restoreTrash, clearTrash, runDeleteSkill, runDeleteGroup,
     runConfirmed, resolveConflict, confirmBranchChoice, confirmMarketSync, create, saveTag, deleteTag, enableDisabled,
   } = hub
 
@@ -236,6 +235,7 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
               <option value='uses'>{tt('sort.uses')}</option>
             </select>
             <input className={css.search} value={search} onChange={(event) => { setSearch(event.target.value) }} placeholder={tt('panel.search')} />
+            <button type='button' className={css.button + (editMode ? ' ' + css.primary : '')} style={{ marginLeft:'auto' }} onClick={() => setEditMode((v) => !v)}>{editMode ? '完成' : '编辑'}</button>
           </div>
 
           {filtered.length === 0 && search.trim() !== '' ? <div className={css.empty}>{tt('panel.empty')}</div> : null}
@@ -263,19 +263,6 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
             </section>
           ) : null}
 
-          {catalog.disabled.length > 0 ? (
-            <section className={css.section}>
-              <div className={css.sectionTitle}>{tt('panel.disabled')}</div>
-              {catalog.disabled
-                .filter((record) =>
-                  (normalized.length === 0 || record.name.toLocaleLowerCase().includes(normalized) || record.description.toLocaleLowerCase().includes(normalized))
-                  && (sourceFilter === 'all' || (origins[record.name] ?? PRIVATE_SOURCE) === sourceFilter))
-                .map((record) => (
-                  <DisabledRow key={record.name} record={record} busy={busyNames.has(record.name)} onEnable={() => { void enableDisabled(record) }} />
-                ))}
-            </section>
-          ) : null}
-
           {catalog.diagnostics.length > 0 ? (
             <section className={css.section}>
               <div className={css.sectionTitle}>{tt('panel.diagnostics')}</div>
@@ -349,6 +336,18 @@ export function SkillHubPanel(props: SkillHubPanelProps): React.JSX.Element {
         />
       ) : null}
 
+      {deleteGroupDialog !== null ? (
+        <ConfirmDialog
+          title={tt('source.deleteGroupTitle')}
+          text={tt('source.deleteGroupText', { name: deleteGroupDialog.name, count: deleteGroupDialog.skillNames.length })}
+          items={deleteGroupDialog.skillNames}
+          confirmLabel={tt('source.deleteGroup')}
+          danger
+          onCancel={() => { setDeleteGroupDialog(null) }}
+          onConfirm={() => { void runDeleteGroup() }}
+        />
+      ) : null}
+
       {confirmClearTrash ? (
         <ConfirmDialog
           title={tt('source.clearTrashConfirmTitle')}

package/src/client/panel/SkillRow.tsx

@@ -50,14 +50,6 @@ export function SkillRow(props: { skill: CatalogSkill; hub: SkillHubState }): JS
       </div>
       {skill.writable
         ? <>
-            <button
-              type='button'
-              className={css.opBtn + ' ' + css.opDanger + ' ' + css.iconBtn}
-              disabled={hub.busyNames.has(skill.name) || hub.tagBusy}
-              title={tt('row.delete')}
-              aria-label={tt('row.delete')}
-              onClick={(event) => { event.stopPropagation(); hub.requestDeleteSkill(skill.name) }}
-            ><IconTrashOutline16 size={14} /></button>
             <button
               type='button'
               role='switch'
@@ -67,6 +59,14 @@ export function SkillRow(props: { skill: CatalogSkill; hub: SkillHubState }): JS
               disabled={hub.busyNames.has(skill.name)}
               onClick={(event) => { event.stopPropagation(); void hub.toggle(skill, false) }}
             ><span className={css.switchThumb} /></button>
+            {hub.editMode ? <button
+              type='button'
+              className={css.opBtn + ' ' + css.opDanger + ' ' + css.iconBtn}
+              disabled={hub.busyNames.has(skill.name) || hub.tagBusy}
+              title={tt('row.delete')}
+              aria-label={tt('row.delete')}
+              onClick={(event) => { event.stopPropagation(); hub.requestDeleteSkill(skill.name) }}
+            ><IconTrashOutline16 size={14} /></button> : null}
           </>
         : <span className={css.badge + ' ' + css.badgeReadonly}>{tt('row.readonly')}</span>}
     </div>