create-windy 0.9.1 → 0.10.1

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

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, shallowRef } from "vue";
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { onBeforeRouteLeave, RouterLink } from "vue-router";
 import {
   AtSignIcon,
+  KeyRoundIcon,
   LoaderCircleIcon,
   SaveIcon,
   UserRoundCogIcon,
 } from "@lucide/vue";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
@@ -33,7 +37,33 @@ const canManage = computed(
     ) ?? false,
 );
 
-onMounted(load);
+const confirmation = useUnsavedChangesConfirmation();
+const dirty = computed(() => {
+  const saved = profile.value;
+  return Boolean(
+    saved &&
+    (displayName.value !== saved.displayName ||
+      email.value !== (saved.email || "") ||
+      phone.value !== (saved.phone || "")),
+  );
+});
+
+onBeforeRouteLeave(() => {
+  if (saving.value) return false;
+  return dirty.value ? confirmation.request(save) : true;
+});
+
+function beforeUnload(event: BeforeUnloadEvent) {
+  if (!dirty.value) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+
+onMounted(() => {
+  window.addEventListener("beforeunload", beforeUnload);
+  void load();
+});
+onBeforeUnmount(() => window.removeEventListener("beforeunload", beforeUnload));
 
 async function load() {
   loading.value = true;
@@ -46,11 +76,12 @@ async function load() {
   }
 }
 
-async function save() {
+async function save(): Promise<boolean> {
+  if (!canManage.value || saving.value) return false;
   const name = displayName.value.trim();
   if (!name) {
     toast.error("姓名不能为空");
-    return;
+    return false;
   }
   saving.value = true;
   try {
@@ -61,10 +92,12 @@ async function save() {
         phone: phone.value.trim() || undefined,
       }),
     );
-    await Promise.all([auth.refresh(), access.refresh()]);
+    await Promise.allSettled([auth.refresh(), access.refresh()]);
     toast.success("个人资料已保存");
+    return true;
   } catch (error) {
     toast.error("个人资料保存失败", { description: messageOf(error) });
+    return false;
   } finally {
     saving.value = false;
   }
@@ -86,9 +119,7 @@ function messageOf(error: unknown): string {
   <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>
+      <p class="text-muted-foreground">维护当前账号的个人资料与登录密码。</p>
     </header>
 
     <section
@@ -126,7 +157,7 @@ function messageOf(error: unknown): string {
           <span>姓名</span>
           <Input
             v-model="displayName"
-            :disabled="!canManage"
+            :disabled="!canManage || saving"
             maxlength="120"
             autocomplete="name"
           />
@@ -136,7 +167,7 @@ function messageOf(error: unknown): string {
           <Input
             v-model="email"
             type="email"
-            :disabled="!canManage"
+            :disabled="!canManage || saving"
             maxlength="160"
             autocomplete="email"
             placeholder="name@example.com"
@@ -147,7 +178,7 @@ function messageOf(error: unknown): string {
           <Input
             v-model="phone"
             type="tel"
-            :disabled="!canManage"
+            :disabled="!canManage || saving"
             maxlength="32"
             autocomplete="tel"
             placeholder="请输入联系电话"
@@ -173,5 +204,27 @@ function messageOf(error: unknown): string {
         <Button variant="outline" @click="load">重新加载</Button>
       </div>
     </section>
+    <section
+      class="flex flex-wrap items-center justify-between gap-4 rounded-xl border bg-card p-6 text-card-foreground shadow-sm"
+    >
+      <div class="space-y-1">
+        <h2 class="font-semibold">登录密码</h2>
+        <p class="text-sm text-muted-foreground">
+          修改成功后，所有会话都会退出。
+        </p>
+      </div>
+      <Button as-child variant="outline">
+        <RouterLink :to="{ name: 'change-password' }">
+          <KeyRoundIcon data-icon="inline-start" />
+          修改密码
+        </RouterLink>
+      </Button>
+    </section>
+    <UnsavedChangesDialog
+      :open="confirmation.open.value"
+      :saving="confirmation.saving.value"
+      @cancel="confirmation.cancel"
+      @save="confirmation.save"
+    />
   </main>
 </template>

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

@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { flushPromises, mount } from "@vue/test-utils";
+import { createMemoryHistory, createRouter } from "vue-router";
 import PersonalSettingsPage from "./PersonalSettingsPage.vue";
 
 const mocks = vi.hoisted(() => ({
@@ -55,7 +56,22 @@ describe("PersonalSettingsPage", () => {
   });
 
   test("加载资料后保存修改并刷新会话与授权快照", async () => {
-    const wrapper = mount(PersonalSettingsPage);
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: "/profile", component: { template: "<div />" } },
+        {
+          path: "/change-password",
+          name: "change-password",
+          component: { template: "<div />" },
+        },
+      ],
+    });
+    await router.push("/profile");
+    await router.isReady();
+    const wrapper = mount(PersonalSettingsPage, {
+      global: { plugins: [router] },
+    });
     await flushPromises();
     const inputs = wrapper.findAll("input");
 
@@ -74,5 +90,9 @@ describe("PersonalSettingsPage", () => {
     expect(mocks.refreshAuth).toHaveBeenCalledOnce();
     expect(mocks.refreshAccess).toHaveBeenCalledOnce();
     expect(mocks.success).toHaveBeenCalledWith("个人资料已保存");
+    await wrapper.get('a[href="/change-password"]').trigger("click");
+    await flushPromises();
+    expect(router.currentRoute.value.name).toBe("change-password");
+    wrapper.unmount();
   });
 });

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ImageIcon, SettingsIcon, Trash2Icon, UploadIcon } from "@lucide/vue";
+import windyLogo from "@/assets/windy.svg";
+import { SettingsIcon, Trash2Icon, UploadIcon } from "@lucide/vue";
 import { computed, onMounted, shallowRef } from "vue";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -9,6 +10,7 @@ import { usePlatformSettings } from "@/composables/usePlatformSettings";
 import { maxLocalLogoBytes, readLocalLogo } from "./logo-file";
 
 const settings = usePlatformSettings();
+const { saving } = settings;
 const access = useAccessSnapshot();
 const toast = useAppToast();
 const softwareName = shallowRef("");
@@ -172,23 +174,16 @@ defineExpose({
         <div class="flex items-center gap-3">
           <div
             class="flex size-12 items-center justify-center overflow-hidden rounded-lg"
-            :class="
-              logoUrl
-                ? 'bg-transparent text-foreground'
-                : 'bg-primary text-primary-foreground'
-            "
           >
             <img
-              v-if="logoUrl"
-              :src="logoUrl"
+              :src="logoUrl || windyLogo"
               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" }}
+              {{ softwareName || "Windy" }}
             </p>
             <p class="line-clamp-2 text-sm text-muted-foreground">
               {{ description || "企业级 Dashboard 产品基座" }}
@@ -200,14 +195,8 @@ defineExpose({
         <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 v-else :disabled="saving || readingLogo" @click="save">
+          <SettingsIcon />{{ saving ? "保存中…" : "保存基本信息" }}
         </Button>
       </div>
     </div>

package/template/apps/web/src/pages/settings/BrandingSettingsSection.webtest.ts

@@ -1,8 +1,10 @@
-import { flushPromises, mount } from "@vue/test-utils";
-import { beforeEach, describe, expect, test, vi } from "vitest";
+import { enableAutoUnmount, flushPromises, mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { shallowRef } from "vue";
 import BrandingSettingsSection from "./BrandingSettingsSection.vue";
 
+enableAutoUnmount(afterEach);
+
 const mocks = vi.hoisted(() => ({
   refresh: vi.fn(),
   save: vi.fn(),
@@ -59,8 +61,11 @@ describe("品牌基本信息", () => {
     );
     expect(wrapper.text()).toContain("编码内容不在输入框中显示");
     const preview = wrapper.get('img[alt="Logo 预览"]').element.parentElement;
-    expect(preview?.classList.contains("bg-transparent")).toBe(true);
-    expect(preview?.classList.contains("bg-primary")).toBe(false);
+    expect(
+      [...preview!.classList].filter(
+        (name) => name.startsWith("bg-") && name !== "bg-transparent",
+      ),
+    ).toEqual([]);
   });
 
   test("外部或站内 Logo 地址仍可编辑", async () => {

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

@@ -8,12 +8,17 @@ import {
 } from "vue-router";
 import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { PlatformWatermarkPolicy } from "@southwind-ai/shared";
+import { useAuthSession } from "@/composables/useAuthSession";
+import { useWatermarkSettings } from "@/composables/useWatermarkSettings";
 import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
 import { evaluateWebAccess } from "@/layout/navigation";
 import BrandingSettingsSection from "./BrandingSettingsSection.vue";
 import WatermarkSettingsSection from "./WatermarkSettingsSection.vue";
 
+import WatermarkYamlTransfer from "./WatermarkYamlTransfer.vue";
+
 type SettingsTab = "basic" | "watermark";
 
 interface SettingsSectionHandle {
@@ -24,11 +29,19 @@ interface SettingsSectionHandle {
 const route = useRoute();
 const router = useRouter();
 const access = useAccessSnapshot();
+const watermark = useWatermarkSettings(useAuthSession().actor);
 const confirmation = useUnsavedChangesConfirmation();
 const confirmOpen = confirmation.open;
 const confirmSaving = confirmation.saving;
 const basicSection = shallowRef<SettingsSectionHandle | null>(null);
-const watermarkSection = shallowRef<SettingsSectionHandle | null>(null);
+const watermarkSection = shallowRef<
+  (SettingsSectionHandle & { applyPolicyToForm(): void }) | null
+>(null);
+
+function onYamlImported(policy: PlatformWatermarkPolicy) {
+  watermark.applyImportedPolicy(policy);
+  watermarkSection.value?.applyPolicyToForm();
+}
 const canReadBasic = computed(() => {
   const snapshot = access.snapshot.value;
   return Boolean(
@@ -49,6 +62,19 @@ const canReadWatermark = computed(() => {
     }).allowed,
   );
 });
+const canManageWatermark = computed(() => {
+  const snapshot = access.snapshot.value;
+  return Boolean(
+    snapshot &&
+    evaluateWebAccess(snapshot, {
+      permissionKey: "system.watermark.manage",
+      featureKey: "system.watermark",
+    }).allowed,
+  );
+});
+const canOpenBasic = computed(
+  () => canReadBasic.value || canReadWatermark.value,
+);
 const activeTab = shallowRef<SettingsTab | undefined>(resolveTab(route.hash));
 onBeforeRouteUpdate(async (to) => {
   const target = resolveTab(to.hash);
@@ -100,14 +126,14 @@ async function normalizeCurrentHash() {
 
 function resolveTab(hash: string): SettingsTab | undefined {
   if (hash === "#watermark" && canReadWatermark.value) return "watermark";
-  if (hash === "#basic" && canReadBasic.value) return "basic";
+  if (hash === "#basic" && canOpenBasic.value) return "basic";
   if (canReadBasic.value) return "basic";
   if (canReadWatermark.value) return "watermark";
   return undefined;
 }
 
 function isAccessible(tab: SettingsTab) {
-  return tab === "basic" ? canReadBasic.value : canReadWatermark.value;
+  return tab === "basic" ? canOpenBasic.value : canReadWatermark.value;
 }
 
 function tabHash(tab: SettingsTab) {
@@ -158,7 +184,7 @@ function handleBeforeUnload(event: BeforeUnloadEvent) {
         class="h-auto w-full justify-start border-b px-0 pb-2"
       >
         <TabsTrigger
-          v-if="canReadBasic"
+          v-if="canOpenBasic"
           value="basic"
           class="min-w-24 flex-none px-4 py-2"
         >
@@ -172,8 +198,27 @@ function handleBeforeUnload(event: BeforeUnloadEvent) {
           水印设置
         </TabsTrigger>
       </TabsList>
-      <TabsContent v-if="canReadBasic" value="basic" class="mt-0">
-        <BrandingSettingsSection ref="basicSection" />
+      <TabsContent v-if="canOpenBasic" value="basic" class="mt-0">
+        <BrandingSettingsSection v-if="canReadBasic" ref="basicSection" />
+        <section
+          v-if="canReadWatermark"
+          class="mt-5 space-y-3 rounded-xl border bg-card p-6"
+        >
+          <h2 class="text-xl font-semibold">配置导入与导出</h2>
+          <p class="text-sm text-muted-foreground">
+            通过 YAML 备份或迁移页面水印配置。
+          </p>
+          <WatermarkYamlTransfer
+            :can-manage="canManageWatermark"
+            :import-disabled="
+              !canManageWatermark ||
+              currentIsDirty() ||
+              watermark.loading.value ||
+              watermark.saving.value
+            "
+            @imported="onYamlImported"
+          />
+        </section>
       </TabsContent>
       <TabsContent v-if="canReadWatermark" value="watermark" class="mt-0">
         <WatermarkSettingsSection ref="watermarkSection" />

package/template/apps/web/src/pages/settings/GlobalSettingsPage.webtest.ts

@@ -4,6 +4,7 @@ import { defineComponent, h, shallowRef } from "vue";
 import { createMemoryHistory, createRouter, RouterView } from "vue-router";
 import type { WebAccessSnapshot } from "@/layout/navigation";
 import GlobalSettingsPage from "./GlobalSettingsPage.vue";
+import WatermarkYamlTransfer from "./WatermarkYamlTransfer.vue";
 
 const snapshot = shallowRef<WebAccessSnapshot>();
 const ensureLoaded = vi.fn(async () => snapshot.value!);
@@ -84,15 +85,30 @@ describe("全局设置分类", () => {
     expect(wrapper.text()).not.toContain("基本信息表单");
   });
 
-  test("只有水印权限时直接落到可访问分类", async () => {
+  test("只有水印权限时可从基本信息导出 YAML，但不显示品牌表单", async () => {
     snapshot.value = createSnapshot(["system.watermark.read"]);
     const { wrapper, router } = await mountPage("/settings#basic");
 
-    expect(router.currentRoute.value.fullPath).toBe("/settings#watermark");
-    expect(wrapper.text()).toContain("水印表单");
+    expect(router.currentRoute.value.fullPath).toBe("/settings#basic");
+    expect(wrapper.text()).toContain("导出 YAML");
+    expect(wrapper.text()).not.toContain("导入 YAML");
     expect(wrapper.text()).not.toContain("基本信息表单");
   });
 
+  test("基本信息只提供一个 YAML 入口，未保存编辑时禁止导入", async () => {
+    snapshot.value = createSnapshot([
+      "system.settings.read",
+      "system.watermark.read",
+      "system.watermark.manage",
+    ]);
+    const { wrapper } = await mountPage();
+    expect(wrapper.findAllComponents(WatermarkYamlTransfer)).toHaveLength(1);
+    const transfer = wrapper.getComponent(WatermarkYamlTransfer);
+    expect(transfer.props("importDisabled")).toBe(false);
+    await wrapper.get('[data-testid="dirty-basic"]').trigger("click");
+    expect(transfer.props("importDisabled")).toBe(true);
+  });
+
   test("访问快照加载完成后再恢复有权限的深链接", async () => {
     snapshot.value = undefined;
     ensureLoaded.mockImplementation(async () => {

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

@@ -163,6 +163,7 @@ function toggleContentField(field: WatermarkContentField, checked: boolean) {
 
 defineExpose({
   isDirty: () => isDirty.value,
+  applyPolicyToForm,
   save,
 });
 </script>

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

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { LoaderCircleIcon } from "@lucide/vue";
+import { shallowRef } from "vue";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useAppToast } from "@/composables/useAppToast";
+import {
+  exportWatermarkYaml,
+  importWatermarkYaml,
+  previewWatermarkYaml,
+  type PlatformWatermarkPolicy,
+  type WatermarkYamlPreview,
+} from "@/services/platform-settings-api";
+
+defineProps<{ canManage: boolean; importDisabled: boolean }>();
+const emit = defineEmits<{ imported: [policy: PlatformWatermarkPolicy] }>();
+const toast = useAppToast();
+const open = shallowRef(false);
+const exporting = shallowRef(false);
+const busy = shallowRef<"preview" | "import">();
+const error = shallowRef("");
+const yaml = shallowRef("");
+const preview = shallowRef<WatermarkYamlPreview>();
+
+const labels = {
+  enabled: "显示页面水印",
+  density: "密度",
+  contentFields: "显示字段",
+  opacityPercent: "不透明度（%）",
+  fontSize: "字号（px）",
+};
+const valueLabels: Readonly<Record<string, string>> = {
+  low: "低",
+  medium: "中",
+  high: "高",
+  username: "用户名",
+  displayName: "姓名",
+  phone: "手机号",
+  email: "邮箱",
+  custom: "目标实例的自定义内容",
+};
+
+function format(value: WatermarkYamlPreview["changes"][number]["before"]) {
+  if (typeof value === "boolean") return value ? "开启" : "关闭";
+  if (Array.isArray(value))
+    return value.map((item) => valueLabels[item] ?? item).join("、");
+  return valueLabels[String(value)] ?? value;
+}
+
+async function download() {
+  exporting.value = true;
+  try {
+    const url = URL.createObjectURL(await exportWatermarkYaml());
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "windy-admin-settings.yaml";
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  } catch (failure) {
+    toast.error("导出 YAML 失败", { description: message(failure) });
+  } finally {
+    exporting.value = false;
+  }
+}
+
+function setOpen(value: boolean) {
+  if (busy.value) return;
+  open.value = value;
+  if (value) return;
+  yaml.value = "";
+  error.value = "";
+  preview.value = undefined;
+}
+
+async function readFile(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file || busy.value) return;
+  yaml.value = "";
+  preview.value = undefined;
+  if (file.size > 8192) {
+    error.value = "YAML 文件不能超过 8 KiB";
+    return;
+  }
+  busy.value = "preview";
+  error.value = "";
+  try {
+    yaml.value = await file.text();
+    preview.value = await previewWatermarkYaml(yaml.value);
+  } catch (failure) {
+    error.value = message(failure);
+  } finally {
+    busy.value = undefined;
+  }
+}
+
+async function apply() {
+  if (busy.value || !preview.value?.changes.length) return;
+  busy.value = "import";
+  error.value = "";
+  try {
+    const policy = await importWatermarkYaml(
+      yaml.value,
+      preview.value.revision,
+    );
+    emit("imported", policy);
+    toast.success("水印配置已导入");
+    busy.value = undefined;
+    setOpen(false);
+  } catch (failure) {
+    error.value = message(failure);
+    preview.value = undefined;
+  } finally {
+    busy.value = undefined;
+  }
+}
+
+function message(failure: unknown) {
+  return failure instanceof Error ? failure.message : "操作失败，请重试";
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <Button variant="outline" :disabled="exporting" @click="download">
+      {{ exporting ? "导出中…" : "导出 YAML" }}
+    </Button>
+    <Dialog v-if="canManage" :open="open" @update:open="setOpen">
+      <DialogTrigger as-child>
+        <Button variant="outline" :disabled="importDisabled">导入 YAML</Button>
+      </DialogTrigger>
+      <DialogContent
+        :show-close-button="false"
+        @escape-key-down.prevent
+        @interact-outside.prevent
+      >
+        <DialogHeader>
+          <DialogTitle>导入水印配置</DialogTitle>
+          <DialogDescription>
+            选择 YAML 文件，校验通过后核对差异。确认后配置才会生效。
+          </DialogDescription>
+        </DialogHeader>
+        <label class="grid gap-2">
+          配置文件（最多 8 KiB）
+          <input
+            type="file"
+            accept=".yaml,.yml"
+            :disabled="!!busy"
+            @change="readFile"
+          />
+        </label>
+        <p v-if="error" role="alert" class="text-destructive">{{ error }}</p>
+        <p v-if="busy === 'preview'" role="status">正在校验文件…</p>
+        <template v-if="preview">
+          <p role="status">
+            {{
+              preview.changes.length
+                ? "校验通过，请核对以下变更。"
+                : "校验通过，配置没有变化。"
+            }}
+          </p>
+          <div v-if="preview.changes.length" class="overflow-auto">
+            <table class="w-full text-left">
+              <thead>
+                <tr>
+                  <th scope="col">配置项</th>
+                  <th scope="col">当前值</th>
+                  <th scope="col">导入值</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="change in preview.changes"
+                  :key="change.key"
+                  class="border-t"
+                >
+                  <th scope="row" class="py-2 font-medium">
+                    {{ labels[change.key] }}
+                  </th>
+                  <td>{{ format(change.before) }}</td>
+                  <td>{{ format(change.after) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </template>
+        <DialogFooter>
+          <Button variant="outline" :disabled="!!busy" @click="setOpen(false)"
+            >取消</Button
+          >
+          <Button
+            :disabled="!!busy || !preview?.changes.length || importDisabled"
+            @click="apply"
+          >
+            <LoaderCircleIcon v-if="busy === 'import'" class="animate-spin" />
+            {{ busy === "import" ? "导入中…" : "确认导入" }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>