create-windy 0.1.0

package/template/apps/web/src/layout/navigation.ts

@@ -0,0 +1,103 @@
+import type {
+  CredentialState,
+  MenuNode,
+  PermissionDefinition,
+} from "@windy/shared";
+
+export interface WebAccessActor {
+  id: string;
+  type: "anonymous" | "user" | "service";
+  name: string;
+  username?: string;
+  displayName?: string;
+  email?: string;
+  phone?: string;
+  credentialState?: CredentialState;
+  passwordChangedAt?: string;
+  roleCodes: string[];
+  permissionKeys: string[];
+}
+
+export interface WebFeatureAccess {
+  key: string;
+  enabled: boolean;
+  visible: "visible" | "hidden";
+  allowed: boolean;
+  reason: string;
+}
+
+export interface WebAccessSnapshot {
+  actor: WebAccessActor;
+  menus: MenuNode[];
+  features: WebFeatureAccess[];
+  permissions: PermissionDefinition[];
+}
+
+export interface AccessRequirement {
+  permissionKey?: string;
+  featureKey?: string;
+}
+
+export interface WebAccessDecision {
+  allowed: boolean;
+  reason: "allowed" | "missing-permission" | "feature-disabled";
+}
+
+export const dashboardMenu: MenuNode = {
+  key: "dashboard",
+  title: "工作台",
+  type: "menu",
+  order: 0,
+  visible: true,
+  path: "/admin",
+  icon: "layout-dashboard",
+};
+
+export function evaluateWebAccess(
+  snapshot: WebAccessSnapshot,
+  requirement: AccessRequirement,
+): WebAccessDecision {
+  if (
+    requirement.permissionKey &&
+    !snapshot.actor.permissionKeys.includes(requirement.permissionKey)
+  ) {
+    return { allowed: false, reason: "missing-permission" };
+  }
+  if (requirement.featureKey) {
+    const feature = snapshot.features.find(
+      (item) => item.key === requirement.featureKey,
+    );
+    if (!feature?.allowed) {
+      return { allowed: false, reason: "feature-disabled" };
+    }
+  }
+  return { allowed: true, reason: "allowed" };
+}
+
+export function authorizedSidebarMenus(
+  snapshot: WebAccessSnapshot,
+): MenuNode[] {
+  return [dashboardMenu, ...snapshot.menus]
+    .map((menu) => authorizeMenu(menu, snapshot))
+    .filter((menu): menu is MenuNode => Boolean(menu))
+    .sort((left, right) => left.order - right.order);
+}
+
+export function canToggleFeatureFlags(snapshot: WebAccessSnapshot): boolean {
+  return snapshot.actor.permissionKeys.includes("system.feature.manage");
+}
+
+function authorizeMenu(
+  menu: MenuNode,
+  snapshot: WebAccessSnapshot,
+): MenuNode | undefined {
+  if (!menu.visible) return undefined;
+  const children = menu.children
+    ?.map((child) => authorizeMenu(child, snapshot))
+    .filter((child): child is MenuNode => Boolean(child));
+  const access = evaluateWebAccess(snapshot, menu);
+  if (!access.allowed || (menu.type === "catalog" && children?.length === 0)) {
+    return undefined;
+  }
+  return { ...menu, children };
+}

