create-windy 0.1.0

package/template/apps/web/src/pages/system/components/dictionary-bulk/DictionaryBulkJobList.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { BulkDataJob } from "@/services/bulk-data-api";
+import {
+  bulkKindLabel,
+  bulkProgress,
+  bulkStatusLabel,
+  formatBulkTime,
+} from "../../dictionary-bulk-presenter";
+
+const props = defineProps<{
+  jobs: readonly BulkDataJob[];
+  selectedId?: string;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [job: BulkDataJob];
+}>();
+
+const rows = computed(() =>
+  props.jobs.map((job) => ({
+    job,
+    kind: bulkKindLabel(job),
+    status: bulkStatusLabel(job.status),
+    progress: bulkProgress(job),
+    createdAt: formatBulkTime(job.createdAt),
+    retryAt: formatBulkTime(job.nextAttemptAt),
+  })),
+);
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-md border">
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="w-16">序号</TableHead>
+          <TableHead>任务</TableHead>
+          <TableHead>状态</TableHead>
+          <TableHead>进度</TableHead>
+          <TableHead>尝试</TableHead>
+          <TableHead>创建时间</TableHead>
+          <TableHead class="text-right">操作</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <template v-if="loading">
+          <TableRow v-for="row in 4" :key="row" data-testid="bulk-skeleton-row">
+            <TableCell v-for="column in 7" :key="column">
+              <Skeleton class="h-4 w-full max-w-28" />
+            </TableCell>
+          </TableRow>
+        </template>
+        <TableRow v-else-if="rows.length === 0">
+          <TableCell colspan="7" class="h-24 text-center text-muted-foreground">
+            暂无本人提交的字典批量任务
+          </TableCell>
+        </TableRow>
+        <TableRow
+          v-for="(row, index) in rows"
+          v-else
+          :key="row.job.id"
+          :data-selected="row.job.id === selectedId ? 'true' : undefined"
+        >
+          <TableCell>{{ index + 1 }}</TableCell>
+          <TableCell>
+            <div class="space-y-1">
+              <p class="font-medium">{{ row.kind }}</p>
+              <p class="font-mono text-xs text-muted-foreground">
+                {{ row.job.id }}
+              </p>
+            </div>
+          </TableCell>
+          <TableCell>
+            <Badge variant="secondary">{{ row.status }}</Badge>
+            <p
+              v-if="row.job.status === 'retry-pending'"
+              class="mt-1 text-xs text-muted-foreground"
+            >
+              下次重试 {{ row.retryAt }}
+            </p>
+          </TableCell>
+          <TableCell>
+            <div class="min-w-28 space-y-1">
+              <div class="h-1.5 overflow-hidden rounded-full bg-muted">
+                <div
+                  class="h-full rounded-full bg-primary"
+                  :style="{ width: `${row.progress}%` }"
+                />
+              </div>
+              <p class="text-xs text-muted-foreground">
+                {{ row.job.processedRows }} / {{ row.job.totalRows }}（{{
+                  row.progress
+                }}%）
+              </p>
+            </div>
+          </TableCell>
+          <TableCell
+            >{{ row.job.attempt }} / {{ row.job.maxAttempts }}</TableCell
+          >
+          <TableCell>{{ row.createdAt }}</TableCell>
+          <TableCell class="text-right">
+            <Button
+              size="sm"
+              variant="outline"
+              @click="emit('select', row.job)"
+            >
+              查看详情
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</template>

