create-windy 0.1.0

package/template/apps/web/src/pages/dashboard/dashboard-presenter.webtest.ts

@@ -0,0 +1,92 @@
+import { describe, expect, test } from "vitest";
+import type { MenuNode } from "@windy/shared";
+import type { WebAccessSnapshot } from "@/layout/navigation";
+import { buildDashboardModel } from "./dashboard-presenter";
+
+describe("管理工作台模型", () => {
+  test("汇总当前账号实际可访问的入口和真实权限数量", () => {
+    const model = buildDashboardModel(accessSnapshot(), {
+      status: "valid",
+      restricted: false,
+      reminder: { level: "none" },
+      canViewDetails: true,
+    });
+
+    expect(model.metrics).toContainEqual(
+      expect.objectContaining({ label: "管理入口", value: "1" }),
+    );
+    expect(model.metrics).toContainEqual(
+      expect.objectContaining({ label: "权限点", value: "1" }),
+    );
+    expect(model.alerts).toEqual([]);
+  });
+
+  test("受限 License 和未分配角色会生成可执行提醒", () => {
+    const snapshot = accessSnapshot();
+    snapshot.actor.roleCodes = [];
+    const model = buildDashboardModel(snapshot, {
+      status: "expired",
+      restricted: true,
+      reminder: { level: "critical", daysRemaining: 0 },
+      canViewDetails: true,
+    });
+
+    expect(model.alerts.map((item) => item.key)).toEqual([
+      "license-restricted",
+      "role-missing",
+    ]);
+  });
+});
+
+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",
+        },
+        {
+          key: "system.user",
+          title: "用户管理",
+          type: "menu",
+          order: 20,
+          visible: true,
+          path: "/admin/system/users",
+          permissionKey: "system.user.read",
+        },
+      ],
+    },
+  ];
+  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",
+      },
+    ],
+  };
+}

