create-windy 0.1.0

package/template/apps/web/src/pages/system/SystemResourceRoutePage.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { canToggleFeatureFlags, evaluateWebAccess } from "@/layout/navigation";
+import SystemResourcePage from "./components/SystemResourcePage.vue";
+import MenuManagementPage from "./components/menu-management/MenuManagementPage.vue";
+import {
+  systemResourceConfigs,
+  type SystemResourceKey,
+} from "./resource-config";
+
+const props = defineProps<{
+  resourceKey: SystemResourceKey;
+}>();
+
+const access = useAccessSnapshot();
+const canToggleFeatures = computed(() =>
+  access.snapshot.value ? canToggleFeatureFlags(access.snapshot.value) : false,
+);
+const canManageMenus = computed(() =>
+  Boolean(
+    access.snapshot.value?.actor.permissionKeys.includes("system.menu.manage"),
+  ),
+);
+const departmentCreateMode = computed<"create" | "manage" | undefined>(() => {
+  const permissions = access.snapshot.value?.actor.permissionKeys || [];
+  if (permissions.includes("system.department.create")) return "create";
+  if (permissions.includes("system.department.manage")) return "manage";
+  return undefined;
+});
+// @windy-module system.bulk-data begin
+const bulkDataAccess = computed(() =>
+  access.snapshot.value
+    ? evaluateWebAccess(access.snapshot.value, {
+        permissionKey: "system.dict.read",
+        featureKey: "system.bulk-data",
+      })
+    : { allowed: false, reason: "missing-permission" as const },
+);
+// @windy-module system.bulk-data end
+const optionalResourceProps = computed(() => ({
+  // @windy-module system.bulk-data begin
+  bulkDataAllowed: bulkDataAccess.value.allowed,
+  bulkDataDeniedReason: bulkDataAccess.value.reason,
+  // @windy-module system.bulk-data end
+}));
+const config = computed(() => {
+  const base = systemResourceConfigs[props.resourceKey];
+  const permissionKeys = access.snapshot.value?.actor.permissionKeys || [];
+  return props.resourceKey === "features" && !canToggleFeatures.value
+    ? { ...base, readonly: true }
+    : props.resourceKey === "users" &&
+        !permissionKeys.includes("system.user.manage")
+      ? { ...base, readonly: true }
+      : base;
+});
+
+function handleMutation() {
+  if (props.resourceKey === "features" || props.resourceKey === "menus") {
+    void access.refresh();
+  }
+}
+</script>
+
+<template>
+  <MenuManagementPage
+    v-if="resourceKey === 'menus'"
+    :can-manage="canManageMenus"
+    @mutated="handleMutation"
+  />
+  <SystemResourcePage
+    v-else
+    :key="resourceKey"
+    :config="config"
+    :permissions="access.snapshot.value?.permissions || []"
+    :department-create-mode="departmentCreateMode"
+    v-bind="optionalResourceProps"
+    @mutated="handleMutation"
+  />
+</template>

package/template/apps/web/src/pages/system/SystemResourceRoutePage.webtest.ts