package/template/apps/web/src/pages/system/components/dictionary-bulk/DictionaryBulkPanel.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { RefreshCwIcon } from "@lucide/vue";
+import { useDictionaryBulkJobs } from "../../composables/useDictionaryBulkJobs";
+import DictionaryBulkActions from "./DictionaryBulkActions.vue";
+import DictionaryBulkJobDetail from "./DictionaryBulkJobDetail.vue";
+import DictionaryBulkJobList from "./DictionaryBulkJobList.vue";
+
+const bulk = useDictionaryBulkJobs();
+</script>
+
+<template>
+  <Card data-testid="dictionary-bulk-panel">
+    <CardHeader class="gap-3">
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <CardTitle>字典后台导入导出</CardTitle>
+          <CardDescription class="mt-1">
+            仅处理字典 NDJSON；任务、进度、重试和结果由 PostgreSQL
+            后台作业保存。
+          </CardDescription>
+        </div>
+        <Button
+          variant="outline"
+          :disabled="bulk.loading.value"
+          @click="bulk.reload()"
+        >
+          <RefreshCwIcon data-icon="inline-start" />
+          {{ bulk.loading.value ? "刷新中..." : "刷新本人任务" }}
+        </Button>
+      </div>
+      <Alert v-if="bulk.error.value" variant="destructive">
+        <AlertTitle>{{ bulk.error.value.title }}</AlertTitle>
+        <AlertDescription>{{ bulk.error.value.message }}</AlertDescription>
+      </Alert>
+    </CardHeader>
+    <CardContent class="space-y-5">
+      <DictionaryBulkActions
+        :submitting="bulk.submitting.value"
+        @import="bulk.submitImport"
+        @export="bulk.submitExport"
+      />
+      <section class="space-y-2">
+        <div class="flex items-center justify-between gap-2">
+          <h3 class="text-sm font-medium">本人最近任务</h3>
+          <span class="text-xs text-muted-foreground">
+            运行中任务每 5 秒自动刷新
+          </span>
+        </div>
+        <DictionaryBulkJobList
+          :jobs="bulk.jobs.value"
+          :selected-id="bulk.selectedJob.value?.id"
+          :loading="bulk.loading.value"
+          @select="bulk.select"
+        />
+      </section>
+      <DictionaryBulkJobDetail
+        :job="bulk.selectedJob.value"
+        :downloading="bulk.downloading.value"
+        @download="bulk.download"
+      />
+    </CardContent>
+  </Card>
+</template>

package/template/apps/web/src/pages/system/components/dictionary-bulk/DictionaryBulkPanel.webtest.ts