package/template/apps/web/src/pages/license/LicensePage.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import LicenseActivationCodeForm from "@/components/license/LicenseActivationCodeForm.vue";
+import LicenseStatusCard from "@/components/license/LicenseStatusCard.vue";
+import LicenseUploadForm from "@/components/license/LicenseUploadForm.vue";
+import PageLoading from "@/components/common/PageLoading.vue";
+import { useAppToast } from "@/composables/useAppToast";
+import { useLicenseRuntime } from "@/composables/useLicenseRuntime";
+
+const runtime = useLicenseRuntime();
+const toast = useAppToast();
+
+onMounted(() => {
+  void runtime.refresh().catch(() => undefined);
+});
+
+async function upload(rawLicense: string) {
+  try {
+    await runtime.install(rawLicense);
+    toast.success("License 已更新", { description: "新授权已立即生效。" });
+  } catch {
+    toast.error("License 更新失败", { description: runtime.error.value });
+  }
+}
+
+async function activate(activationCode: string) {
+  try {
+    await runtime.installActivationCode(activationCode);
+    toast.success("License 已更新", {
+      description: "离线激活码已验证，新授权立即生效。",
+    });
+  } catch {
+    toast.error("激活码安装失败", { description: runtime.error.value });
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <section class="space-y-2">
+      <h1 class="text-2xl font-semibold tracking-normal text-foreground">
+        License
+      </h1>
+      <p class="text-sm text-muted-foreground">
+        查看当前授权状态，并安装厂商签发的新文件。
+      </p>
+    </section>
+    <PageLoading v-if="runtime.loading.value && !runtime.snapshot.value" />
+    <p
+      v-else-if="runtime.error.value && !runtime.snapshot.value"
+      class="text-destructive"
+    >
+      {{ runtime.error.value }}
+    </p>
+    <LicenseStatusCard
+      v-else-if="runtime.snapshot.value"
+      :snapshot="runtime.snapshot.value"
+    />
+    <LicenseUploadForm :loading="runtime.installing.value" @upload="upload" />
+    <LicenseActivationCodeForm
+      :loading="runtime.installing.value"
+      @activate="activate"
+    />
+  </div>
+</template>

package/template/apps/web/src/pages/profile/PersonalSettingsPage.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { computed, onMounted, shallowRef } from "vue";
+import {
+  AtSignIcon,
+  LoaderCircleIcon,
+  SaveIcon,
+  UserRoundCogIcon,
+} from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { useAppToast } from "@/composables/useAppToast";
+import { useAuthSession } from "@/composables/useAuthSession";
+import {
+  loadUserProfile,
+  updateUserProfile,
+  type UserProfile,
+} from "@/services/profile-api";
+
+const access = useAccessSnapshot();
+const auth = useAuthSession();
+const toast = useAppToast();
+const profile = shallowRef<UserProfile>();
+const displayName = shallowRef("");
+const email = shallowRef("");
+const phone = shallowRef("");
+const loading = shallowRef(true);
+const saving = shallowRef(false);
+const canManage = computed(
+  () =>
+    access.snapshot.value?.actor.permissionKeys.includes(
+      "system.profile.manage",
+    ) ?? false,
+);
+
+onMounted(load);
+
+async function load() {
+  loading.value = true;
+  try {
+    applyProfile(await loadUserProfile());
+  } catch (error) {
+    toast.error("个人资料加载失败", { description: messageOf(error) });
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function save() {
+  const name = displayName.value.trim();
+  if (!name) {
+    toast.error("姓名不能为空");
+    return;
+  }
+  saving.value = true;
+  try {
+    applyProfile(
+      await updateUserProfile({
+        displayName: name,
+        email: email.value.trim() || undefined,
+        phone: phone.value.trim() || undefined,
+      }),
+    );
+    await Promise.all([auth.refresh(), access.refresh()]);
+    toast.success("个人资料已保存");
+  } catch (error) {
+    toast.error("个人资料保存失败", { description: messageOf(error) });
+  } finally {
+    saving.value = false;
+  }
+}
+
+function applyProfile(value: UserProfile) {
+  profile.value = value;
+  displayName.value = value.displayName;
+  email.value = value.email || "";
+  phone.value = value.phone || "";
+}
+
+function messageOf(error: unknown): string {
+  return error instanceof Error ? error.message : "请稍后重试。";
+}
+</script>
+
+<template>
+  <main class="mx-auto grid w-full max-w-3xl gap-6">
+    <header class="space-y-2">
+      <h1 class="text-3xl font-semibold tracking-tight">个人设置</h1>
+      <p class="text-muted-foreground">
+        维护当前账号的姓名与联系方式；账号名由管理员统一管理。
+      </p>
+    </header>
+
+    <section
+      class="rounded-xl border bg-card p-6 text-card-foreground shadow-sm"
+    >
+      <div
+        v-if="loading"
+        class="flex min-h-48 items-center justify-center gap-2 text-muted-foreground"
+      >
+        <LoaderCircleIcon class="animate-spin" />正在加载个人资料…
+      </div>
+      <div v-else-if="profile" class="grid gap-5">
+        <div class="flex items-center gap-4 border-b pb-5">
+          <div
+            class="flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground"
+          >
+            <UserRoundCogIcon />
+          </div>
+          <div class="min-w-0">
+            <p class="truncate font-semibold">{{ displayName }}</p>
+            <p class="truncate text-sm text-muted-foreground">
+              {{ profile.username }}
+            </p>
+          </div>
+        </div>
+
+        <label class="grid gap-2 text-sm font-medium">
+          <span>账号名</span>
+          <Input :model-value="profile.username" disabled />
+          <span class="text-xs font-normal text-muted-foreground">
+            账号名用于登录，如需修改请联系管理员。
+          </span>
+        </label>
+        <label class="grid gap-2 text-sm font-medium">
+          <span>姓名</span>
+          <Input
+            v-model="displayName"
+            :disabled="!canManage"
+            maxlength="120"
+            autocomplete="name"
+          />
+        </label>
+        <label class="grid gap-2 text-sm font-medium">
+          <span>邮箱</span>
+          <Input
+            v-model="email"
+            type="email"
+            :disabled="!canManage"
+            maxlength="160"
+            autocomplete="email"
+            placeholder="name@example.com"
+          />
+        </label>
+        <label class="grid gap-2 text-sm font-medium">
+          <span>手机或电话</span>
+          <Input
+            v-model="phone"
+            type="tel"
+            :disabled="!canManage"
+            maxlength="32"
+            autocomplete="tel"
+            placeholder="请输入联系电话"
+          />
+        </label>
+
+        <div class="flex items-center justify-end gap-3 border-t pt-5">
+          <p v-if="!canManage" class="text-sm text-muted-foreground">
+            当前账号只有查看权限。
+          </p>
+          <Button v-else :disabled="saving" @click="save">
+            <LoaderCircleIcon v-if="saving" class="animate-spin" />
+            <SaveIcon v-else />{{ saving ? "保存中…" : "保存个人资料" }}
+          </Button>
+        </div>
+      </div>
+      <div
+        v-else
+        class="flex min-h-48 flex-col items-center justify-center gap-2 text-center text-muted-foreground"
+      >
+        <AtSignIcon />
+        <p>暂时无法读取个人资料，请稍后重试。</p>
+        <Button variant="outline" @click="load">重新加载</Button>
+      </div>
+    </section>
+  </main>
+</template>

package/template/apps/web/src/pages/profile/PersonalSettingsPage.webtest.ts

@@ -0,0 +1,78 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import PersonalSettingsPage from "./PersonalSettingsPage.vue";
+
+const mocks = vi.hoisted(() => ({
+  load: vi.fn(),
+  update: vi.fn(),
+  refreshAuth: vi.fn(),
+  refreshAccess: vi.fn(),
+  success: vi.fn(),
+  error: vi.fn(),
+}));
+
+vi.mock("@/services/profile-api", () => ({
+  loadUserProfile: mocks.load,
+  updateUserProfile: mocks.update,
+}));
+
+vi.mock("@/composables/useAuthSession", () => ({
+  useAuthSession: () => ({ refresh: mocks.refreshAuth }),
+}));
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot: {
+      value: { actor: { permissionKeys: ["system.profile.manage"] } },
+    },
+    refresh: mocks.refreshAccess,
+  }),
+}));
+
+vi.mock("@/composables/useAppToast", () => ({
+  useAppToast: () => ({ success: mocks.success, error: mocks.error }),
+}));
+
+describe("PersonalSettingsPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    const profile = {
+      id: "user_1",
+      username: "admin",
+      displayName: "平台管理员",
+      email: "admin@example.com",
+      phone: "13800138000",
+    };
+    mocks.load.mockResolvedValue(profile);
+    mocks.update.mockResolvedValue({
+      ...profile,
+      displayName: "南风管理员",
+      email: "new@example.com",
+      phone: "13900139000",
+    });
+    mocks.refreshAuth.mockResolvedValue(undefined);
+    mocks.refreshAccess.mockResolvedValue(undefined);
+  });
+
+  test("加载资料后保存修改并刷新会话与授权快照", async () => {
+    const wrapper = mount(PersonalSettingsPage);
+    await flushPromises();
+    const inputs = wrapper.findAll("input");
+
+    expect(inputs[0]?.attributes("disabled")).toBeDefined();
+    await inputs[1]?.setValue("南风管理员");
+    await inputs[2]?.setValue("new@example.com");
+    await inputs[3]?.setValue("13900139000");
+    await wrapper.get("button").trigger("click");
+    await flushPromises();
+
+    expect(mocks.update).toHaveBeenCalledWith({
+      displayName: "南风管理员",
+      email: "new@example.com",
+      phone: "13900139000",
+    });
+    expect(mocks.refreshAuth).toHaveBeenCalledOnce();
+    expect(mocks.refreshAccess).toHaveBeenCalledOnce();
+    expect(mocks.success).toHaveBeenCalledWith("个人资料已保存");
+  });
+});

