create-windy 0.8.2 → 0.9.1

package/template/apps/web/src/pages/system/components/agent-skills/AgentSkillImportDialog.vue

@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
+import type {
+  AgentSkillRequirement,
+  AgentSkillScope,
+  ImportAgentSkillRequest,
+} from "@southwind-ai/shared";
+import { importAgentSkill } from "@/services/agent-skills-api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+const props = defineProps<{ open: boolean }>();
+const emit = defineEmits<{ "update:open": [value: boolean]; published: [] }>();
+const raw = shallowRef(""),
+  archive = shallowRef(""),
+  filename = shallowRef(""),
+  scope = shallowRef<AgentSkillScope>("tenant"),
+  expectedVersion = shallowRef(0),
+  requirements = shallowRef("[]"),
+  safety = shallowRef("");
+const saving = shallowRef(false),
+  reading = shallowRef(false),
+  error = shallowRef(""),
+  leaveOpen = shallowRef(false),
+  fileRevision = shallowRef(0);
+const baseline = shallowRef(snapshot());
+const dirty = computed(() => snapshot() !== baseline.value);
+let resolveLeave: ((value: boolean) => void) | undefined,
+  mutationKey = "",
+  mutationFingerprint = "",
+  readRevision = 0;
+function snapshot() {
+  return JSON.stringify([
+    raw.value,
+    archive.value,
+    filename.value,
+    scope.value,
+    expectedVersion.value,
+    requirements.value,
+    safety.value,
+  ]);
+}
+function reset() {
+  raw.value = "";
+  archive.value = "";
+  filename.value = "";
+  scope.value = "tenant";
+  expectedVersion.value = 0;
+  requirements.value = "[]";
+  safety.value = "";
+  error.value = "";
+  baseline.value = snapshot();
+  fileRevision.value++;
+  mutationKey = "";
+  mutationFingerprint = "";
+}
+watch(
+  () => props.open,
+  (open) => {
+    if (open) reset();
+  },
+);
+async function chooseFile(event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  const current = ++readRevision;
+  reading.value = true;
+  error.value = "";
+  try {
+    if (
+      file.size > 4 * 1024 * 1024 ||
+      (!file.name.toLowerCase().endsWith(".zip") &&
+        !file.name.toLowerCase().endsWith(".md"))
+    )
+      throw new Error("请选择不超过 4 MiB 的 SKILL.md 或 ZIP 文件");
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    if (current !== readRevision) return;
+    if (file.name.toLowerCase().endsWith(".zip")) {
+      let binary = "";
+      for (let offset = 0; offset < bytes.length; offset += 4096)
+        binary += String.fromCharCode(...bytes.subarray(offset, offset + 4096));
+      archive.value = btoa(binary);
+      raw.value = "";
+    } else {
+      raw.value = new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+      archive.value = "";
+    }
+    filename.value = file.name;
+  } catch (cause) {
+    if (current === readRevision)
+      error.value = cause instanceof Error ? cause.message : "文件读取失败";
+  } finally {
+    if (current === readRevision) reading.value = false;
+  }
+}
+async function publish(): Promise<boolean> {
+  if (saving.value || reading.value) return false;
+  saving.value = true;
+  error.value = "";
+  try {
+    const dependencies: unknown = JSON.parse(requirements.value);
+    if (
+      !Array.isArray(dependencies) ||
+      dependencies.some(
+        (value: unknown) =>
+          !value ||
+          typeof value !== "object" ||
+          !["toolKey", "featureKey", "permissionKey"].every(
+            (key) =>
+              typeof (value as Record<string, unknown>)[key] === "string",
+          ),
+      )
+    )
+      throw new Error(
+        "能力依赖须为包含 toolKey、featureKey、permissionKey 的 JSON 数组",
+      );
+    const input: ImportAgentSkillRequest = {
+      format: archive.value ? "zip" : "markdown",
+      content: archive.value || raw.value,
+      scope: scope.value,
+      expectedVersion: expectedVersion.value,
+      requirements: dependencies as AgentSkillRequirement[],
+      safetyConstraints: safety.value
+        .split("\n")
+        .map((value) => value.trim())
+        .filter(Boolean),
+    };
+    const fingerprint = JSON.stringify(input);
+    if (fingerprint !== mutationFingerprint) {
+      mutationFingerprint = fingerprint;
+      mutationKey = crypto.randomUUID();
+    }
+    await importAgentSkill(input, mutationKey);
+    baseline.value = snapshot();
+    emit("published");
+    emit("update:open", false);
+    return true;
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : "技能发布失败";
+    return false;
+  } finally {
+    saving.value = false;
+  }
+}
+function confirmLeave(): Promise<boolean> {
+  if (saving.value || reading.value) return Promise.resolve(false);
+  if (!dirty.value) return Promise.resolve(true);
+  resolveLeave?.(false);
+  leaveOpen.value = true;
+  return new Promise((resolve) => {
+    resolveLeave = resolve;
+  });
+}
+function settleLeave(allowed: boolean) {
+  leaveOpen.value = false;
+  const resolve = resolveLeave;
+  resolveLeave = undefined;
+  resolve?.(allowed);
+}
+async function close(open: boolean) {
+  if (open || (await confirmLeave())) emit("update:open", open);
+}
+async function saveAndLeave() {
+  if (await publish()) settleLeave(true);
+}
+function discard() {
+  reset();
+  settleLeave(true);
+}
+function unload(event: BeforeUnloadEvent) {
+  if (!dirty.value && !saving.value && !reading.value) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+window.addEventListener("beforeunload", unload);
+onBeforeRouteLeave(async () => !props.open || (await confirmLeave()));
+onBeforeUnmount(() => {
+  readRevision++;
+  window.removeEventListener("beforeunload", unload);
+  settleLeave(false);
+});
+</script>
+<template>
+  <Dialog :open="open" @update:open="close"
+    ><DialogContent
+      class="max-h-[85vh] overflow-y-auto sm:max-w-3xl"
+      :show-close-button="!saving"
+      @escape-key-down="(saving || reading) && $event.preventDefault()"
+      @interact-outside="(saving || reading) && $event.preventDefault()"
+      ><DialogHeader
+        ><DialogTitle>导入并发布共享技能</DialogTitle
+        ><DialogDescription
+          >使用标准 DSH SKILL.md 或单技能
+          ZIP；技能内容及附件不会扩大工具权限。</DialogDescription
+        ></DialogHeader
+      >
+      <form class="space-y-4" @submit.prevent="publish">
+        <label class="block space-y-2 text-sm"
+          ><span>导入文件</span
+          ><Input
+            :key="fileRevision"
+            type="file"
+            accept=".md,.zip"
+            :disabled="saving || reading"
+            @change="chooseFile"
+          /><span class="text-xs text-muted-foreground">{{
+            filename ||
+            "也可以直接填写 SKILL.md 正文。ZIP 上限 4 MiB，展开上限 16 MiB。"
+          }}</span></label
+        >
+        <label v-if="!archive" class="block space-y-2 text-sm"
+          ><span>SKILL.md</span
+          ><textarea
+            v-model="raw"
+            class="min-h-48 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label="技能正文"
+            placeholder="填写包含 name、description 的 YAML 头部及技能正文"
+            :disabled="saving || reading"
+          />
+        </label>
+        <div class="grid gap-4 sm:grid-cols-2">
+          <label class="space-y-2 text-sm"
+            ><span>共享范围</span
+            ><select
+              v-model="scope"
+              class="h-9 w-full rounded-md border bg-background px-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              :disabled="saving"
+            >
+              <option value="tenant">全租户</option>
+              <option value="department">当前部门</option>
+              <option value="personal">仅本人</option>
+            </select></label
+          ><label class="space-y-2 text-sm"
+            ><span>当前版本（新技能填 0）</span
+            ><Input
+              v-model.number="expectedVersion"
+              type="number"
+              min="0"
+              step="1"
+              :disabled="saving"
+          /></label>
+        </div>
+        <label class="block space-y-2 text-sm"
+          ><span>能力依赖（JSON）</span
+          ><textarea
+            v-model="requirements"
+            class="min-h-20 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            aria-label="技能能力依赖"
+            :disabled="saving"
+          />
+        </label>
+        <label class="block space-y-2 text-sm"
+          ><span>安全约束（每行一项）</span
+          ><textarea
+            v-model="safety"
+            class="min-h-20 w-full rounded-md border bg-background px-3 py-2 text-sm"
+            aria-label="技能安全约束"
+            :disabled="saving"
+          />
+        </label>
+        <p v-if="error" role="alert" class="text-sm text-destructive">
+          {{ error }}
+        </p>
+        <DialogFooter
+          ><Button
+            type="button"
+            variant="outline"
+            :disabled="saving || reading"
+            @click="close(false)"
+            >关闭</Button
+          ><Button
+            type="submit"
+            :disabled="saving || reading || (!raw.trim() && !archive)"
+            >{{
+              saving ? "正在发布…" : reading ? "正在读取…" : "发布技能"
+            }}</Button
+          ></DialogFooter
+        >
+      </form>
+    </DialogContent></Dialog
+  >
+  <Dialog
+    :open="leaveOpen"
+    @update:open="!$event && !saving && settleLeave(false)"
+    ><DialogContent
+      :show-close-button="false"
+      @escape-key-down="$event.preventDefault()"
+      @interact-outside="$event.preventDefault()"
+      ><DialogHeader
+        ><DialogTitle>技能尚未发布</DialogTitle
+        ><DialogDescription
+          >取消可继续编辑；发布成功后继续原操作；放弃会清除本次输入。</DialogDescription
+        ></DialogHeader
+      >
+      <p v-if="error" role="alert" class="text-sm text-destructive">
+        {{ error }}
+      </p>
+      <DialogFooter
+        ><Button
+          variant="outline"
+          :disabled="saving"
+          @click="settleLeave(false)"
+          >取消</Button
+        ><Button variant="destructive" :disabled="saving" @click="discard"
+          >放弃输入</Button
+        ><Button :disabled="saving" @click="saveAndLeave">{{
+          saving ? "正在发布…" : "发布并继续"
+        }}</Button></DialogFooter
+      ></DialogContent
+    ></Dialog
+  >
+</template>

package/template/apps/web/src/pages/system/components/agent-skills/AgentSkillImportDialog.webtest.ts

@@ -0,0 +1,96 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import AgentSkillImportDialog from "./AgentSkillImportDialog.vue";
+const state = vi.hoisted(() => ({
+  publish: vi.fn(),
+  leave: undefined as (() => Promise<boolean>) | undefined,
+}));
+vi.mock("@/services/agent-skills-api", () => ({
+  importAgentSkill: state.publish,
+}));
+vi.mock("vue-router", () => ({
+  onBeforeRouteLeave: (guard: () => Promise<boolean>) => {
+    state.leave = guard;
+  },
+}));
+const stubs = {
+  Dialog: { props: ["open"], template: '<div v-if="open"><slot /></div>' },
+  DialogContent: { template: "<section><slot /></section>" },
+  DialogHeader: { template: "<header><slot /></header>" },
+  DialogTitle: { template: "<h2><slot /></h2>" },
+  DialogDescription: { template: "<p><slot /></p>" },
+  DialogFooter: { template: "<footer><slot /></footer>" },
+};
+const mounted: ReturnType<typeof mount>[] = [];
+function fixture() {
+  const wrapper = mount(AgentSkillImportDialog, {
+    props: { open: true },
+    global: { stubs },
+  });
+  mounted.push(wrapper);
+  return wrapper;
+}
+function button(wrapper: ReturnType<typeof mount>, label: string) {
+  return wrapper.findAll("button").find((item) => item.text() === label)!;
+}
+afterEach(() => {
+  for (const wrapper of mounted.splice(0)) wrapper.unmount();
+  vi.clearAllMocks();
+});
+describe("共享技能导入编辑保护", () => {
+  test("dirty state compares the baseline and blocks refresh only while edited", async () => {
+    const wrapper = fixture();
+    const clean = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(clean);
+    expect(clean.defaultPrevented).toBe(false);
+    await wrapper.get('[aria-label="技能正文"]').setValue("draft");
+    const dirty = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(dirty);
+    expect(dirty.defaultPrevented).toBe(true);
+    await wrapper.get('[aria-label="技能正文"]').setValue("");
+    const restored = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(restored);
+    expect(restored.defaultPrevented).toBe(false);
+  });
+  test("cancel keeps the input and route guard; discard explicitly permits leaving", async () => {
+    const wrapper = fixture();
+    await wrapper.get('[aria-label="技能正文"]').setValue("draft");
+    await button(wrapper, "关闭").trigger("click");
+    expect(wrapper.text()).toContain("技能尚未发布");
+    await button(wrapper, "取消").trigger("click");
+    await flushPromises();
+    expect(wrapper.emitted("update:open")).toBeUndefined();
+    expect(
+      (wrapper.get('[aria-label="技能正文"]').element as HTMLTextAreaElement)
+        .value,
+    ).toBe("draft");
+    const pending = state.leave!();
+    await flushPromises();
+    await button(wrapper, "放弃输入").trigger("click");
+    expect(await pending).toBe(true);
+  });
+  test("failed publish retains input and mutation key, then a successful save clears dirty state", async () => {
+    state.publish
+      .mockRejectedValueOnce(new Error("版本已变化"))
+      .mockResolvedValueOnce({ version: 2 });
+    const wrapper = fixture();
+    await wrapper.get('[aria-label="技能正文"]').setValue("draft");
+    await wrapper.get("form").trigger("submit");
+    await flushPromises();
+    expect(wrapper.text()).toContain("版本已变化");
+    expect(
+      (wrapper.get('[aria-label="技能正文"]').element as HTMLTextAreaElement)
+        .value,
+    ).toBe("draft");
+    expect(wrapper.emitted("update:open")).toBeUndefined();
+    const key = state.publish.mock.calls[0]?.[1];
+    await wrapper.get("form").trigger("submit");
+    await flushPromises();
+    expect(state.publish.mock.calls[1]?.[1]).toBe(key);
+    expect(wrapper.emitted("published")).toHaveLength(1);
+    expect(wrapper.emitted("update:open")).toEqual([[false]]);
+    const unload = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(unload);
+    expect(unload.defaultPrevented).toBe(false);
+  });
+});

package/template/apps/web/src/pages/system/components/agent-skills/AgentSkillsTable.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { AgentSkillGovernanceItem } from "@southwind-ai/shared";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+defineProps<{ items: readonly AgentSkillGovernanceItem[]; loading: boolean }>();
+defineEmits<{ select: [item: AgentSkillGovernanceItem] }>();
+const scopeLabels = { personal: "个人", department: "部门", tenant: "全租户" };
+</script>
+<template>
+  <div class="rounded-xl border" :aria-busy="loading">
+    <Table>
+      <TableHeader
+        ><TableRow
+          ><TableHead>技能</TableHead><TableHead>版本 / 来源</TableHead
+          ><TableHead>共享范围</TableHead><TableHead>状态</TableHead
+          ><TableHead class="text-right">操作</TableHead></TableRow
+        ></TableHeader
+      >
+      <TableBody>
+        <TableRow v-for="item in items" :key="item.skill.key">
+          <TableCell
+            ><div class="font-medium">{{ item.skill.name }}</div>
+            <p class="mt-1 max-w-xl text-xs text-muted-foreground">
+              {{ item.skill.description }}
+            </p></TableCell
+          >
+          <TableCell
+            >v{{ item.skill.version }} ·
+            {{ item.skill.origin === "builtin" ? "内置" : "共享" }}</TableCell
+          >
+          <TableCell>{{ scopeLabels[item.skill.scope] }}</TableCell>
+          <TableCell
+            ><Badge :variant="item.available ? 'secondary' : 'outline'">{{
+              item.skill.status === "disabled"
+                ? "已停用"
+                : item.available
+                  ? "可使用"
+                  : "依赖不可用"
+            }}</Badge></TableCell
+          >
+          <TableCell class="text-right"
+            ><Button
+              type="button"
+              variant="outline"
+              size="sm"
+              @click="$emit('select', item)"
+              >查看详情</Button
+            ></TableCell
+          >
+        </TableRow>
+        <TableRow v-if="!items.length"
+          ><TableCell
+            :colspan="5"
+            class="py-10 text-center text-muted-foreground"
+            >{{ loading ? "正在读取技能…" : "没有符合条件的技能" }}</TableCell
+          ></TableRow
+        >
+      </TableBody>
+    </Table>
+  </div>
+</template>