package/template/apps/web/src/layout/navigation.webtest.ts

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "vitest";
+import type { MenuNode } from "@windy/shared";
+import {
+  authorizedSidebarMenus,
+  canToggleFeatureFlags,
+  evaluateWebAccess,
+  type WebAccessSnapshot,
+} from "./navigation";
+
+describe("Web 访问快照", () => {
+  test("菜单同时受服务端权限和 Feature 有效态约束", () => {
+    const snapshot = accessSnapshot();
+    snapshot.features[0]!.allowed = false;
+    snapshot.features[0]!.reason = "feature-disabled";
+
+    const menus = authorizedSidebarMenus(snapshot);
+
+    expect(flattenKeys(menus)).toContain("dashboard");
+    expect(flattenKeys(menus)).not.toContain("system.audit");
+    expect(
+      evaluateWebAccess(snapshot, {
+        permissionKey: "system.audit.read",
+        featureKey: "system.audit",
+      }),
+    ).toEqual({ allowed: false, reason: "feature-disabled" });
+  });
+
+  test("Feature 管理以权限为准，不硬编码角色名称", () => {
+    const snapshot = accessSnapshot();
+    snapshot.actor.roleCodes = ["admin"];
+    snapshot.actor.permissionKeys.push("system.feature.manage");
+    expect(canToggleFeatureFlags(snapshot)).toBe(true);
+
+    snapshot.actor.permissionKeys = snapshot.actor.permissionKeys.filter(
+      (permission) => permission !== "system.feature.manage",
+    );
+    expect(canToggleFeatureFlags(snapshot)).toBe(false);
+  });
+
+  test("保留服务端显式返回空 children 的授权叶子菜单", () => {
+    const snapshot = accessSnapshot();
+    snapshot.menus[0]!.children![0]!.children = [];
+
+    expect(flattenKeys(authorizedSidebarMenus(snapshot))).toContain(
+      "system.audit",
+    );
+  });
+});
+
+function accessSnapshot(): WebAccessSnapshot {
+  const menus: MenuNode[] = [
+    {
+      key: "system",
+      title: "系统管理",
+      type: "catalog",
+      order: 10,
+      visible: true,
+      children: [
+        {
+          key: "system.audit",
+          title: "审计日志",
+          type: "menu",
+          order: 10,
+          visible: true,
+          path: "/admin/system/audit",
+          permissionKey: "system.audit.read",
+          featureKey: "system.audit",
+        },
+      ],
+    },
+  ];
+  return {
+    actor: {
+      id: "user_1",
+      type: "user",
+      name: "审计员",
+      roleCodes: ["auditor"],
+      permissionKeys: ["system.audit.read"],
+    },
+    menus,
+    permissions: [],
+    features: [
+      {
+        key: "system.audit",
+        enabled: true,
+        visible: "visible",
+        allowed: true,
+        reason: "allowed",
+      },
+    ],
+  };
+}
+
+function flattenKeys(menus: MenuNode[]): string[] {
+  return menus.flatMap((menu) => [
+    menu.key,
+    ...flattenKeys(menu.children || []),
+  ]);
+}

package/template/apps/web/src/lib/date-time.ts

