create-windy 0.8.3 → 0.10.0

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

@@ -1,7 +1,16 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
-import { onMounted, shallowRef } from "vue";
+import { onBeforeRouteLeave, RouterLink, useRouter } from "vue-router";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  useTemplateRef,
+} from "vue";
 import { PASSWORD_POLICY, type PasswordPolicy } from "@southwind-ai/shared";
+import { Button } from "@/components/ui/button";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
 import PasswordChangeForm from "@/components/auth/PasswordChangeForm.vue";
 import {
   Card,
@@ -22,7 +31,42 @@ const auth = useAuthSession();
 const router = useRouter();
 const policy = shallowRef<PasswordPolicy>(PASSWORD_POLICY);
 
+const form = useTemplateRef("passwordForm");
+const confirmation = useUnsavedChangesConfirmation();
+const required = computed(
+  () => auth.actor.value?.credentialState === "must-change-password",
+);
+const completed = shallowRef(false);
+const confirmationError = shallowRef<string>();
+const loginDestination = { name: "login", query: { passwordChanged: "1" } };
+
+onBeforeRouteLeave(async () => {
+  if (flow.loading.value) return false;
+  if (completed.value || !form.value?.isDirty()) return true;
+  confirmationError.value = undefined;
+  const saved = await confirmation.request(async () => {
+    const input = form.value?.getInput();
+    if (!input) {
+      confirmationError.value = "请取消并补全当前密码、新密码与确认密码。";
+      return false;
+    }
+    const saved = await save(input);
+    if (!saved) confirmationError.value = flow.submitError.value;
+    return saved;
+  });
+  return saved ? loginDestination : false;
+});
+
+function beforeUnload(event: BeforeUnloadEvent) {
+  if (completed.value || !form.value?.isDirty()) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+
+onBeforeUnmount(() => window.removeEventListener("beforeunload", beforeUnload));
+
 onMounted(async () => {
+  window.addEventListener("beforeunload", beforeUnload);
   try {
     policy.value = await loadPasswordPolicy();
   } catch {
@@ -30,10 +74,15 @@ onMounted(async () => {
   }
 });
 
-async function submit(input: PasswordChangeInput) {
-  if (!(await flow.submit(input))) return;
+async function save(input: PasswordChangeInput) {
+  if (!(await flow.submit(input))) return false;
+  completed.value = true;
   auth.clear();
-  await router.replace({ name: "login", query: { passwordChanged: "1" } });
+  return true;
+}
+
+async function submit(input: PasswordChangeInput) {
+  if (await save(input)) await router.replace(loginDestination);
 }
 </script>
 
@@ -45,17 +94,29 @@ async function submit(input: PasswordChangeInput) {
       <CardHeader>
         <CardTitle>修改登录密码</CardTitle>
         <CardDescription>
-          如密码由管理员重置，请先完成修改。成功后全部会话都会退出，请使用新密码重新登录。
+          <span v-if="required">请先完成密码修改。</span>
+          成功后全部会话都会退出，请使用新密码重新登录。
         </CardDescription>
       </CardHeader>
       <CardContent>
         <PasswordChangeForm
+          ref="passwordForm"
           :loading="flow.loading.value"
           :error="flow.submitError.value"
           :policy="policy"
           @submit="submit"
         />
+        <Button v-if="!required" as-child variant="ghost" class="mt-3 w-full">
+          <RouterLink to="/admin/profile">返回个人设置</RouterLink>
+        </Button>
       </CardContent>
     </Card>
+    <UnsavedChangesDialog
+      :open="confirmation.open.value"
+      :saving="confirmation.saving.value"
+      :description="confirmationError"
+      @cancel="confirmation.cancel"
+      @save="confirmation.save"
+    />
   </main>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import windyLogo from "@/assets/windy.svg";
 import DevelopmentAuthWarning from "@/components/auth/DevelopmentAuthWarning.vue";
 import LoginForm from "@/components/auth/LoginForm.vue";
 import {
@@ -10,7 +11,6 @@ import {
 } 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();
@@ -24,21 +24,12 @@ const developmentAuth = developmentAuthStatus();
   >
     <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"
-          :class="
-            platform.branding.value.logoUrl
-              ? 'bg-transparent text-foreground'
-              : 'bg-primary text-primary-foreground'
-          "
-        >
+        <span class="flex size-10 items-center justify-center rounded-xl">
           <img
-            v-if="platform.branding.value.logoUrl"
-            :src="platform.branding.value.logoUrl"
+            :src="platform.branding.value.logoUrl || windyLogo"
             alt=""
             class="size-full rounded-xl object-contain"
           />
-          <BlocksIcon v-else />
         </span>
         <div>
           <p class="text-lg font-semibold">{{ platform.softwareName.value }}</p>

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

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
+import TimeZoneSelect from "./TimeZoneSelect.vue";
 
 const props = defineProps<{
   summary: ModuleConfigSummary;
@@ -35,6 +36,17 @@ function update(path: string, value: ModuleConfigValue) {
   emit("update:values", { ...props.values, [path]: value });
 }
 
+const sizeFormatter = new Intl.NumberFormat("zh-CN", {
+  maximumFractionDigits: 2,
+});
+
+function formatByteSize(value: ModuleConfigValue | undefined): string {
+  if (typeof value !== "number") return "";
+  return value >= 1024 ** 2
+    ? `${sizeFormatter.format(value / 1024 ** 2)} MiB`
+    : `${sizeFormatter.format(value / 1024)} KiB`;
+}
+
 function updateInteger(path: string, event: Event) {
   const value = Number((event.currentTarget as HTMLInputElement).value);
   if (Number.isSafeInteger(value)) update(path, value);
@@ -71,6 +83,14 @@ function updateInteger(path: string, event: Event) {
             <p class="text-xs text-muted-foreground">
               {{ field.description }}
             </p>
+            <p
+              v-if="field.unit === 'bytes'"
+              :id="`config-unit-${field.path}`"
+              class="text-xs text-muted-foreground"
+            >
+              输入单位为字节，当前输入约为
+              {{ formatByteSize(values[field.path]) }}。
+            </p>
             <p class="text-xs font-medium text-muted-foreground">
               {{
                 field.applyMode === "restart"
@@ -91,12 +111,22 @@ function updateInteger(path: string, event: Event) {
           v-if="field.input === 'integer'"
           :id="`config-${field.path}`"
           type="number"
+          :aria-describedby="
+            field.unit === 'bytes' ? `config-unit-${field.path}` : undefined
+          "
           :min="field.minimum"
           :max="field.maximum"
           :model-value="String(values[field.path] ?? '')"
           :disabled="!canManage || saving"
           @input="updateInteger(field.path, $event)"
         />
+        <TimeZoneSelect
+          v-if="field.input === 'time-zone'"
+          :id="`config-${field.path}`"
+          :model-value="String(values[field.path] ?? '')"
+          :disabled="!canManage || saving"
+          @update:model-value="update(field.path, $event)"
+        />
         <Input
           v-if="field.input === 'text'"
           :id="`config-${field.path}`"

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

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
 import type {
   ModuleConfigValues,
   ModuleConfigVersion,
@@ -64,8 +72,7 @@ async function refresh() {
   }
 }
 
-async function requestModule(event: Event) {
-  const moduleKey = (event.currentTarget as HTMLSelectElement).value;
+async function requestModule(moduleKey: string) {
   if (moduleKey === configurations.selectedModuleKey.value) return;
   if (!(await confirmChanges())) return;
   try {
@@ -193,20 +200,24 @@ function serialize(current: ModuleConfigValues): string {
     >
       <label class="grid min-w-72 gap-2 text-sm font-medium">
         <span>配置模块</span>
-        <select
-          class="h-9 rounded-md border border-input bg-background px-3 text-sm"
-          :value="configurations.selectedModuleKey.value"
+        <Select
+          :model-value="configurations.selectedModuleKey.value"
           :disabled="configurations.loading.value"
-          @change="requestModule"
+          @update:model-value="requestModule(String($event))"
         >
-          <option
-            v-for="summary in configurations.summaries.value"
-            :key="summary.moduleKey"
-            :value="summary.moduleKey"
-          >
-            {{ summary.label }}（{{ summary.moduleKey }}）
-          </option>
-        </select>
+          <SelectTrigger aria-label="配置模块" class="w-full"
+            ><SelectValue placeholder="选择配置模块"
+          /></SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="summary in configurations.summaries.value"
+              :key="summary.moduleKey"
+              :value="summary.moduleKey"
+            >
+              {{ summary.label }}（{{ summary.moduleKey }}）
+            </SelectItem>
+          </SelectContent>
+        </Select>
       </label>
       <button
         type="button"

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  id: string;
+  modelValue: string;
+  disabled?: boolean;
+}>();
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+
+const now = new Date();
+const supportedZones = Intl.supportedValuesOf?.("timeZone") ?? [];
+const options = computed(() => {
+  const zones = new Set(["UTC", "Asia/Shanghai", ...supportedZones]);
+  if (props.modelValue) zones.add(props.modelValue);
+
+  return [...zones].sort().map((zone) => ({
+    value: zone,
+    label: formatZone(zone),
+  }));
+});
+
+function formatZone(zone: string): string {
+  try {
+    const offset = new Intl.DateTimeFormat("en", {
+      timeZone: zone,
+      timeZoneName: "longOffset",
+    })
+      .formatToParts(now)
+      .find(({ type }) => type === "timeZoneName")?.value;
+    return offset ? `${zone}（${offset.replace("GMT", "UTC")}）` : zone;
+  } catch {
+    return zone;
+  }
+}
+</script>
+
+<template>
+  <select
+    :id="id"
+    :value="modelValue"
+    :disabled="disabled"
+    class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    @change="
+      emit(
+        'update:modelValue',
+        ($event.currentTarget as HTMLSelectElement).value,
+      )
+    "
+  >
+    <option v-for="option in options" :key="option.value" :value="option.value">
+      {{ option.label }}
+    </option>
+  </select>
+</template>

package/template/apps/web/src/pages/errors/PlatformErrorPage.vue

@@ -90,6 +90,12 @@ const primaryTarget = computed(() =>
               <dt>原请求地址</dt>
               <dd class="break-all font-mono text-foreground">{{ from }}</dd>
             </div>
+            <div v-if="diagnosticId" class="flex flex-wrap gap-2">
+              <dt>诊断编号</dt>
+              <dd class="break-all font-mono text-foreground">
+                {{ diagnosticId }}
+              </dd>
+            </div>
             <div v-if="requestId" class="flex flex-wrap gap-2">
               <dt>Request ID</dt>
               <dd class="break-all font-mono text-foreground">

package/template/apps/web/src/pages/errors/PlatformErrorPage.webtest.ts

@@ -3,12 +3,17 @@ import { describe, expect, test } from "vitest";
 import PlatformErrorPage from "./PlatformErrorPage.vue";
 import type { ErrorPageKind } from "./error-page-extension";
 
-function render(kind: ErrorPageKind, requestId?: string) {
+function render(
+  kind: ErrorPageKind,
+  requestId?: string,
+  diagnosticId?: string,
+) {
   return mount(PlatformErrorPage, {
     props: {
       kind,
       from: "/records/42",
       requestId,
+      diagnosticId,
     },
     global: {
       stubs: {
@@ -41,4 +46,12 @@ describe("平台统一错误页", () => {
     expect(wrapper.text()).toContain("Request ID");
     expect(wrapper.text()).toContain("req-error-page-1");
   });
+
+  test("错误页展示可用于后台查询的完整诊断编号，保留独立 Request ID", () => {
+    const diagnosticId = "diag-019a1234-5678-7000-8000-000000000001";
+    const wrapper = render("maintenance", "req-independent", diagnosticId);
+    expect(wrapper.text()).toContain("诊断编号");
+    expect(wrapper.text()).toContain(diagnosticId);
+    expect(wrapper.text()).toContain("req-independent");
+  });
 });

package/template/apps/web/src/pages/errors/error-page-extension.ts

@@ -10,6 +10,7 @@ export interface ErrorPageProps {
   kind: ErrorPageKind;
   from: string;
   requestId?: string;
+  diagnosticId?: string;
 }
 
 export interface ErrorPageComponents {

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 () => {