@@ -0,0 +1,100 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { shallowRef } from "vue";
+import type { WebAccessSnapshot } from "@/layout/navigation";
+import MenuManagementPage from "./components/menu-management/MenuManagementPage.vue";
+import SystemResourceRoutePage from "./SystemResourceRoutePage.vue";
+
+const api = vi.hoisted(() => ({ list: vi.fn(), refreshAccess: vi.fn() }));
+
+vi.mock("@/services/system-api", async () => {
+  const actual = await vi.importActual<typeof import("@/services/system-api")>(
+    "@/services/system-api",
+  );
+  return { ...actual, listSystemResource: api.list };
+});
+
+const snapshot = shallowRef<WebAccessSnapshot>({
+  actor: {
+    id: "user_dev",
+    type: "user",
+    name: "开发管理员",
+    roleCodes: ["developer"],
+    permissionKeys: ["system.feature.manage", "system.dict.read"],
+  },
+  menus: [],
+  permissions: [],
+  features: [
+    // @windy-module system.bulk-data begin
+    {
+      key: "system.bulk-data",
+      enabled: true,
+      visible: "visible",
+      allowed: true,
+      reason: "allowed",
+    },
+    // @windy-module system.bulk-data end
+  ],
+});
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot,
+    refresh: api.refreshAccess,
+  }),
+}));
+
+afterEach(() => vi.clearAllMocks());
+
+describe("SystemResourceRoutePage", () => {
+  test("切换系统资源时重建页面状态并请求正确资源", async () => {
+    api.list.mockResolvedValue({ items: [], total: 0, page: 1, pageSize: 10 });
+    const wrapper = mount(SystemResourceRoutePage, {
+      props: { resourceKey: "dictionaries" },
+      global: {
+        stubs: {
+          // @windy-module system.bulk-data begin
+          DictionaryBulkPanel: { template: '<div data-testid="bulk-panel" />' },
+          // @windy-module system.bulk-data end
+        },
+      },
+    });
+    await flushPromises();
+    expect(api.list).toHaveBeenLastCalledWith(
+      "dictionaries",
+      expect.objectContaining({ page: 1 }),
+    );
+    // @windy-module system.bulk-data begin
+    expect(wrapper.find('[data-testid="bulk-panel"]').exists()).toBe(true);
+    // @windy-module system.bulk-data end
+
+    await wrapper.setProps({ resourceKey: "roles" });
+    await flushPromises();
+
+    expect(api.list).toHaveBeenLastCalledWith(
+      "roles",
+      expect.objectContaining({ page: 1 }),
+    );
+    expect(wrapper.find('[data-testid="bulk-panel"]').exists()).toBe(false);
+    expect(wrapper.text()).toContain("权限策略");
+    wrapper.unmount();
+  });
+
+  test("菜单管理使用导航结构页而不是通用 CRUD 表单", async () => {
+    api.list.mockResolvedValue({ items: [], total: 0, page: 1, pageSize: 100 });
+    const wrapper = mount(SystemResourceRoutePage, {
+      props: { resourceKey: "menus" },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Manifest 决定可用菜单和真实路由");
+    expect(wrapper.text()).not.toContain("新增记录");
+    expect(api.list).toHaveBeenCalledWith(
+      "menus",
+      expect.objectContaining({ sort: "parentKey,order,key" }),
+    );
+    wrapper.getComponent(MenuManagementPage).vm.$emit("mutated");
+    expect(api.refreshAccess).toHaveBeenCalledOnce();
+    wrapper.unmount();
+  });
+});

package/template/apps/web/src/pages/system/components/AuditActionCell.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { AUDIT_ACTION_DEFINITIONS } from "@windy/shared";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { SystemRecord } from "@/services/system-api";
+
+const props = defineProps<{
+  item: SystemRecord;
+  actionKey: unknown;
+}>();
+
+const key = computed(() => String(props.actionKey || "unknown"));
+const definition = computed(() =>
+  AUDIT_ACTION_DEFINITIONS.find((item) => item.key === props.actionKey),
+);
+const target = computed(() => record(props.item.target));
+const metadata = computed(() => record(props.item.metadata));
+const details = computed(() => {
+  const values: string[] = [];
+  const message = text(props.item.message);
+  if (message) values.push(`补充说明：${message}`);
+  const targetLabel = text(target.value.label);
+  const targetType = text(target.value.type);
+  const targetId = text(target.value.id);
+  if (targetLabel || targetType || targetId) {
+    values.push(
+      `操作对象：${targetLabel || targetType || "未标注"}${targetId ? `（${targetId}）` : ""}`,
+    );
+  }
+  const query = text(metadata.value.query);
+  if (query) values.push(`搜索内容：${query}`);
+  const matched = metadata.value.matched;
+  if (typeof matched === "number") values.push(`匹配结果：${matched} 条`);
+  const enabled = metadata.value.enabled;
+  if (typeof enabled === "boolean") {
+    values.push(`开关状态：${enabled ? "已启用" : "已停用"}`);
+  }
+  const visible = text(metadata.value.visible);
+  if (visible) {
+    values.push(`入口可见性：${visible === "hidden" ? "隐藏" : "显示"}`);
+  }
+  if (Object.hasOwn(metadata.value, "licenseVersionOverride")) {
+    values.push(formatLicenseScope(metadata.value.licenseVersionOverride));
+  }
+  return values;
+});
+
+function record(value: unknown): Record<string, unknown> {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+function text(value: unknown): string | undefined {
+  return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+
+function formatLicenseScope(value: unknown): string {
+  if (value === null) return "License 范围：跟随模块默认设置";
+  if (!Array.isArray(value) || value.length === 0) {
+    return "License 范围：基础能力（不限制版本）";
+  }
+  return `License 范围：${value.map(String).join("、")}`;
+}
+</script>
+
+<template>
+  <Tooltip>
+    <TooltipTrigger as-child>
+      <button
+        type="button"
+        class="cursor-help text-left underline decoration-dotted underline-offset-4"
+      >
+        {{ definition?.label || key }}
+      </button>
+    </TooltipTrigger>
+    <TooltipContent class="max-w-sm flex-col items-start gap-1 p-3">
+      <p><span class="opacity-70">Key：</span>{{ key }}</p>
+      <p>{{ definition?.description || "平台记录的自定义审计动作。" }}</p>
+      <p v-for="detail in details" :key="detail">{{ detail }}</p>
+    </TooltipContent>
+  </Tooltip>
+</template>

package/template/apps/web/src/pages/system/components/AuditActionCell.webtest.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test } from "vitest";
+import { mount } from "@vue/test-utils";
+import AuditActionCell from "./AuditActionCell.vue";
+
+describe("AuditActionCell", () => {
+  test("显示中文动作名，并在组件库 Tooltip 中解释 key、对象和搜索内容", () => {
+    const wrapper = mount(AuditActionCell, {
+      props: {
+        actionKey: "data.search",
+        item: {
+          id: "audit_search_1",
+          action: "data.search",
+          target: { type: "users" },
+          metadata: { query: "张三", matched: 2 },
+        },
+      },
+      global: {
+        stubs: {
+          Tooltip: { template: "<div><slot /></div>" },
+          TooltipTrigger: { template: "<div><slot /></div>" },
+          TooltipContent: {
+            template: '<div data-testid="tooltip-content"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    expect(wrapper.get("button").text()).toBe("数据搜索");
+    expect(wrapper.get("button").attributes("title")).toBeUndefined();
+    expect(wrapper.get('[data-testid="tooltip-content"]').text()).toContain(
+      "Key：data.search",
+    );
+    expect(wrapper.text()).toContain("操作对象：users");
+    expect(wrapper.text()).toContain("搜索内容：张三");
+    expect(wrapper.text()).toContain("匹配结果：2 条");
+  });
+
+  test("功能开关变更说明状态、可见性和 License 范围", () => {
+    const wrapper = mount(AuditActionCell, {
+      props: {
+        actionKey: "feature.update",
+        item: {
+          id: "audit_feature_1",
+          action: "feature.update",
+          target: { type: "features", id: "system.audit" },
+          metadata: {
+            enabled: false,
+            visible: "hidden",
+            licenseVersionOverride: ["advanced"],
+          },
+        },
+      },
+      global: {
+        stubs: {
+          Tooltip: { template: "<div><slot /></div>" },
+          TooltipTrigger: { template: "<div><slot /></div>" },
+          TooltipContent: { template: "<div><slot /></div>" },
+        },
+      },
+    });
+
+    expect(wrapper.text()).toContain("开关状态：已停用");
+    expect(wrapper.text()).toContain("入口可见性：隐藏");
+    expect(wrapper.text()).toContain("License 范围：advanced");
+  });
+});

package/template/apps/web/src/pages/system/components/AuditLogFilters.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, onMounted, shallowRef, watch } from "vue";
+import { AUDIT_ACTION_DEFINITIONS } from "@windy/shared";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { listSystemResource, type SystemRecord } from "@/services/system-api";
+
+const emit = defineEmits<{
+  change: [
+    filters: { actorId?: string; action?: string; occurredAfter?: string },
+  ];
+  "export-options": [options: { includeScheduler: boolean }];
+}>();
+
+const actorId = shallowRef("all");
+const action = shallowRef("all");
+const timeRange = shallowRef("all");
+const optionSource = shallowRef<SystemRecord[]>([]);
+const includeScheduler = shallowRef(false);
+
+const actors = computed(() => {
+  const options = new Map<string, string>();
+  for (const item of optionSource.value) {
+    const actor = item.actor;
+    if (!actor || typeof actor !== "object" || Array.isArray(actor)) continue;
+    const value = actor as Record<string, unknown>;
+    if (value.id) options.set(String(value.id), String(value.name || value.id));
+  }
+  return [...options].map(([id, name]) => ({ id, name }));
+});
+
+onMounted(async () => {
+  try {
+    const result = await listSystemResource("audit-logs", {
+      page: 1,
+      pageSize: 100,
+      sort: "-occurredAt",
+    });
+    optionSource.value = result.items;
+  } catch {
+    optionSource.value = [];
+  }
+});
+
+watch([actorId, action, timeRange], () => {
+  emit("change", {
+    actorId: actorId.value === "all" ? undefined : actorId.value,
+    action: action.value === "all" ? undefined : action.value,
+    occurredAfter: timeRangeStart(timeRange.value),
+  });
+});
+
+watch(includeScheduler, (value) => {
+  emit("export-options", { includeScheduler: value });
+});
+
+function timeRangeStart(value: string) {
+  const duration = {
+    day: 24 * 60 * 60 * 1_000,
+    week: 7 * 24 * 60 * 60 * 1_000,
+    month: 30 * 24 * 60 * 60 * 1_000,
+  }[value];
+  return duration ? new Date(Date.now() - duration).toISOString() : undefined;
+}
+</script>
+
+<template>
+  <div class="grid gap-3 md:grid-cols-3" data-testid="audit-filters">
+    <Select v-model="actorId">
+      <SelectTrigger aria-label="筛选操作者"><SelectValue /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">全部操作者</SelectItem>
+        <SelectItem v-for="actor in actors" :key="actor.id" :value="actor.id">
+          {{ actor.name }}（{{ actor.id }}）
+        </SelectItem>
+      </SelectContent>
+    </Select>
+
+    <Select v-model="action">
+      <SelectTrigger aria-label="筛选动作"><SelectValue /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">全部动作</SelectItem>
+        <SelectItem
+          v-for="definition in AUDIT_ACTION_DEFINITIONS"
+          :key="definition.key"
+          :value="definition.key"
+        >
+          {{ definition.label }}（{{ definition.key }}）
+        </SelectItem>
+      </SelectContent>
+    </Select>
+
+    <Select v-model="timeRange">
+      <SelectTrigger aria-label="筛选时间"><SelectValue /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">全部时间</SelectItem>
+        <SelectItem value="day">最近 24 小时</SelectItem>
+        <SelectItem value="week">最近 7 天</SelectItem>
+        <SelectItem value="month">最近 30 天</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+  <p class="text-xs text-muted-foreground">
+    操作者选项来自最近 100 条审计记录；动作名称和说明来自平台稳定动作目录。
+  </p>
+  <label class="flex w-fit items-center gap-2 text-sm">
+    <Checkbox v-model="includeScheduler" aria-label="导出时包含定时器日志" />
+    <span>导出时包含定时器日志</span>
+  </label>
+  <p class="text-xs text-muted-foreground">
+    默认不包含；页面列表始终只展示用户与业务操作，定时执行详情请到定时任务查看。
+  </p>
+</template>

package/template/apps/web/src/pages/system/components/AuditLogFilters.webtest.ts

@@ -0,0 +1,59 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { describe, expect, test, vi } from "vitest";
+import { Select } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import AuditLogFilters from "./AuditLogFilters.vue";
+
+const api = vi.hoisted(() => ({ list: vi.fn() }));
+vi.mock("@/services/system-api", async () => ({
+  ...(await vi.importActual<typeof import("@/services/system-api")>(
+    "@/services/system-api",
+  )),
+  listSystemResource: api.list,
+}));
+
+describe("审计日志筛选", () => {
+  test("操作者、动作和时间都是选择控件，动作使用稳定中文目录", async () => {
+    api.list.mockResolvedValue({
+      items: [
+        {
+          id: "audit_1",
+          actor: { id: "user_1", name: "管理员" },
+          action: "feature.update",
+        },
+      ],
+      total: 1,
+      page: 1,
+      pageSize: 100,
+    });
+    const wrapper = mount(AuditLogFilters);
+    await flushPromises();
+
+    const selects = wrapper.findAllComponents(Select);
+    expect(selects).toHaveLength(3);
+    expect(wrapper.get('[aria-label="筛选操作者"]')).toBeTruthy();
+    expect(wrapper.get('[aria-label="筛选动作"]')).toBeTruthy();
+    expect(wrapper.get('[aria-label="筛选时间"]')).toBeTruthy();
+
+    selects[0]?.vm.$emit("update:modelValue", "user_1");
+    selects[1]?.vm.$emit("update:modelValue", "feature.update");
+    selects[2]?.vm.$emit("update:modelValue", "week");
+    await flushPromises();
+
+    const lastChange = wrapper.emitted("change")?.at(-1)?.[0] as
+      | { actorId?: string; action?: string; occurredAfter?: string }
+      | undefined;
+    expect(lastChange).toMatchObject({
+      actorId: "user_1",
+      action: "feature.update",
+    });
+    expect(lastChange?.occurredAfter).toMatch(/^\d{4}-\d{2}-\d{2}T/);
+
+    wrapper.getComponent(Checkbox).vm.$emit("update:modelValue", true);
+    await flushPromises();
+    expect(wrapper.emitted("export-options")?.at(-1)?.[0]).toEqual({
+      includeScheduler: true,
+    });
+    expect(wrapper.text()).toContain("页面列表始终只展示用户与业务操作");
+  });
+});

package/template/apps/web/src/pages/system/components/DiskUsageChart.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Chart } from "@antv/g2";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  useTemplateRef,
+  watch,
+} from "vue";
+import type { OperationSnapshot } from "@/services/operations-api";
+
+const props = defineProps<{
+  disk: OperationSnapshot["diskMonitor"];
+}>();
+const container = useTemplateRef<HTMLDivElement>("container");
+const segments = computed(() => [
+  { name: "系统占用", value: props.disk.system.usedBytes || 0 },
+  { name: "数据占用", value: props.disk.data.usedBytes },
+]);
+const hasUsage = computed(() => segments.value.some(({ value }) => value > 0));
+let chart: Chart | undefined;
+
+onMounted(renderChart);
+watch(segments, renderChart);
+onBeforeUnmount(() => chart?.destroy());
+
+async function renderChart() {
+  if (!container.value || !hasUsage.value) return;
+  chart?.destroy();
+  chart = new Chart({ container: container.value, autoFit: true, height: 220 });
+  chart.options({
+    type: "interval",
+    data: segments.value,
+    coordinate: { type: "theta", innerRadius: 0.58 },
+    transform: [{ type: "stackY" }],
+    encode: { y: "value", color: "name" },
+    legend: { color: { position: "bottom" } },
+    tooltip: { items: [{ channel: "y", valueFormatter: formatBytes }] },
+    animate: false,
+  });
+  await chart.render();
+}
+
+function formatBytes(value: number) {
+  if (value < 1_024) return `${value} B`;
+  if (value < 1_024 ** 2) return `${(value / 1_024).toFixed(1)} KiB`;
+  if (value < 1_024 ** 3) return `${(value / 1_024 ** 2).toFixed(1)} MiB`;
+  return `${(value / 1_024 ** 3).toFixed(1)} GiB`;
+}
+</script>
+
+<template>
+  <div
+    v-if="hasUsage"
+    ref="container"
+    class="h-[220px] w-full"
+    aria-label="Windy 系统与数据磁盘占用饼图"
+  />
+  <p v-else class="py-8 text-center text-sm text-muted-foreground">
+    暂无可绘制的系统与数据容量。
+  </p>
+</template>