forked from EduCraft/curriculum-project-hub
feat(admin-web): skill zip import and folder-grouped role picker
- parse skill package zips client-side, mirroring backend ingestion limits (ADR-0018) - add zip upload flow on skills page and zip replace in SkillEditor - group role skill bindings by the shared management folder tree (ADR-0028) - add fflate dependency
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Checkbox, Label } from 'bits-ui';
|
||||
import type { AgentRoleRow, AgentModelRow, AgentSkillRow } from '$lib/api';
|
||||
import type { AgentConfigFolderRow, AgentRoleRow, AgentModelRow, AgentSkillRow } from '$lib/api';
|
||||
import { api } from '$lib/api';
|
||||
import { fmtDate } from '$lib/format';
|
||||
import { TOOL_OPTIONS } from '$lib/constants';
|
||||
@@ -15,6 +15,7 @@
|
||||
models,
|
||||
skills,
|
||||
slug,
|
||||
folders,
|
||||
folderItems,
|
||||
onupdated,
|
||||
onskillschanged,
|
||||
@@ -24,6 +25,8 @@
|
||||
models: AgentModelRow[];
|
||||
skills: AgentSkillRow[];
|
||||
slug: string;
|
||||
/** ADR-0028 shared management tree — skill picker groups only; not binding identity */
|
||||
folders: AgentConfigFolderRow[];
|
||||
/** ADR-0028 folder choices ('' = 未分类); transparent grouping only */
|
||||
folderItems: { value: string; label: string }[];
|
||||
onupdated: (updated: AgentRoleRow) => void;
|
||||
@@ -71,7 +74,59 @@
|
||||
return items;
|
||||
});
|
||||
|
||||
const skillItems = $derived(skills.map((s) => ({ value: s.name, label: s.name })));
|
||||
function folderPathLabel(folderId: string): string {
|
||||
const folder = folders.find((f) => f.id === folderId);
|
||||
if (!folder) return '（未知文件夹）';
|
||||
const parts: string[] = [folder.name];
|
||||
let cur: AgentConfigFolderRow | undefined = folder;
|
||||
while (cur?.parentId) {
|
||||
const parent = folders.find((x) => x.id === cur!.parentId);
|
||||
if (!parent) break;
|
||||
parts.unshift(parent.name);
|
||||
cur = parent;
|
||||
}
|
||||
return parts.join(' / ');
|
||||
}
|
||||
|
||||
/** Group picker by management folder; bindings remain skill name (ADR-0028). */
|
||||
const skillGroups = $derived.by(() => {
|
||||
type Group = { key: string; label: string; skills: AgentSkillRow[] };
|
||||
const byFolder = new Map<string | null, AgentSkillRow[]>();
|
||||
for (const s of skills) {
|
||||
const key = s.folderId;
|
||||
const list = byFolder.get(key) ?? [];
|
||||
list.push(s);
|
||||
byFolder.set(key, list);
|
||||
}
|
||||
for (const list of byFolder.values()) {
|
||||
list.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
const filed = [...byFolder.entries()]
|
||||
.filter((e): e is [string, AgentSkillRow[]] => e[0] !== null)
|
||||
.map(([id, list]) => ({ key: id, label: folderPathLabel(id), skills: list }))
|
||||
.sort((a, b) => a.label.localeCompare(b.label));
|
||||
const unfiled = byFolder.get(null);
|
||||
const groups: Group[] = [...filed];
|
||||
if (unfiled && unfiled.length > 0) {
|
||||
groups.push({ key: 'unfiled', label: '未分类', skills: unfiled });
|
||||
}
|
||||
return groups;
|
||||
});
|
||||
|
||||
function groupSelectedCount(groupSkills: AgentSkillRow[]): number {
|
||||
return groupSkills.filter((s) => selectedSkills.includes(s.name)).length;
|
||||
}
|
||||
|
||||
function toggleGroup(groupSkills: AgentSkillRow[], checked: boolean) {
|
||||
const names = new Set(groupSkills.map((s) => s.name));
|
||||
if (checked) {
|
||||
const next = new Set(selectedSkills);
|
||||
for (const n of names) next.add(n);
|
||||
selectedSkills = [...next];
|
||||
} else {
|
||||
selectedSkills = selectedSkills.filter((n) => !names.has(n));
|
||||
}
|
||||
}
|
||||
|
||||
function skillsDirty(): boolean {
|
||||
const a = [...selectedSkills].sort();
|
||||
@@ -209,19 +264,40 @@
|
||||
<div class="mt-4">
|
||||
<span class="saas-label">技能绑定</span>
|
||||
{#if skills.length === 0}
|
||||
<p class="text-sm text-surface-600">组织内暂无已安装技能。技能通过 CLI / seed 安装（ADR-0018）。</p>
|
||||
<p class="text-sm text-surface-600">组织内暂无已安装技能。请在技能页上传 zip 或新建空白模板（ADR-0018）。</p>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
|
||||
{#each skillItems as s}
|
||||
<label class="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-surface-100">
|
||||
<CheckboxControl
|
||||
checked={selectedSkills.includes(s.value)}
|
||||
onchange={(checked) => {
|
||||
selectedSkills = checked ? [...selectedSkills, s.value] : selectedSkills.filter((x) => x !== s.value);
|
||||
}}
|
||||
/>
|
||||
<span class="font-mono text-xs">{s.label}</span>
|
||||
</label>
|
||||
<div class="space-y-3">
|
||||
{#each skillGroups as group (group.key)}
|
||||
<div class="border border-surface-300">
|
||||
<label class="flex cursor-pointer items-center gap-2 border-b border-surface-200 bg-surface-100 px-2 py-1.5 text-sm">
|
||||
<CheckboxControl
|
||||
checked={groupSelectedCount(group.skills) === group.skills.length}
|
||||
onchange={(checked) => toggleGroup(group.skills, checked)}
|
||||
/>
|
||||
<span class="text-xs font-semibold text-surface-700">{group.label}</span>
|
||||
<span class="text-[10px] text-surface-500">
|
||||
{groupSelectedCount(group.skills)}/{group.skills.length}
|
||||
</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-1 gap-0.5 p-1 sm:grid-cols-2">
|
||||
{#each group.skills as s (s.name)}
|
||||
<label class="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-surface-100">
|
||||
<CheckboxControl
|
||||
checked={selectedSkills.includes(s.name)}
|
||||
onchange={(checked) => {
|
||||
selectedSkills = checked
|
||||
? [...selectedSkills, s.name]
|
||||
: selectedSkills.filter((x) => x !== s.name);
|
||||
}}
|
||||
/>
|
||||
<span class="font-mono text-xs">{s.name}</span>
|
||||
{#if s.version}
|
||||
<span class="text-[10px] text-surface-500">v{s.version}</span>
|
||||
{/if}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import type { AgentSkillRow, SkillFileEntry } from '$lib/api';
|
||||
import { api } from '$lib/api';
|
||||
import { fmtDate } from '$lib/format';
|
||||
import { parseSkillZip } from '$lib/skillZip';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import SelectField from '$lib/components/SelectField.svelte';
|
||||
import { toastError, toastSuccess } from '$lib/toast';
|
||||
@@ -36,6 +37,8 @@
|
||||
let showNewFile = $state(false);
|
||||
let folderValue = $state(skill.folderId ?? '');
|
||||
let savingFolder = $state(false);
|
||||
let zipInputEl = $state<HTMLInputElement | null>(null);
|
||||
let zipImporting = $state(false);
|
||||
|
||||
const selectedFile = $derived(files.find((f) => f.path === selectedPath) ?? null);
|
||||
const hasManifest = $derived(files.some((f) => f.path === 'SKILL.md'));
|
||||
@@ -178,6 +181,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function importZip(fileList: FileList | null) {
|
||||
const file = fileList?.[0];
|
||||
if (!file) return;
|
||||
const trimmedVersion = version.trim();
|
||||
if (trimmedVersion === '') {
|
||||
toastError('请先填写版本号再导入 zip');
|
||||
if (zipInputEl) zipInputEl.value = '';
|
||||
return;
|
||||
}
|
||||
zipImporting = true;
|
||||
try {
|
||||
const buf = new Uint8Array(await file.arrayBuffer());
|
||||
const parsed = parseSkillZip(buf);
|
||||
if (parsed.name !== skill.name) {
|
||||
throw new Error(`zip 内技能名 "${parsed.name}" 与当前技能 "${skill.name}" 不一致`);
|
||||
}
|
||||
files = parsed.files.map((f) => ({ path: f.path, content: f.content }));
|
||||
selectedPath = files.find((f) => f.path === 'SKILL.md')?.path ?? files[0]?.path ?? null;
|
||||
if (parsed.description !== null) description = parsed.description;
|
||||
dirty = true;
|
||||
toastSuccess(`已载入 zip（${files.length} 个文件），请保存以写入`);
|
||||
} catch (err) {
|
||||
toastError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
zipImporting = false;
|
||||
if (zipInputEl) zipInputEl.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function updateFrontmatter(content: string, key: string, value: string): string {
|
||||
const regex = new RegExp(`^(${key}:\\s*)(.*?)(\\s*)$`, 'm');
|
||||
if (regex.test(content)) {
|
||||
@@ -324,9 +356,20 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap items-center gap-3 border-t border-surface-100 pt-4">
|
||||
<button class="saas-btn-primary" onclick={save} disabled={saving || !dirty}>
|
||||
<button class="saas-btn-primary" onclick={save} disabled={saving || !dirty || zipImporting}>
|
||||
{saving ? '保存中…' : '保存'}
|
||||
</button>
|
||||
<label class="saas-btn-ghost cursor-pointer {zipImporting ? 'pointer-events-none opacity-50' : ''}">
|
||||
{zipImporting ? '导入中…' : '从 zip 替换'}
|
||||
<input
|
||||
bind:this={zipInputEl}
|
||||
type="file"
|
||||
accept=".zip,application/zip,application/x-zip-compressed"
|
||||
class="hidden"
|
||||
disabled={zipImporting || saving}
|
||||
onchange={(e) => importZip(e.currentTarget.files)}
|
||||
/>
|
||||
</label>
|
||||
{#if !skill.disabledAt}
|
||||
<button class="saas-btn-danger" onclick={disable} disabled={saving}>
|
||||
禁用
|
||||
|
||||
Reference in New Issue
Block a user