@@ -0,0 +1,255 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount, type VueWrapper } from "@vue/test-utils";
+import { ApiError } from "@/services/http";
+import type { BulkDataJob } from "@/services/bulk-data-api";
+import DictionaryBulkPanel from "./DictionaryBulkPanel.vue";
+
+const api = vi.hoisted(() => ({
+  createImport: vi.fn(),
+  createExport: vi.fn(),
+  listJobs: vi.fn(),
+  getJob: vi.fn(),
+  downloadArtifact: vi.fn(),
+}));
+
+vi.mock("@/services/bulk-data-api", async () => {
+  const actual = await vi.importActual<
+    typeof import("@/services/bulk-data-api")
+  >("@/services/bulk-data-api");
+  return {
+    ...actual,
+    createDictionaryImport: api.createImport,
+    createDictionaryExport: api.createExport,
+    listDictionaryBulkJobs: api.listJobs,
+    getDictionaryBulkJob: api.getJob,
+    downloadDictionaryBulkArtifact: api.downloadArtifact,
+  };
+});
+
+const wrappers: VueWrapper[] = [];
+
+beforeEach(() => {
+  api.listJobs.mockResolvedValue([]);
+  api.createImport.mockResolvedValue(job({ id: "job-import" }));
+  api.createExport.mockResolvedValue(job({ id: "job-export", kind: "export" }));
+  api.getJob.mockResolvedValue(job({ id: "job-detail" }));
+  api.downloadArtifact.mockResolvedValue({
+    blob: new Blob(["result"]),
+    filename: "dictionaries-result.ndjson",
+  });
+  Object.defineProperty(URL, "createObjectURL", {
+    configurable: true,
+    value: vi.fn(() => "blob:test"),
+  });
+  Object.defineProperty(URL, "revokeObjectURL", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+afterEach(() => {
+  wrappers.splice(0).forEach((wrapper) => wrapper.unmount());
+});
+
+describe("DictionaryBulkPanel", () => {
+  test("只展示本人任务并从列表进入详情和下载终态文件", async () => {
+    const retry = job({
+      id: "job-owned-retry",
+      status: "retry-pending",
+      attempt: 2,
+      nextAttemptAt: "2026-07-10T10:01:00.000Z",
+      totalRows: 10,
+      processedRows: 4,
+    });
+    const completed = job({
+      id: "job-owned-completed",
+      status: "completed-with-errors",
+      totalRows: 3,
+      processedRows: 3,
+      succeededRows: 2,
+      failedRows: 1,
+    });
+    api.listJobs.mockResolvedValue([retry, completed]);
+    api.getJob.mockResolvedValue(completed);
+    const wrapper = mountPanel();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("等待重试");
+    expect(wrapper.text()).toContain("4 / 10（40%）");
+    expect(wrapper.text()).toContain("2 / 3");
+
+    const detailButtons = wrapper
+      .findAll("button")
+      .filter((button) => button.text().includes("查看详情"));
+    await detailButtons[1]!.trigger("click");
+    await flushPromises();
+
+    expect(api.getJob).toHaveBeenCalledExactlyOnceWith("job-owned-completed");
+    expect(wrapper.text()).toContain("失败明细仅含行号");
+    await wrapper.get('[data-testid="bulk-download-result"]').trigger("click");
+    await flushPromises();
+    await wrapper
+      .get('[data-testid="bulk-download-failures"]')
+      .trigger("click");
+    await flushPromises();
+    expect(api.downloadArtifact).toHaveBeenNthCalledWith(
+      1,
+      "job-owned-completed",
+      "result",
+    );
+    expect(api.downloadArtifact).toHaveBeenNthCalledWith(
+      2,
+      "job-owned-completed",
+      "failures",
+    );
+    expect(wrapper.text()).not.toContain("raw-secret-input");
+  });
+
+  test("浏览器自动管理防重复令牌且不暴露普通输入框", async () => {
+    const wrapper = mountPanel();
+    await flushPromises();
+    const content = '{"id":"dict_a","code":"a","name":"raw-secret-input"}\n';
+    const input = wrapper.get('[data-testid="bulk-import-file"]');
+    Object.defineProperty(input.element, "files", {
+      configurable: true,
+      value: [new File([content], "dictionaries.ndjson")],
+    });
+    await input.trigger("change");
+    await wrapper.get('[data-testid="bulk-import-submit"]').trigger("click");
+    await flushPromises();
+
+    expect(api.createImport).toHaveBeenCalledWith(
+      expect.objectContaining({
+        idempotencyKey: expect.stringMatching(/^dict-import:[0-9a-f-]+$/),
+        mode: "upsert",
+        content,
+      }),
+    );
+    expect(wrapper.text()).not.toContain("raw-secret-input");
+    expect(wrapper.find('[data-testid="bulk-import-key"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="bulk-export-key"]').exists()).toBe(
+      false,
+    );
+
+    await wrapper.get('[data-testid="bulk-export-submit"]').trigger("click");
+    await flushPromises();
+    expect(api.createExport).toHaveBeenCalledWith(
+      expect.stringMatching(/^dict-export:[0-9a-f-]+$/),
+    );
+  });
+
+  test("失败重试复用令牌，成功后的新操作生成新令牌", async () => {
+    api.createExport
+      .mockRejectedValueOnce(new Error("network"))
+      .mockResolvedValue(job({ id: "job-export", kind: "export" }));
+    const wrapper = mountPanel();
+    await flushPromises();
+
+    await wrapper.get('[data-testid="bulk-export-submit"]').trigger("click");
+    await flushPromises();
+    await wrapper.get('[data-testid="bulk-export-submit"]').trigger("click");
+    await flushPromises();
+    const retryKey = api.createExport.mock.calls[0]![0];
+    expect(api.createExport.mock.calls[1]![0]).toBe(retryKey);
+
+    await wrapper.get('[data-testid="bulk-export-submit"]').trigger("click");
+    await flushPromises();
+    expect(api.createExport.mock.calls[2]![0]).not.toBe(retryKey);
+  });
+
+  test("超出 10 MiB 的文件在浏览器侧拒绝且不提交", async () => {
+    const wrapper = mountPanel();
+    await flushPromises();
+    const input = wrapper.get('[data-testid="bulk-import-file"]');
+    Object.defineProperty(input.element, "files", {
+      configurable: true,
+      value: [
+        new File([new Uint8Array(10 * 1024 * 1024 + 1)], "too-large.ndjson"),
+      ],
+    });
+    await input.trigger("change");
+    await wrapper.get('[data-testid="bulk-import-submit"]').trigger("click");
+    await flushPromises();
+
+    expect(
+      wrapper.get('[data-testid="bulk-validation-error"]').text(),
+    ).toContain("超过 10 MiB");
+    expect(api.createImport).not.toHaveBeenCalled();
+  });
+
+  test.each([
+    ["超过 50,000 个非空逻辑行", "{}\n".repeat(50_001), "超过 50,000"],
+    [
+      "包含超过 256 KiB 的单行",
+      `{"value":"${"x".repeat(256 * 1024)}"}\n`,
+      "超过 256 KiB",
+    ],
+  ])("%s 时在浏览器侧拒绝且不提交", async (_case, content, message) => {
+    const wrapper = mountPanel();
+    await flushPromises();
+    const input = wrapper.get('[data-testid="bulk-import-file"]');
+    Object.defineProperty(input.element, "files", {
+      configurable: true,
+      value: [new File([content], "invalid.ndjson")],
+    });
+    await input.trigger("change");
+    await wrapper.get('[data-testid="bulk-import-submit"]').trigger("click");
+    await flushPromises();
+
+    expect(
+      wrapper.get('[data-testid="bulk-validation-error"]').text(),
+    ).toContain(message);
+    expect(api.createImport).not.toHaveBeenCalled();
+  });
+
+  test.each([
+    [new ApiError("UNAUTHORIZED", 401, "UNAUTHORIZED"), "登录已失效"],
+    [
+      new ApiError("FORBIDDEN", 403, "FORBIDDEN", "missing-permission"),
+      "权限不足",
+    ],
+    [
+      new ApiError("FORBIDDEN", 403, "FORBIDDEN", "license-restricted"),
+      "License 当前受限",
+    ],
+    [
+      new ApiError("FORBIDDEN", 403, "FORBIDDEN", "feature-disabled"),
+      "批量数据功能未开启",
+    ],
+  ])("分别解释会话、权限、License 与 Feature 阻断", async (error, title) => {
+    api.listJobs.mockRejectedValue(error);
+    const wrapper = mountPanel();
+    await flushPromises();
+
+    expect(wrapper.get('[role="alert"]').text()).toContain(title);
+  });
+});
+
+function mountPanel() {
+  const wrapper = mount(DictionaryBulkPanel);
+  wrappers.push(wrapper);
+  return wrapper;
+}
+
+function job(overrides: Partial<BulkDataJob> = {}): BulkDataJob {
+  return {
+    id: "job-001",
+    kind: "import",
+    resource: "dictionaries",
+    mode: "upsert",
+    status: "queued",
+    idempotencyKey: "dict-import:001",
+    requestedBy: "current-user",
+    totalRows: 0,
+    processedRows: 0,
+    succeededRows: 0,
+    failedRows: 0,
+    attempt: 0,
+    maxAttempts: 3,
+    createdAt: "2026-07-10T10:00:00.000Z",
+    updatedAt: "2026-07-10T10:00:00.000Z",
+    ...overrides,
+  };
+}

package/template/apps/web/src/pages/system/components/feature-license-policy.ts

@@ -0,0 +1,12 @@
+export const platformLicenseVersions = [
+  { key: "standard", label: "标准版" },
+  { key: "advanced", label: "高级版" },
+] as const;
+
+export function formatFeatureLicenseVersions(value: unknown): string {
+  if (!Array.isArray(value) || value.length === 0) return "基础能力";
+  const labels = new Map<string, string>(
+    platformLicenseVersions.map(({ key, label }) => [key, label]),
+  );
+  return value.map((key) => labels.get(String(key)) || String(key)).join("、");
+}

package/template/apps/web/src/pages/system/components/menu-management/MenuManagementPage.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
+import {
+  LoaderCircleIcon,
+  RefreshCwIcon,
+  SaveIcon,
+  SearchIcon,
+} from "@lucide/vue";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
+import MenuStructureTable from "./MenuStructureTable.vue";
+import { useMenuManagement } from "./useMenuManagement";
+
+defineProps<{ canManage: boolean }>();
+const emit = defineEmits<{ mutated: [] }>();
+const menu = useMenuManagement();
+const confirmation = useUnsavedChangesConfirmation();
+
+onMounted(() => {
+  window.addEventListener("beforeunload", preventDirtyUnload);
+  void menu.reload();
+});
+onBeforeUnmount(() =>
+  window.removeEventListener("beforeunload", preventDirtyUnload),
+);
+onBeforeRouteLeave(async () =>
+  menu.dirty.value ? await confirmation.request(save) : true,
+);
+
+async function save(): Promise<boolean> {
+  const saved = await menu.save();
+  if (saved) emit("mutated");
+  return saved;
+}
+
+function preventDirtyUnload(event: BeforeUnloadEvent) {
+  if (!menu.dirty.value) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <section class="space-y-2">
+      <h1 class="text-2xl font-semibold">菜单管理</h1>
+      <p class="text-sm text-muted-foreground">
+        Manifest
+        决定可用菜单和真实路由；拖拽调整目录与同级顺序，保存后才会应用到
+        Sidebar。
+      </p>
+    </section>
+    <Card>
+      <CardHeader class="gap-4">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div class="space-y-1">
+            <CardTitle class="text-base">导航结构</CardTitle>
+            <p v-if="menu.dirty.value" class="text-xs text-muted-foreground">
+              结构有未保存的修改
+            </p>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button
+              variant="outline"
+              :disabled="menu.loading.value || menu.dirty.value"
+              @click="menu.reload"
+            >
+              <RefreshCwIcon data-icon="inline-start" />刷新
+            </Button>
+            <Button
+              v-if="menu.dirty.value && canManage"
+              :disabled="menu.saving.value"
+              @click="save"
+            >
+              <LoaderCircleIcon
+                v-if="menu.saving.value"
+                class="animate-spin"
+                data-icon="inline-start"
+              />
+              <SaveIcon v-else data-icon="inline-start" />
+              {{ menu.saving.value ? "保存中…" : "保存" }}
+            </Button>
+          </div>
+        </div>
+        <div class="relative max-w-md">
+          <SearchIcon
+            class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+          />
+          <Input
+            v-model="menu.keyword.value"
+            class="pl-9"
+            placeholder="搜索 Key、名称或路由"
+          />
+        </div>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <div
+          v-if="menu.error.value"
+          class="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
+        >
+          {{ menu.error.value }}
+        </div>
+        <div
+          v-if="menu.loading.value"
+          class="rounded-lg border p-8 text-center text-sm text-muted-foreground"
+        >
+          正在加载菜单结构…
+        </div>
+        <MenuStructureTable
+          v-else
+          :tree="menu.tree.value"
+          :all-items="menu.draft.value"
+          :can-manage="canManage"
+          @move="menu.move"
+          @toggle-visibility="menu.toggleVisibility"
+        />
+      </CardContent>
+    </Card>
+    <UnsavedChangesDialog
+      :open="confirmation.open.value"
+      :saving="confirmation.saving.value"
+      description="菜单结构尚未保存。取消会留在当前页面；保存成功后才会继续离开。"
+      @cancel="confirmation.cancel"
+      @save="confirmation.save"
+    />
+  </div>
+</template>