create-windy 0.8.3 → 0.9.1

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch } from "vue";
+import type {
+  AgentSkillGovernanceItem,
+  AgentSkillVersion,
+} from "@southwind-ai/shared";
+import {
+  listAgentSkillVersions,
+  readAgentSkill,
+} from "@/services/agent-skills-api";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+const props = defineProps<{ item?: AgentSkillGovernanceItem; open: boolean }>();
+const emit = defineEmits<{
+  "update:open": [open: boolean];
+  "request-action": [action: "disable" | "rollback", version?: number];
+}>();
+const versions = shallowRef<readonly AgentSkillVersion[]>([]),
+  markdown = shallowRef(""),
+  error = shallowRef(""),
+  loading = shallowRef(false);
+const previousVersions = computed(() =>
+  versions.value.filter(
+    (version) =>
+      version.version !== props.item?.skill.version &&
+      version.status === "published",
+  ),
+);
+watch(
+  () => [props.open, props.item?.skill.key] as const,
+  async ([open], _, onCleanup) => {
+    if (!open || !props.item) return;
+    const controller = new AbortController();
+    onCleanup(() => controller.abort());
+    loading.value = true;
+    error.value = "";
+    versions.value = [];
+    markdown.value = "";
+    try {
+      const [history, detail] = await Promise.all([
+        listAgentSkillVersions(props.item.skill.key, controller.signal),
+        readAgentSkill(props.item.skill.key, controller.signal),
+      ]);
+      if (controller.signal.aborted) return;
+      versions.value = history;
+      const encoded = detail.bundle.files.find(
+        (file) => file.path === "SKILL.md",
+      )?.contentBase64;
+      markdown.value = encoded
+        ? new TextDecoder().decode(
+            Uint8Array.from(atob(encoded), (char) => char.charCodeAt(0)),
+          )
+        : "";
+    } catch (cause) {
+      if (!controller.signal.aborted)
+        error.value = cause instanceof Error ? cause.message : "详情读取失败";
+    } finally {
+      if (!controller.signal.aborted) loading.value = false;
+    }
+  },
+  { immediate: true },
+);
+</script>
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="max-h-[85vh] overflow-y-auto sm:max-w-3xl"
+      ><DialogHeader
+        ><DialogTitle
+          >{{ item?.skill.name }} · v{{ item?.skill.version }}</DialogTitle
+        ><DialogDescription
+          >技能内容不授予业务权限，每次使用仍需当前授权与依赖检查。</DialogDescription
+        ></DialogHeader
+      >
+      <p v-if="loading" role="status" class="text-sm text-muted-foreground">
+        正在读取版本与正文…
+      </p>
+      <p v-if="error" role="alert" class="text-sm text-destructive">
+        {{ error }}
+      </p>
+      <template v-if="item">
+        <dl class="grid gap-3 text-sm sm:grid-cols-2">
+          <div>
+            <dt class="text-muted-foreground">稳定标识</dt>
+            <dd>{{ item.skill.key }}</dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">发布来源</dt>
+            <dd>{{ item.skill.source }}</dd>
+          </div>
+          <div class="sm:col-span-2">
+            <dt class="text-muted-foreground">内容摘要</dt>
+            <dd class="break-all font-mono text-xs">{{ item.skill.digest }}</dd>
+          </div>
+        </dl>
+        <section class="space-y-2">
+          <h2 class="text-sm font-medium">能力依赖</h2>
+          <p
+            v-if="!item.skill.requirements.length"
+            class="text-sm text-muted-foreground"
+          >
+            无固定依赖；工具仍按当前会话授权发现。
+          </p>
+          <ul v-else class="space-y-1 text-sm">
+            <li
+              v-for="requirement in item.skill.requirements"
+              :key="requirement.toolKey"
+            >
+              {{ requirement.toolKey }} · {{ requirement.permissionKey }}
+            </li>
+          </ul>
+        </section>
+        <section v-if="item.skill.safetyConstraints.length">
+          <h2 class="mb-2 text-sm font-medium">安全约束</h2>
+          <ul class="list-inside list-disc text-sm">
+            <li v-for="rule in item.skill.safetyConstraints" :key="rule">
+              {{ rule }}
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h2 class="mb-2 text-sm font-medium">SKILL.md</h2>
+          <pre
+            class="max-h-72 overflow-auto rounded-md border bg-muted/30 p-3 text-xs whitespace-pre-wrap"
+            >{{ markdown }}</pre>
+        </section>
+        <section class="space-y-2">
+          <h2 class="text-sm font-medium">版本历史</h2>
+          <div
+            v-for="version in versions"
+            :key="version.version"
+            class="flex flex-wrap items-center justify-between gap-2 rounded-md border p-3 text-sm"
+          >
+            <span
+              >v{{ version.version }} ·
+              {{ version.status === "published" ? "已发布" : "已停用" }} ·
+              {{ version.createdAt
+              }}<span v-if="version.restoredFromVersion"
+                >（恢复自 v{{ version.restoredFromVersion }}）</span
+              ></span
+            ><Button
+              v-if="item.governable && previousVersions.includes(version)"
+              type="button"
+              size="sm"
+              variant="outline"
+              @click="emit('request-action', 'rollback', version.version)"
+              >回滚到此内容</Button
+            >
+          </div>
+        </section>
+        <Button
+          v-if="item.governable && item.skill.status === 'published'"
+          type="button"
+          variant="destructive"
+          @click="emit('request-action', 'disable')"
+          >停用技能</Button
+        >
+      </template>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+defineProps<{
+  open: boolean;
+  action?: "disable" | "rollback";
+  targetVersion?: number;
+  loading: boolean;
+  error: string;
+}>();
+defineEmits<{ "update:open": [value: boolean]; confirm: [] }>();
+</script>
+<template>
+  <Dialog :open="open" @update:open="!loading && $emit('update:open', $event)"
+    ><DialogContent
+      :show-close-button="!loading"
+      @escape-key-down="loading && $event.preventDefault()"
+      @interact-outside="loading && $event.preventDefault()"
+      ><DialogHeader
+        ><DialogTitle>{{
+          action === "disable" ? "停用技能" : "回滚技能"
+        }}</DialogTitle
+        ><DialogDescription>{{
+          action === "disable"
+            ? "停用后新的发现和读取不再提供该共享技能。已执行结果和用户个人副本保持各自生命周期。"
+            : `以 v${targetVersion} 内容发布一个新版本，保留全部历史和审计。`
+        }}</DialogDescription></DialogHeader
+      >
+      <p v-if="error" role="alert" class="text-sm text-destructive">
+        {{ error }}
+      </p>
+      <DialogFooter
+        ><Button
+          variant="outline"
+          :disabled="loading"
+          @click="$emit('update:open', false)"
+          >取消</Button
+        ><Button :disabled="loading" @click="$emit('confirm')">{{
+          loading ? "正在提交…" : "确认"
+        }}</Button></DialogFooter
+      ></DialogContent
+    ></Dialog
+  >
+</template>

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);
+  });
+});