package/template/apps/web/src/pages/settings/BrandingSettingsSection.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ImageIcon, SettingsIcon, Trash2Icon, UploadIcon } from "@lucide/vue";
+import { computed, onMounted, shallowRef } from "vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { useAppToast } from "@/composables/useAppToast";
+import { usePlatformSettings } from "@/composables/usePlatformSettings";
+import { maxLocalLogoBytes, readLocalLogo } from "./logo-file";
+
+const settings = usePlatformSettings();
+const access = useAccessSnapshot();
+const toast = useAppToast();
+const softwareName = shallowRef("");
+const logoUrl = shallowRef("");
+const description = shallowRef("");
+const readingLogo = shallowRef(false);
+const loaded = shallowRef(false);
+const baseline = shallowRef(serializeForm());
+const canManage = computed(() =>
+  Boolean(
+    access.snapshot.value?.actor.permissionKeys.includes(
+      "system.settings.manage",
+    ),
+  ),
+);
+const isDirty = computed(
+  () => canManage.value && loaded.value && serializeForm() !== baseline.value,
+);
+
+onMounted(load);
+
+async function load() {
+  const current = await settings.refresh();
+  softwareName.value = current.softwareName;
+  logoUrl.value = current.logoUrl || "";
+  description.value = current.description || "";
+  baseline.value = serializeForm();
+  loaded.value = true;
+}
+
+async function selectLogo(event: Event) {
+  const input = event.currentTarget as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file) return;
+  readingLogo.value = true;
+  try {
+    logoUrl.value = await readLocalLogo(file);
+  } catch (error) {
+    toast.error("Logo 读取失败", {
+      description: error instanceof Error ? error.message : String(error),
+    });
+  } finally {
+    readingLogo.value = false;
+  }
+}
+
+async function save(): Promise<boolean> {
+  const name = softwareName.value.trim();
+  if (!name) {
+    toast.error("软件名称不能为空");
+    return false;
+  }
+  try {
+    const saved = await settings.save({
+      softwareName: name,
+      logoUrl: logoUrl.value.trim() || undefined,
+      description: description.value.trim() || undefined,
+    });
+    softwareName.value = saved.softwareName;
+    logoUrl.value = saved.logoUrl || "";
+    description.value = saved.description || "";
+    baseline.value = serializeForm();
+    toast.success("全局设置已更新");
+    return true;
+  } catch {
+    toast.error("全局设置保存失败", {
+      description: settings.error.value || "请稍后重试。",
+    });
+    return false;
+  }
+}
+
+function serializeForm() {
+  return JSON.stringify({
+    softwareName: softwareName.value.trim(),
+    logoUrl: logoUrl.value.trim(),
+    description: description.value.trim(),
+  });
+}
+
+defineExpose({
+  isDirty: () => isDirty.value,
+  save,
+});
+</script>
+
+<template>
+  <section class="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+    <div class="mb-6 space-y-1">
+      <h2 class="text-xl font-semibold">基本信息</h2>
+      <p class="text-sm text-muted-foreground">
+        软件名称、Logo 和描述会用于登录页、侧边栏和浏览器标题。
+      </p>
+    </div>
+    <div class="grid gap-5">
+      <label class="grid gap-2 text-sm font-medium">
+        <span>软件名称</span>
+        <Input v-model="softwareName" :disabled="!canManage" maxlength="120" />
+      </label>
+      <label class="grid gap-2 text-sm font-medium">
+        <span>平台描述</span>
+        <textarea
+          v-model="description"
+          :disabled="!canManage"
+          maxlength="500"
+          rows="3"
+          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 disabled:cursor-not-allowed disabled:opacity-50"
+          placeholder="简要说明平台为用户提供的能力"
+        />
+      </label>
+      <div class="grid gap-2 text-sm font-medium">
+        <span>Logo</span>
+        <div class="flex flex-wrap gap-2">
+          <label v-if="canManage" class="inline-flex">
+            <input
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              class="sr-only"
+              :disabled="readingLogo"
+              @change="selectLogo"
+            />
+            <Button as="span" variant="outline" :aria-disabled="readingLogo">
+              <UploadIcon />{{ readingLogo ? "读取中…" : "选择本地文件" }}
+            </Button>
+          </label>
+          <Button
+            v-if="canManage && logoUrl"
+            variant="outline"
+            type="button"
+            @click="logoUrl = ''"
+          >
+            <Trash2Icon />移除 Logo
+          </Button>
+        </div>
+        <Input
+          v-model="logoUrl"
+          :disabled="!canManage"
+          maxlength="1398128"
+          placeholder="或填写 https://example.com/logo.png"
+        />
+        <span class="text-xs font-normal text-muted-foreground">
+          本地文件支持 PNG、JPEG、WebP，最大
+          {{ maxLocalLogoBytes / 1024 }} KiB；也可使用 HTTPS 或站内路径。
+        </span>
+      </div>
+      <div class="rounded-lg border bg-muted/30 p-4">
+        <p class="mb-3 text-xs font-medium text-muted-foreground">预览</p>
+        <div class="flex items-center gap-3">
+          <div
+            class="flex size-12 items-center justify-center overflow-hidden rounded-lg bg-primary text-primary-foreground"
+          >
+            <img
+              v-if="logoUrl"
+              :src="logoUrl"
+              alt="Logo 预览"
+              class="size-full object-contain"
+            />
+            <ImageIcon v-else class="size-5" />
+          </div>
+          <div class="min-w-0">
+            <p class="truncate font-semibold">
+              {{ softwareName || "Windy Platform" }}
+            </p>
+            <p class="line-clamp-2 text-sm text-muted-foreground">
+              {{ description || "企业级 Dashboard 产品基座" }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-end gap-3 border-t pt-5">
+        <p v-if="!canManage" class="text-sm text-muted-foreground">
+          当前账号只有查看权限。
+        </p>
+        <Button
+          v-else
+          :disabled="settings.saving.value || readingLogo"
+          @click="save"
+        >
+          <SettingsIcon />{{
+            settings.saving.value ? "保存中…" : "保存基本信息"
+          }}
+        </Button>
+      </div>
+    </div>
+  </section>
+</template>