create-windy 0.1.0

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

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import type {
+  PlatformNotification,
+  PublishNotificationInput,
+} from "@windy/shared";
+import { DEFAULT_PAGE_SIZE } from "@windy/shared";
+import { ArchiveIcon, RefreshCwIcon, SendIcon } from "@lucide/vue";
+import { onMounted, shallowRef } from "vue";
+import ConfirmDialog from "@/components/common/ConfirmDialog.vue";
+import DataPagination from "@/components/common/DataPagination.vue";
+import FormDialog from "@/components/common/FormDialog.vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { formatDateTime } from "@/lib/date-time";
+import {
+  archiveNotification,
+  listManagedNotifications,
+  publishNotification,
+} from "@/services/notification-api";
+import NotificationPublishForm from "./components/NotificationPublishForm.vue";
+
+const emptyForm = (): PublishNotificationInput => ({
+  title: "",
+  summary: "",
+  content: "",
+  category: "系统",
+});
+const form = shallowRef(emptyForm());
+const notifications = shallowRef<PlatformNotification[]>([]);
+const loading = shallowRef(false);
+const publishing = shallowRef(false);
+const error = shallowRef("");
+const resultMessage = shallowRef("");
+const confirmOpen = shallowRef(false);
+const publishOpen = shallowRef(false);
+const pendingArchive = shallowRef<PlatformNotification>();
+const page = shallowRef(1);
+const pageSize = shallowRef(DEFAULT_PAGE_SIZE);
+const total = shallowRef(0);
+
+onMounted(loadNotifications);
+
+async function loadNotifications() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const result = await listManagedNotifications(page.value, pageSize.value);
+    notifications.value = result.items;
+    total.value = result.total;
+    page.value = result.page;
+    pageSize.value = result.pageSize;
+  } catch (currentError) {
+    error.value = message(currentError);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function publish() {
+  if (publishing.value) return;
+  publishing.value = true;
+  error.value = "";
+  resultMessage.value = "";
+  try {
+    const notification = await publishNotification({ ...form.value });
+    page.value = 1;
+    notifications.value = [notification, ...notifications.value].slice(
+      0,
+      pageSize.value,
+    );
+    total.value += 1;
+    form.value = emptyForm();
+    publishOpen.value = false;
+    resultMessage.value = "通知已发布，用户现在可以在右上角通知中心阅读。";
+  } catch (currentError) {
+    error.value = message(currentError);
+  } finally {
+    publishing.value = false;
+  }
+}
+
+function setPage(value: number) {
+  page.value = value;
+  void loadNotifications();
+}
+
+function setPageSize(value: number) {
+  pageSize.value = value;
+  page.value = 1;
+  void loadNotifications();
+}
+
+function requestArchive(notification: PlatformNotification) {
+  pendingArchive.value = notification;
+  confirmOpen.value = true;
+}
+
+async function confirmArchive() {
+  const notification = pendingArchive.value;
+  if (!notification) return;
+  loading.value = true;
+  try {
+    const archived = await archiveNotification(notification.id);
+    notifications.value = notifications.value.map((item) =>
+      item.id === archived.id ? archived : item,
+    );
+    resultMessage.value = "通知已归档，不再进入用户收件箱。";
+    confirmOpen.value = false;
+  } catch (currentError) {
+    error.value = message(currentError);
+  } finally {
+    loading.value = false;
+    pendingArchive.value = undefined;
+  }
+}
+
+function message(errorValue: unknown) {
+  return errorValue instanceof Error ? errorValue.message : String(errorValue);
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <header
+      class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between"
+    >
+      <div class="space-y-2">
+        <h1 class="text-2xl font-semibold text-foreground">通知管理</h1>
+        <p class="text-sm text-muted-foreground">
+          发布站内通知、管理生命周期，并与用户已读回执形成闭环。
+        </p>
+      </div>
+      <Button @click="publishOpen = true">
+        <SendIcon data-icon="inline-start" />
+        发布新通知
+      </Button>
+    </header>
+
+    <div
+      v-if="error || resultMessage"
+      class="rounded-md border p-4 text-sm"
+      :class="
+        error ? 'border-destructive/30 text-destructive' : 'text-foreground'
+      "
+    >
+      {{ error || resultMessage }}
+    </div>
+
+    <Card>
+      <CardHeader class="relative gap-3 pr-16">
+        <div class="space-y-1.5">
+          <CardTitle>已发布通知</CardTitle>
+          <CardDescription
+            >归档通知会从用户收件箱移除，历史和回执仍保留。</CardDescription
+          >
+        </div>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              class="absolute right-6 top-6"
+              variant="outline"
+              size="icon"
+              aria-label="刷新已发布通知"
+              :disabled="loading"
+              @click="loadNotifications"
+            >
+              <RefreshCwIcon :class="{ 'animate-spin': loading }" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>刷新已发布通知</TooltipContent>
+        </Tooltip>
+      </CardHeader>
+      <CardContent class="space-y-3">
+        <article
+          v-for="(notification, index) in notifications"
+          :key="notification.id"
+          class="flex flex-col gap-3 rounded-md border p-4 md:flex-row md:items-start md:justify-between"
+        >
+          <div class="min-w-0 space-y-2">
+            <div class="flex flex-wrap items-center gap-2">
+              <h2 class="font-medium text-foreground">
+                {{ (page - 1) * pageSize + index + 1 }}.
+                {{ notification.title }}
+              </h2>
+              <Badge
+                :variant="
+                  notification.status === 'published' ? 'default' : 'secondary'
+                "
+              >
+                {{ notification.status === "published" ? "已发布" : "已归档" }}
+              </Badge>
+              <Badge variant="outline">{{ notification.category }}</Badge>
+            </div>
+            <p class="text-sm text-muted-foreground">
+              {{ notification.summary }}
+            </p>
+            <p class="text-xs text-muted-foreground">
+              发布时间 {{ formatDateTime(notification.publishedAt) }}
+            </p>
+          </div>
+          <Button
+            v-if="notification.status === 'published'"
+            variant="outline"
+            size="sm"
+            @click="requestArchive(notification)"
+          >
+            <ArchiveIcon data-icon="inline-start" />
+            归档
+          </Button>
+        </article>
+        <p
+          v-if="!loading && notifications.length === 0"
+          class="py-8 text-center text-sm text-muted-foreground"
+        >
+          暂无通知，发布后会显示在这里。
+        </p>
+        <DataPagination
+          :page="page"
+          :page-size="pageSize"
+          :total="total"
+          @update:page="setPage"
+          @update:page-size="setPageSize"
+        />
+      </CardContent>
+    </Card>
+
+    <ConfirmDialog
+      v-model:open="confirmOpen"
+      title="归档通知"
+      description="归档后该通知会立即从用户通知中心移除，但历史记录和已读回执会保留。"
+      confirm-text="确认归档"
+      destructive
+      :loading="loading"
+      @confirm="confirmArchive"
+    />
+
+    <FormDialog
+      v-model:open="publishOpen"
+      title="发布新通知"
+      description="发布后立即进入所有已授权用户的通知中心。"
+      submit-text="确认发布"
+      :loading="publishing"
+      prevent-outside-close
+      content-class="sm:max-w-2xl"
+      @submit="publish"
+    >
+      <NotificationPublishForm v-model="form" />
+    </FormDialog>
+  </div>
+</template>

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

@@ -0,0 +1,88 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { describe, expect, test, vi } from "vitest";
+import SystemNotificationsPage from "./SystemNotificationsPage.vue";
+import FormDialog from "@/components/common/FormDialog.vue";
+import NotificationPublishForm from "./components/NotificationPublishForm.vue";
+
+const mocks = vi.hoisted(() => ({
+  list: vi.fn(async () => ({ items: [], total: 0, page: 1, pageSize: 10 })),
+  publish: vi.fn(async (input) => ({
+    id: "notice_1",
+    ...input,
+    status: "published",
+    publishedAt: "2026-07-14T08:00:00.000Z",
+    createdAt: "2026-07-14T08:00:00.000Z",
+    createdBy: "admin",
+    updatedAt: "2026-07-14T08:00:00.000Z",
+    updatedBy: "admin",
+  })),
+  archive: vi.fn(),
+}));
+
+vi.mock("@/services/notification-api", () => ({
+  listManagedNotifications: mocks.list,
+  publishNotification: mocks.publish,
+  archiveNotification: mocks.archive,
+}));
+
+describe("通知管理", () => {
+  test("已发布通知使用右上角纯图标按钮刷新", async () => {
+    const wrapper = mountPage();
+    await flushPromises();
+
+    const refreshButton = wrapper.get('button[aria-label="刷新已发布通知"]');
+    expect(refreshButton.classes()).toContain("absolute");
+    expect(refreshButton.classes()).toContain("right-6");
+    expect(refreshButton.text()).toBe("");
+
+    await refreshButton.trigger("click");
+    await flushPromises();
+    expect(mocks.list).toHaveBeenCalledTimes(2);
+  });
+
+  test("填写标题、摘要、正文和分类后可发布并出现在管理列表", async () => {
+    const wrapper = mountPage();
+    await flushPromises();
+
+    expect(wrapper.find('[name="title"]').exists()).toBe(false);
+    const publishButton = wrapper
+      .findAll("button")
+      .find((button) => button.text().includes("发布新通知"));
+    expect(publishButton).toBeDefined();
+    await publishButton?.trigger("click");
+    await flushPromises();
+
+    expect(wrapper.getComponent(FormDialog).props("preventOutsideClose")).toBe(
+      true,
+    );
+    const publishForm = wrapper.getComponent(NotificationPublishForm);
+    await publishForm.get('[name="title"]').setValue("维护通知");
+    await publishForm.get('[name="summary"]').setValue("今晚进行例行维护");
+    await publishForm.get('[name="content"]').setValue("请提前保存工作。");
+    await publishForm.get('[name="category"]').setValue("系统");
+    wrapper.getComponent(FormDialog).vm.$emit("submit");
+    await flushPromises();
+
+    expect(mocks.publish).toHaveBeenCalledWith({
+      title: "维护通知",
+      summary: "今晚进行例行维护",
+      content: "请提前保存工作。",
+      category: "系统",
+    });
+    expect(wrapper.text()).toContain("维护通知");
+    expect(wrapper.text()).toContain("已发布");
+    expect(wrapper.getComponent(FormDialog).props("open")).toBe(false);
+  });
+});
+
+function mountPage() {
+  return mount(SystemNotificationsPage, {
+    global: {
+      stubs: {
+        Tooltip: { template: "<slot />" },
+        TooltipTrigger: { template: "<slot />" },
+        TooltipContent: true,
+      },
+    },
+  });
+}

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

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { RefreshCwIcon } from "@lucide/vue";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { evaluateWebAccess } from "@/layout/navigation";
+import {
+  getOperationSnapshot,
+  type OperationSnapshot,
+} from "@/services/operations-api";
+import OperationCacheMonitor from "./components/OperationCacheMonitor.vue";
+import OperationOnlineUsers from "./components/OperationOnlineUsers.vue";
+import OperationServiceMonitor from "./components/OperationServiceMonitor.vue";
+// @windy-module system.scheduler begin
+import SchedulerOperationsPanel from "./components/SchedulerOperationsPanel.vue";
+import { useSchedulerOperations } from "./composables/useSchedulerOperations";
+// @windy-module system.scheduler end
+
+const REFRESH_INTERVAL_MS = 5_000;
+const snapshot = shallowRef<OperationSnapshot>();
+const loading = shallowRef(false);
+const error = shallowRef("");
+// @windy-module system.scheduler begin
+const scheduler = useSchedulerOperations();
+// @windy-module system.scheduler end
+const access = useAccessSnapshot();
+let refreshTimer: ReturnType<typeof setInterval> | undefined;
+
+const schedulerAllowed = computed(() => {
+  let allowed = false;
+  // @windy-module system.scheduler begin
+  allowed = access.snapshot.value
+    ? evaluateWebAccess(access.snapshot.value, {
+        permissionKey: "system.scheduler.read",
+        featureKey: "system.scheduler",
+      }).allowed
+    : false;
+  // @windy-module system.scheduler end
+  return allowed;
+});
+
+const refreshing = computed(() => {
+  let active = loading.value;
+  // @windy-module system.scheduler begin
+  active ||= scheduler.loading.value;
+  // @windy-module system.scheduler end
+  return active;
+});
+
+onMounted(() => {
+  void reloadAll();
+  refreshTimer = setInterval(() => void reload(), REFRESH_INTERVAL_MS);
+});
+
+onBeforeUnmount(() => {
+  if (refreshTimer) clearInterval(refreshTimer);
+});
+
+async function reloadAll() {
+  await reload();
+  // @windy-module system.scheduler begin
+  if (schedulerAllowed.value) await scheduler.load();
+  // @windy-module system.scheduler end
+}
+
+async function reload() {
+  if (loading.value) return;
+  loading.value = true;
+  error.value = "";
+  try {
+    snapshot.value = await getOperationSnapshot();
+  } catch (currentError) {
+    error.value =
+      currentError instanceof Error
+        ? currentError.message
+        : String(currentError);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <section
+      class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
+    >
+      <div class="space-y-2">
+        <h1 class="text-2xl font-semibold tracking-normal text-foreground">
+          运维总览
+        </h1>
+        <p class="text-sm text-muted-foreground">
+          查看在线会话、应用与数据库资源、缓存状态和定时任务。
+        </p>
+      </div>
+      <Button variant="outline" :disabled="refreshing" @click="reloadAll">
+        <RefreshCwIcon data-icon="inline-start" />
+        刷新
+      </Button>
+    </section>
+
+    <div
+      v-if="error"
+      class="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
+    >
+      {{ error }}
+    </div>
+
+    <template v-if="snapshot">
+      <OperationServiceMonitor
+        :service="snapshot.serviceMonitor"
+        :database="snapshot.databaseMonitor"
+        :disk="snapshot.diskMonitor"
+      />
+      <OperationOnlineUsers :users="snapshot.onlineUsers" />
+      <OperationCacheMonitor :cache="snapshot.cacheMonitor" />
+    </template>
+
+    <!-- @windy-module system.scheduler begin -->
+    <SchedulerOperationsPanel
+      v-if="schedulerAllowed"
+      :snapshot="scheduler.snapshot.value"
+      :loading="scheduler.loading.value"
+      :triggering-task-key="scheduler.triggeringTaskKey.value"
+      :recovering-run-id="scheduler.recoveringRunId.value"
+      :error="scheduler.error.value"
+      :result-message="scheduler.resultMessage.value"
+      :run-history="scheduler.runHistory.value"
+      @refresh="scheduler.load"
+      @trigger="scheduler.trigger"
+      @recover="scheduler.recover"
+      @update:run-page="scheduler.setRunPage"
+      @update:run-page-size="scheduler.setRunPageSize"
+    />
+    <!-- @windy-module system.scheduler end -->
+    <Card v-if="!schedulerAllowed">
+      <CardHeader>
+        <CardTitle>定时任务</CardTitle>
+        <CardDescription>
+          定时任务能力当前未启用，运维总览不会请求受保护的调度接口。
+        </CardDescription>
+      </CardHeader>
+    </Card>
+  </div>
+</template>

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

@@ -0,0 +1,146 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { shallowRef } from "vue";
+import SystemOperationsPage from "./SystemOperationsPage.vue";
+
+const mocks = vi.hoisted(() => ({
+  loadScheduler: vi.fn(async () => undefined),
+  loadOperations: vi.fn(async () => ({
+    generatedAt: "2026-07-14T10:00:00.000Z",
+    onlineUsers: [],
+    serviceMonitor: {
+      status: "running",
+      runtime: "Bun",
+      startedAt: "2026-07-14T08:00:00.000Z",
+      platform: "darwin",
+      arch: "arm64",
+      memory: {
+        processBytes: 64 * 1_024 ** 2,
+        totalBytes: 16 * 1_024 ** 3,
+        usagePercent: 0.4,
+      },
+    },
+    databaseMonitor: {
+      status: "healthy",
+      engine: "PostgreSQL",
+      version: "16.3",
+      databaseName: "windy",
+      dataBytes: 1_024,
+    },
+    diskMonitor: {
+      host: {
+        status: "available",
+        source: "configured-path",
+        totalBytes: 10_000,
+        availableBytes: 4_000,
+      },
+      system: { status: "available", usedBytes: 5_000 },
+      data: {
+        status: "available",
+        usedBytes: 1_000,
+        databaseBytes: 1_000,
+        importBytes: 0,
+      },
+    },
+    cacheMonitor: {
+      status: "not-configured",
+      provider: "Redis",
+      message: "未配置",
+    },
+  })),
+  schedulerAllowed: false,
+}));
+
+vi.mock("@/services/operations-api", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/services/operations-api")>()),
+  getOperationSnapshot: mocks.loadOperations,
+}));
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot: shallowRef({
+      actor: {
+        id: "user_1",
+        type: "user",
+        name: "管理员",
+        roleCodes: ["developer"],
+        permissionKeys: ["system.ops.read", "system.scheduler.read"],
+      },
+      menus: [],
+      permissions: [],
+      features: [
+        {
+          key: "system.scheduler",
+          enabled: mocks.schedulerAllowed,
+          visible: "visible",
+          allowed: mocks.schedulerAllowed,
+          reason: mocks.schedulerAllowed ? "allowed" : "feature-disabled",
+        },
+      ],
+    }),
+  }),
+}));
+
+vi.mock("./composables/useSchedulerOperations", () => ({
+  useSchedulerOperations: () => ({
+    snapshot: shallowRef(),
+    runHistory: shallowRef({ items: [], total: 0, page: 1, pageSize: 10 }),
+    loading: shallowRef(false),
+    triggeringTaskKey: shallowRef(""),
+    recoveringRunId: shallowRef(""),
+    error: shallowRef(""),
+    resultMessage: shallowRef(""),
+    load: mocks.loadScheduler,
+    trigger: vi.fn(),
+    recover: vi.fn(),
+    setRunPage: vi.fn(),
+    setRunPageSize: vi.fn(),
+  }),
+}));
+
+describe("运维总览调度能力", () => {
+  beforeEach(() => {
+    mocks.loadScheduler.mockClear();
+    mocks.loadOperations.mockClear();
+    mocks.schedulerAllowed = false;
+  });
+
+  test("调度 Feature 未获准时不请求受保护接口", async () => {
+    const wrapper = mount(SystemOperationsPage, {
+      global: {
+        stubs: {
+          SchedulerOperationsPanel: true,
+          OperationServiceMonitor: true,
+          OperationOnlineUsers: true,
+          OperationCacheMonitor: true,
+        },
+      },
+    });
+    await flushPromises();
+
+    expect(mocks.loadOperations).toHaveBeenCalledTimes(1);
+    expect(mocks.loadScheduler).not.toHaveBeenCalled();
+    expect(wrapper.text()).toContain("定时任务能力当前未启用");
+    wrapper.unmount();
+  });
+
+  // @windy-module system.scheduler begin
+  test("调度 Feature 获准时读取调度状态", async () => {
+    mocks.schedulerAllowed = true;
+    const wrapper = mount(SystemOperationsPage, {
+      global: {
+        stubs: {
+          SchedulerOperationsPanel: true,
+          OperationServiceMonitor: true,
+          OperationOnlineUsers: true,
+          OperationCacheMonitor: true,
+        },
+      },
+    });
+    await flushPromises();
+
+    expect(mocks.loadScheduler).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+  });
+  // @windy-module system.scheduler end
+});