create-windy 0.1.0

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

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch } from "vue";
+import FormDialog from "@/components/common/FormDialog.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { SystemRecord } from "@/services/system-api";
+import {
+  formatFeatureLicenseVersions,
+  platformLicenseVersions,
+} from "./feature-license-policy";
+
+type PolicyMode = "manifest" | "unrestricted" | "versions";
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps<{
+  item?: SystemRecord;
+  loading?: boolean;
+}>();
+const emit = defineEmits<{
+  save: [licenseVersionOverride: string[] | null];
+}>();
+
+const mode = shallowRef<PolicyMode>("manifest");
+const selectedVersions = shallowRef<string[]>([]);
+const submitDisabled = computed(
+  () => mode.value === "versions" && selectedVersions.value.length === 0,
+);
+const manifestPolicy = computed(() =>
+  formatFeatureLicenseVersions(props.item?.manifestAllowedLicenseVersions),
+);
+
+watch(
+  () => [open.value, props.item] as const,
+  () => resetDraft(),
+  { immediate: true },
+);
+
+function resetDraft() {
+  const override = props.item?.licenseVersionOverride;
+  if (!Array.isArray(override)) {
+    mode.value = "manifest";
+    selectedVersions.value = [];
+    return;
+  }
+  mode.value = override.length ? "versions" : "unrestricted";
+  selectedVersions.value = [...override];
+}
+
+function toggleVersion(key: string, checked: boolean) {
+  const selected = new Set(selectedVersions.value);
+  if (checked) selected.add(key);
+  else selected.delete(key);
+  selectedVersions.value = platformLicenseVersions
+    .map(({ key: versionKey }) => versionKey)
+    .filter((versionKey) => selected.has(versionKey));
+}
+
+function save() {
+  if (submitDisabled.value) return;
+  emit(
+    "save",
+    mode.value === "manifest"
+      ? null
+      : mode.value === "unrestricted"
+        ? []
+        : selectedVersions.value,
+  );
+}
+</script>
+
+<template>
+  <FormDialog
+    v-model:open="open"
+    title="编辑 License 范围"
+    :description="`设置「${String(item?.label || item?.id || '功能')}」可使用的 License 版本。`"
+    :loading="loading"
+    :submit-disabled="submitDisabled"
+    content-class="sm:max-w-lg"
+    @submit="save"
+  >
+    <div class="flex flex-col gap-4">
+      <label class="flex flex-col gap-2 text-sm font-medium">
+        <span>范围策略</span>
+        <Select v-model="mode">
+          <SelectTrigger class="w-full">
+            <SelectValue placeholder="选择 License 范围策略" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="manifest">
+                沿用 Manifest 默认（{{ manifestPolicy }}）
+              </SelectItem>
+              <SelectItem value="unrestricted"
+                >基础能力（不限制版本）</SelectItem
+              >
+              <SelectItem value="versions">指定 License 版本</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </label>
+
+      <fieldset
+        v-if="mode === 'versions'"
+        class="flex flex-col gap-3 rounded-lg border p-4"
+      >
+        <legend class="px-1 text-sm font-medium">允许的版本</legend>
+        <label
+          v-for="version in platformLicenseVersions"
+          :key="version.key"
+          class="flex items-center gap-2 text-sm"
+        >
+          <Checkbox
+            :model-value="selectedVersions.includes(version.key)"
+            @update:model-value="toggleVersion(version.key, $event === true)"
+          />
+          {{ version.label }}
+        </label>
+        <p v-if="submitDisabled" class="text-xs text-destructive">
+          指定版本时至少选择一个 License 版本。
+        </p>
+      </fieldset>
+
+      <p class="text-xs text-muted-foreground">
+        未覆盖时，功能升级会继续跟随代码 Manifest；设置覆盖后，运行时 Guard
+        将以这里保存的范围为准。
+      </p>
+    </div>
+  </FormDialog>
+</template>

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

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "vitest";
+import { mount } from "@vue/test-utils";
+import FormDialog from "@/components/common/FormDialog.vue";
+import FeatureLicensePolicyDialog from "./FeatureLicensePolicyDialog.vue";
+import { formatFeatureLicenseVersions } from "./feature-license-policy";
+
+describe("功能 License 范围编辑", () => {
+  test("数据库覆盖值回填后按稳定版本顺序保存", async () => {
+    const wrapper = mount(FeatureLicensePolicyDialog, {
+      attachTo: document.body,
+      props: {
+        open: true,
+        item: {
+          id: "system.bulk-data",
+          label: "批量数据任务",
+          manifestAllowedLicenseVersions: ["advanced"],
+          licenseVersionOverride: ["advanced"],
+        },
+      },
+    });
+
+    expect(formatFeatureLicenseVersions(["standard", "advanced"])).toBe(
+      "标准版、高级版",
+    );
+    expect(wrapper.getComponent(FormDialog).props("title")).toBe(
+      "编辑 License 范围",
+    );
+    wrapper.getComponent(FormDialog).vm.$emit("submit");
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted("save")).toEqual([[["advanced"]]]);
+    wrapper.unmount();
+  });
+
+  test("基础能力保存空覆盖，恢复默认保存 null", async () => {
+    const unrestricted = mount(FeatureLicensePolicyDialog, {
+      props: {
+        open: true,
+        item: {
+          id: "system.audit",
+          label: "审计日志",
+          manifestAllowedLicenseVersions: ["advanced"],
+          licenseVersionOverride: [],
+        },
+      },
+    });
+    unrestricted.getComponent(FormDialog).vm.$emit("submit");
+    await unrestricted.vm.$nextTick();
+    expect(unrestricted.emitted("save")?.at(-1)).toEqual([[]]);
+    unrestricted.unmount();
+
+    const manifest = mount(FeatureLicensePolicyDialog, {
+      props: {
+        open: true,
+        item: {
+          id: "system.audit",
+          label: "审计日志",
+          manifestAllowedLicenseVersions: ["advanced"],
+        },
+      },
+    });
+    manifest.getComponent(FormDialog).vm.$emit("submit");
+    await manifest.vm.$nextTick();
+    expect(manifest.emitted("save")?.at(-1)).toEqual([null]);
+    manifest.unmount();
+  });
+});

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { PublishNotificationInput } from "@windy/shared";
+import { Input } from "@/components/ui/input";
+
+const model = defineModel<PublishNotificationInput>({ required: true });
+
+function update(key: keyof PublishNotificationInput, value: string | number) {
+  model.value = { ...model.value, [key]: String(value) };
+}
+</script>
+
+<template>
+  <div class="grid gap-4 md:grid-cols-2">
+    <label class="space-y-2 text-sm font-medium">
+      <span>标题</span>
+      <Input
+        :model-value="model.title"
+        name="title"
+        maxlength="120"
+        required
+        @update:model-value="update('title', $event)"
+      />
+    </label>
+    <label class="space-y-2 text-sm font-medium">
+      <span>分类</span>
+      <Input
+        :model-value="model.category"
+        name="category"
+        maxlength="40"
+        required
+        @update:model-value="update('category', $event)"
+      />
+    </label>
+  </div>
+  <label class="block space-y-2 text-sm font-medium">
+    <span>摘要</span>
+    <Input
+      :model-value="model.summary"
+      name="summary"
+      maxlength="240"
+      required
+      @update:model-value="update('summary', $event)"
+    />
+  </label>
+  <label class="block space-y-2 text-sm font-medium">
+    <span>正文</span>
+    <textarea
+      :value="model.content"
+      name="content"
+      maxlength="10000"
+      required
+      rows="8"
+      class="flex min-h-40 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50"
+      @input="update('content', ($event.target as HTMLTextAreaElement).value)"
+    />
+  </label>
+</template>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { OperationSnapshot } from "@/services/operations-api";
+
+const props = defineProps<{ cache: OperationSnapshot["cacheMonitor"] }>();
+const statusLabel = computed(
+  () =>
+    ({
+      healthy: "正常",
+      timeout: "超时",
+      "authentication-failed": "认证失败",
+      unavailable: "不可用",
+      "not-configured": "未配置",
+    })[props.cache.status],
+);
+const rows = computed(() => {
+  const rows: Array<[string, string]> = [];
+  if (props.cache.target) rows.push(["连接目标", props.cache.target]);
+  if (props.cache.latencyMs !== undefined)
+    rows.push(["探活延迟", `${props.cache.latencyMs} ms`]);
+  if (props.cache.metrics) {
+    rows.push(["当前键数", String(props.cache.metrics.keyCount)]);
+    rows.push(["连接客户端", String(props.cache.metrics.connectedClients)]);
+    rows.push(["已用内存", formatBytes(props.cache.metrics.usedMemoryBytes)]);
+    rows.push([
+      "内存上限",
+      props.cache.metrics.maxMemoryBytes === null
+        ? "未限制"
+        : `${formatBytes(props.cache.metrics.maxMemoryBytes)} (${props.cache.metrics.memoryUsagePercent ?? 0}%)`,
+    ]);
+  }
+  return rows;
+});
+
+function formatBytes(bytes: number) {
+  if (bytes < 1_024) return `${bytes} B`;
+  if (bytes < 1_024 ** 2) return `${(bytes / 1_024).toFixed(1)} KiB`;
+  return `${(bytes / 1_024 ** 2).toFixed(1)} MiB`;
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>缓存监控</CardTitle>
+      <CardDescription>平台 Redis 实时状态</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-3">
+      <Badge :variant="cache.status === 'healthy' ? 'default' : 'outline'">
+        {{ statusLabel }}
+      </Badge>
+      <p class="text-sm text-muted-foreground">{{ cache.message }}</p>
+      <dl class="space-y-2 text-sm">
+        <div
+          v-for="[label, value] in rows"
+          :key="label"
+          class="flex justify-between gap-4"
+        >
+          <dt class="text-muted-foreground">{{ label }}</dt>
+          <dd class="break-all text-right font-medium">{{ value }}</dd>
+        </div>
+      </dl>
+    </CardContent>
+  </Card>
+</template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { OperationSnapshot } from "@/services/operations-api";
+import { formatDateTime } from "@/lib/date-time";
+
+defineProps<{ users: OperationSnapshot["onlineUsers"] }>();
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>在线用户</CardTitle>
+      <CardDescription>最近 15 分钟有活动且仍然有效的登录会话</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-3">
+      <article
+        v-for="(user, index) in users"
+        :key="user.sessionId"
+        class="rounded-md border p-3"
+      >
+        <div class="space-y-1">
+          <span class="font-medium">
+            {{ index + 1 }}. {{ user.displayName }}
+          </span>
+          <p class="text-xs text-muted-foreground">{{ user.username }}</p>
+        </div>
+        <div
+          class="mt-3 flex flex-col gap-2 border-t pt-3 sm:flex-row sm:items-end sm:justify-between"
+        >
+          <div
+            data-testid="session-information"
+            class="space-y-1 break-all text-xs text-muted-foreground"
+          >
+            <p>IP {{ user.ip || "未知" }}</p>
+            <p>最近活动 {{ formatDateTime(user.lastSeenAt) }}</p>
+          </div>
+          <div
+            data-testid="session-status"
+            class="flex items-center gap-2 sm:justify-end"
+          >
+            <span class="text-xs text-muted-foreground">
+              有效至 {{ formatDateTime(user.expiresAt) }}
+            </span>
+            <Badge variant="secondary">{{ user.status }}</Badge>
+          </div>
+        </div>
+      </article>
+      <p v-if="users.length === 0" class="text-sm text-muted-foreground">
+        暂无可见活动会话。
+      </p>
+    </CardContent>
+  </Card>
+</template>

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

@@ -0,0 +1,35 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import OperationOnlineUsers from "./OperationOnlineUsers.vue";
+
+describe("在线用户面板", () => {
+  test("会话信息与状态操作区分列展示", () => {
+    const wrapper = mount(OperationOnlineUsers, {
+      props: {
+        users: [
+          {
+            sessionId: "session_1",
+            userId: "user_1",
+            username: "admin",
+            displayName: "管理员",
+            status: "online",
+            ip: "10.0.0.8",
+            issuedAt: "2026-07-14T08:00:00.000Z",
+            lastSeenAt: "2026-07-14T08:10:00.000Z",
+            expiresAt: "2026-07-14T16:00:00.000Z",
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.get('[data-testid="session-information"]').text()).toContain(
+      "IP 10.0.0.8",
+    );
+    expect(wrapper.get('[data-testid="session-status"]').text()).toContain(
+      "有效至",
+    );
+    expect(wrapper.get('[data-testid="session-status"]').text()).toContain(
+      "online",
+    );
+  });
+});

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { OperationSnapshot } from "@/services/operations-api";
+import { formatDateTime } from "@/lib/date-time";
+import DiskUsageChart from "./DiskUsageChart.vue";
+
+defineProps<{
+  service: OperationSnapshot["serviceMonitor"];
+  database: OperationSnapshot["databaseMonitor"];
+  disk: OperationSnapshot["diskMonitor"];
+}>();
+
+function formatBytes(value?: number) {
+  if (value === undefined) return "未知";
+  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>
+  <Card>
+    <CardHeader>
+      <CardTitle>服务监控</CardTitle>
+      <CardDescription>应用进程、数据库与主机资源实时状态</CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-6">
+      <section class="space-y-3">
+        <div class="flex flex-wrap items-center gap-2">
+          <Badge>{{ service.status }}</Badge>
+          <span class="text-sm font-medium">{{ service.runtime }}</span>
+          <span class="text-sm text-muted-foreground">
+            {{ service.platform }}/{{ service.arch }}
+          </span>
+        </div>
+        <dl class="space-y-2 text-sm">
+          <div class="flex justify-between gap-4">
+            <dt class="text-muted-foreground">启动时间</dt>
+            <dd class="font-medium">{{ formatDateTime(service.startedAt) }}</dd>
+          </div>
+          <div class="flex justify-between gap-4">
+            <dt class="text-muted-foreground">数据库</dt>
+            <dd class="font-medium">
+              {{ database.engine }} {{ database.version }}
+            </dd>
+          </div>
+          <div v-if="database.databaseName" class="flex justify-between gap-4">
+            <dt class="text-muted-foreground">数据库名称</dt>
+            <dd class="font-medium">{{ database.databaseName }}</dd>
+          </div>
+        </dl>
+      </section>
+
+      <section class="space-y-2">
+        <div class="flex justify-between gap-4 text-sm">
+          <span class="font-medium">进程内存占用</span>
+          <span class="text-muted-foreground">
+            {{ formatBytes(service.memory.processBytes) }} /
+            {{ formatBytes(service.memory.totalBytes) }} ·
+            {{ service.memory.usagePercent }}%
+          </span>
+        </div>
+        <div
+          role="progressbar"
+          aria-label="进程内存占用"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-valuenow="service.memory.usagePercent"
+          class="h-3 overflow-hidden rounded-full bg-muted"
+        >
+          <div
+            class="h-full rounded-full bg-primary transition-[width] duration-500"
+            :style="{ width: `${service.memory.usagePercent}%` }"
+          />
+        </div>
+      </section>
+
+      <section class="space-y-3">
+        <div>
+          <h3 class="text-sm font-medium">磁盘占用</h3>
+          <p class="text-xs text-muted-foreground">
+            饼图只比较 Windy 系统运行目录与数据容量；宿主机总容量单独展示。
+          </p>
+        </div>
+        <DiskUsageChart :disk="disk" />
+        <div class="flex flex-wrap gap-x-6 gap-y-2 text-xs">
+          <span>宿主机总容量 {{ formatBytes(disk.host.totalBytes) }}</span>
+          <span>系统占用 {{ formatBytes(disk.system.usedBytes) }}</span>
+          <span>数据占用 {{ formatBytes(disk.data.usedBytes) }}</span>
+          <span>数据库 {{ formatBytes(disk.data.databaseBytes) }}</span>
+          <span>独立导入目录 {{ formatBytes(disk.data.importBytes) }}</span>
+        </div>
+        <p
+          v-if="disk.system.refreshIntervalMs"
+          class="text-xs text-muted-foreground"
+        >
+          系统目录每
+          {{ disk.system.refreshIntervalMs / 1_000 }} 秒刷新；监控路径
+          {{ disk.system.paths?.join("、") || disk.system.path }}
+        </p>
+        <p
+          v-if="disk.host.message || disk.system.message || disk.data.message"
+          class="text-xs text-muted-foreground"
+        >
+          {{ disk.host.message || disk.system.message || disk.data.message }}
+        </p>
+      </section>
+    </CardContent>
+  </Card>
+</template>

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

@@ -0,0 +1,64 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import OperationServiceMonitor from "./OperationServiceMonitor.vue";
+
+describe("服务监控面板", () => {
+  test("展示数据库版本、启动时间、内存条和磁盘分区数据", () => {
+    const wrapper = mount(OperationServiceMonitor, {
+      props: {
+        service: {
+          status: "running",
+          runtime: "Bun",
+          startedAt: "2026-07-14T08:09:10.000Z",
+          platform: "linux",
+          arch: "x64",
+          memory: {
+            processBytes: 2_048,
+            totalBytes: 10_000,
+            usagePercent: 20.48,
+          },
+        },
+        database: {
+          status: "healthy",
+          engine: "PostgreSQL",
+          version: "16.3",
+          databaseName: "windy",
+          dataBytes: 1_024,
+        },
+        disk: {
+          host: {
+            status: "unknown",
+            source: "unconfigured",
+            message: "容器未配置宿主机文件系统挂载。",
+          },
+          system: {
+            status: "available",
+            usedBytes: 4_976,
+            paths: ["/app/data/audit"],
+            refreshedAt: "2026-07-14T08:09:00.000Z",
+            refreshIntervalMs: 60_000,
+          },
+          data: {
+            status: "available",
+            usedBytes: 1_024,
+            databaseBytes: 1_024,
+            importBytes: 0,
+          },
+        },
+      },
+      global: { stubs: { DiskUsageChart: true } },
+    });
+
+    expect(wrapper.text()).toContain("PostgreSQL 16.3");
+    expect(wrapper.text()).toContain("2026-07-14 16:09:10");
+    expect(wrapper.get('[role="progressbar"]').attributes()).toMatchObject({
+      "aria-valuenow": "20.48",
+      "aria-label": "进程内存占用",
+    });
+    expect(wrapper.text()).toContain("系统占用");
+    expect(wrapper.text()).toContain("数据占用");
+    expect(wrapper.text()).toContain("宿主机总容量 未知");
+    expect(wrapper.text()).toContain("容器未配置宿主机文件系统挂载");
+    expect(wrapper.text()).toContain("每 60 秒刷新");
+  });
+});