@@ -0,0 +1,21 @@
+const dateTimeFormatter = new Intl.DateTimeFormat("zh-CN", {
+  timeZone: "Asia/Shanghai",
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hourCycle: "h23",
+});
+
+export function formatDateTime(value: unknown): string {
+  const date = value instanceof Date ? value : new Date(String(value || ""));
+  if (Number.isNaN(date.getTime())) return "-";
+  const parts = Object.fromEntries(
+    dateTimeFormatter
+      .formatToParts(date)
+      .map(({ type, value: partValue }) => [type, partValue]),
+  );
+  return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}:${parts.second}`;
+}

package/template/apps/web/src/lib/date-time.webtest.ts

@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest";
+import { formatDateTime } from "./date-time";
+
+describe("formatDateTime", () => {
+  test("固定使用 Asia/Shanghai 的 24 小时时间显示到秒", () => {
+    expect(formatDateTime("2026-07-14T01:05:06.000Z")).toBe(
+      "2026-07-14 09:05:06",
+    );
+  });
+
+  test("无效时间显示占位符", () => {
+    expect(formatDateTime("not-a-date")).toBe("-");
+  });
+});

package/template/apps/web/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template/apps/web/src/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import { router } from "./router";
+import { installUnauthorizedNavigation } from "./router/auth-navigation";
+import { setUnauthorizedHandler } from "./services/http";
+import "./style.css";
+
+setUnauthorizedHandler(installUnauthorizedNavigation(router));
+const app = createApp(App).use(router);
+await router.isReady();
+app.mount("#app");

package/template/apps/web/src/pages/AccessDeniedPage.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import { useRouter } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAuthSession } from "@/composables/useAuthSession";
+
+const props = defineProps<{
+  reason: string;
+  from: string;
+}>();
+const router = useRouter();
+const authSession = useAuthSession();
+const loggingOut = shallowRef(false);
+
+const message = computed(() => {
+  if (props.reason === "feature-disabled") {
+    return "该功能当前已关闭，如需使用请联系超级管理员或开发角色开启。";
+  }
+  if (props.reason === "snapshot-unavailable") {
+    return "暂时无法获取服务端权限与功能快照，已为保护数据停止进入。";
+  }
+  if (props.reason === "admin-access-denied") {
+    return "当前账号没有管理后台访问权限。你仍然可以返回业务首页继续使用应用。";
+  }
+  return "当前账号没有访问该页面所需的权限。";
+});
+
+async function logout(): Promise<void> {
+  if (loggingOut.value) return;
+  loggingOut.value = true;
+  try {
+    await authSession.logout();
+    await router.replace({ name: "login" });
+  } finally {
+    loggingOut.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-96 max-w-xl items-center">
+    <Card class="w-full">
+      <CardHeader>
+        <CardTitle>无法访问</CardTitle>
+      </CardHeader>
+      <CardContent class="space-y-4">
+        <p class="text-sm text-muted-foreground">{{ message }}</p>
+        <p class="text-xs text-muted-foreground">原请求地址：{{ from }}</p>
+        <div class="flex flex-wrap gap-3">
+          <Button as-child>
+            <RouterLink to="/">返回首页</RouterLink>
+          </Button>
+          <Button variant="outline" :disabled="loggingOut" @click="logout">
+            {{ loggingOut ? "正在退出…" : "退出登录" }}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>

package/template/apps/web/src/pages/auth/ChangePasswordPage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import PasswordChangeForm from "@/components/auth/PasswordChangeForm.vue";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useAuthSession } from "@/composables/useAuthSession";
+import { usePasswordChange } from "@/composables/usePasswordChange";
+import type { PasswordChangeInput } from "@/services/auth-api";
+
+const flow = usePasswordChange();
+const auth = useAuthSession();
+const router = useRouter();
+
+async function submit(input: PasswordChangeInput) {
+  if (!(await flow.submit(input))) return;
+  auth.clear();
+  await router.replace({ name: "login", query: { passwordChanged: "1" } });
+}
+</script>
+
+<template>
+  <main
+    class="flex min-h-screen items-center justify-center bg-muted/40 px-4 py-10"
+  >
+    <Card class="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>修改登录密码</CardTitle>
+        <CardDescription>
+          如密码由管理员重置，请先完成修改。成功后全部会话都会退出，请使用新密码重新登录。
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <PasswordChangeForm
+          :loading="flow.loading.value"
+          :error="flow.submitError.value"
+          @submit="submit"
+        />
+      </CardContent>
+    </Card>
+  </main>
+</template>

package/template/apps/web/src/pages/auth/LoginPage.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import DevelopmentAuthWarning from "@/components/auth/DevelopmentAuthWarning.vue";
+import LoginForm from "@/components/auth/LoginForm.vue";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useLoginFlow } from "@/composables/useLoginFlow";
+import { usePlatformSettings } from "@/composables/usePlatformSettings";
+import { BlocksIcon } from "@lucide/vue";
+import { developmentAuthStatus } from "@/services/http";
+
+const flow = useLoginFlow();
+const platform = usePlatformSettings();
+const developmentAuth = developmentAuthStatus();
+</script>
+
+<template>
+  <main
+    class="flex min-h-screen items-center justify-center bg-muted/40 px-4 py-10"
+  >
+    <div class="w-full max-w-md space-y-4">
+      <div class="flex items-center justify-center gap-3">
+        <span
+          class="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"
+        >
+          <img
+            v-if="platform.branding.value.logoUrl"
+            :src="platform.branding.value.logoUrl"
+            alt=""
+            class="size-full rounded-xl object-contain"
+          />
+          <BlocksIcon v-else />
+        </span>
+        <div>
+          <p class="text-lg font-semibold">{{ platform.softwareName.value }}</p>
+          <p class="text-sm text-muted-foreground">
+            {{ platform.branding.value.description || "企业应用基座" }}
+          </p>
+        </div>
+      </div>
+      <DevelopmentAuthWarning v-if="developmentAuth.configured" />
+      <Card>
+        <CardHeader>
+          <CardTitle>登录平台</CardTitle>
+          <CardDescription>
+            使用平台管理员创建的用户名和密码登录。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <LoginForm
+            :loading="flow.loading.value"
+            :error="flow.submitError.value"
+            @submit="flow.submit"
+          />
+        </CardContent>
+      </Card>
+    </div>
+  </main>
+</template>

package/template/apps/web/src/pages/configuration/ModuleConfigurationPage.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import ModuleConfigurationWorkbench from "./components/ModuleConfigurationWorkbench.vue";
+</script>
+
+<template>
+  <main class="space-y-5">
+    <header class="space-y-2">
+      <h1 class="text-2xl font-semibold text-foreground">配置版本</h1>
+      <p class="text-sm text-muted-foreground">
+        仅管理模块 Manifest 注册的非敏感配置，查看生效状态、差异并以新版本回滚。
+      </p>
+    </header>
+    <ModuleConfigurationWorkbench />
+  </main>
+</template>

package/template/apps/web/src/pages/configuration/components/ModuleConfigRollbackDialog.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { ModuleConfigVersion } from "@windy/shared";
+import { shallowRef, watch } from "vue";
+import FormDialog from "@/components/common/FormDialog.vue";
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps<{
+  version?: ModuleConfigVersion;
+  loading: boolean;
+}>();
+const emit = defineEmits<{ confirm: [reason: string] }>();
+const reason = shallowRef("");
+
+watch(open, (current) => {
+  if (current) reason.value = "";
+});
+
+function confirm() {
+  const value = reason.value.trim();
+  if (value.length >= 8) emit("confirm", value);
+}
+</script>
+
+<template>
+  <FormDialog
+    v-model:open="open"
+    title="创建回滚版本"
+    :description="`将复制 v${version?.version ?? '-'} 的配置值，创建并应用一个新版本。历史版本不会被修改。`"
+    submit-text="确认创建回滚版本"
+    :loading="loading"
+    :submit-disabled="reason.trim().length < 8"
+    prevent-outside-close
+    @submit="confirm"
+  >
+    <label class="grid gap-2 text-sm font-medium">
+      <span>回滚原因</span>
+      <textarea
+        v-model="reason"
+        rows="4"
+        minlength="8"
+        maxlength="500"
+        class="min-h-24 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        placeholder="至少 8 个字符，说明回滚依据与影响"
+        :disabled="loading"
+      />
+      <span class="text-xs font-normal text-muted-foreground">
+        {{ reason.trim().length }}/500，至少填写 8 个字符。
+      </span>
+    </label>
+  </FormDialog>
+</template>

package/template/apps/web/src/pages/configuration/components/ModuleConfigVersionList.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type {
+  ModuleConfigApplyStatus,
+  ModuleConfigVersion,
+} from "@windy/shared";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { formatDateTime } from "@/lib/date-time";
+
+defineProps<{
+  versions: ModuleConfigVersion[];
+  canManage: boolean;
+  saving: boolean;
+}>();
+
+defineEmits<{ rollback: [version: ModuleConfigVersion] }>();
+
+const statusText: Record<ModuleConfigApplyStatus, string> = {
+  applying: "应用中",
+  effective: "已生效",
+  failed: "应用失败",
+  superseded: "已替代",
+};
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>版本记录</CardTitle>
+      <CardDescription>
+        回滚不会修改历史记录，而是复制目标值并创建新的生效版本。
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-3">
+      <article
+        v-for="version in versions"
+        :key="version.id"
+        class="space-y-3 rounded-lg border p-4"
+      >
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div class="space-y-1">
+            <div class="flex flex-wrap items-center gap-2">
+              <strong>v{{ version.version }}</strong>
+              <Badge
+                :variant="
+                  version.applyStatus === 'failed'
+                    ? 'destructive'
+                    : version.applyStatus === 'effective'
+                      ? 'default'
+                      : 'secondary'
+                "
+              >
+                {{ statusText[version.applyStatus] }}
+              </Badge>
+              <Badge v-if="version.rollbackOfVersion" variant="outline">
+                回滚自 v{{ version.rollbackOfVersion }}
+              </Badge>
+            </div>
+            <p class="text-xs text-muted-foreground">
+              {{ formatDateTime(version.createdAt) }} · 操作人
+              {{ version.createdBy }}
+            </p>
+          </div>
+          <Button
+            v-if="
+              canManage &&
+              ['effective', 'superseded'].includes(version.applyStatus)
+            "
+            size="sm"
+            variant="outline"
+            :disabled="saving"
+            @click="$emit('rollback', version)"
+          >
+            基于此版本回滚
+          </Button>
+        </div>
+        <p v-if="version.reason" class="text-sm">{{ version.reason }}</p>
+        <p
+          v-if="version.applyError"
+          class="rounded-md bg-destructive/5 p-3 text-sm text-destructive"
+        >
+          {{ version.applyError }}
+        </p>
+        <dl v-if="version.diff.length" class="grid gap-2 text-sm">
+          <div
+            v-for="entry in version.diff"
+            :key="entry.path"
+            class="grid gap-1 rounded-md bg-muted/40 px-3 py-2 md:grid-cols-[12rem_1fr]"
+          >
+            <dt class="font-mono text-xs">{{ entry.path }}</dt>
+            <dd class="break-all text-muted-foreground">
+              {{ String(entry.before ?? "未设置") }} →
+              {{ String(entry.after ?? "未设置") }}
+            </dd>
+          </div>
+        </dl>
+        <p v-else class="text-xs text-muted-foreground">
+          该版本与原生效值一致。
+        </p>
+      </article>
+      <p
+        v-if="versions.length === 0"
+        class="py-8 text-center text-sm text-muted-foreground"
+      >
+        暂无配置版本，当前使用环境变量加载的基线值。
+      </p>
+    </CardContent>
+  </Card>
+</template>