create-windy 0.2.34 → 0.3.0

package/template/apps/web/src/layout/NotificationPreferencesDialog.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type {
+  ExternalNotificationChannel,
+  UpdateNotificationPreferenceInput,
+} from "@southwind-ai/shared";
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useRouter } from "vue-router";
+import FormDialog from "@/components/common/FormDialog.vue";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
+import {
+  getNotificationPreference,
+  updateNotificationPreference,
+} from "@/services/notification-api";
+
+const open = defineModel<boolean>("open", { default: false });
+const form = shallowRef(emptyPreference());
+const baseline = shallowRef(emptyPreference());
+const categoryText = shallowRef("");
+const baselineCategoryText = shallowRef("");
+const loading = shallowRef(false);
+const error = shallowRef("");
+const confirmation = useUnsavedChangesConfirmation();
+const router = useRouter();
+let removeRouteGuard: (() => void) | undefined;
+const dirty = computed(
+  () =>
+    open.value &&
+    (JSON.stringify(form.value) !== JSON.stringify(baseline.value) ||
+      categoryText.value !== baselineCategoryText.value),
+);
+
+watch(open, (value) => {
+  if (value) void load();
+});
+onMounted(() => {
+  window.addEventListener("beforeunload", preventDirtyUnload);
+  removeRouteGuard = router.beforeEach(() =>
+    dirty.value ? confirmation.request(save) : true,
+  );
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("beforeunload", preventDirtyUnload);
+  removeRouteGuard?.();
+});
+
+async function load() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const preference = await getNotificationPreference();
+    form.value = {
+      enabledChannels: [...preference.enabledChannels],
+      disabledCategories: [...preference.disabledCategories],
+    };
+    baseline.value = structuredClone(form.value);
+    categoryText.value = preference.disabledCategories.join("、");
+    baselineCategoryText.value = categoryText.value;
+  } catch (currentError) {
+    error.value = message(currentError);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function save(): Promise<boolean> {
+  if (loading.value) return false;
+  loading.value = true;
+  error.value = "";
+  try {
+    const input = {
+      ...form.value,
+      disabledCategories: categoryText.value
+        .split(/[、,，]/)
+        .map((value) => value.trim())
+        .filter(Boolean),
+    };
+    const preference = await updateNotificationPreference(input);
+    form.value = {
+      enabledChannels: [...preference.enabledChannels],
+      disabledCategories: [...preference.disabledCategories],
+    };
+    baseline.value = structuredClone(form.value);
+    categoryText.value = preference.disabledCategories.join("、");
+    baselineCategoryText.value = categoryText.value;
+    open.value = false;
+    return true;
+  } catch (currentError) {
+    error.value = message(currentError);
+    return false;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function toggle(
+  channel: ExternalNotificationChannel,
+  checked: boolean | "indeterminate",
+) {
+  const current = form.value.enabledChannels;
+  form.value = {
+    ...form.value,
+    enabledChannels:
+      checked === true
+        ? [...new Set([...current, channel])]
+        : current.filter((item) => item !== channel),
+  };
+}
+
+function beforeClose() {
+  return dirty.value ? confirmation.request(save) : true;
+}
+
+function preventDirtyUnload(event: BeforeUnloadEvent) {
+  if (!dirty.value) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+
+function emptyPreference(): UpdateNotificationPreferenceInput {
+  return { enabledChannels: [], disabledCategories: [] };
+}
+
+function message(errorValue: unknown) {
+  return errorValue instanceof Error ? errorValue.message : String(errorValue);
+}
+</script>
+
+<template>
+  <FormDialog
+    v-model:open="open"
+    title="通知偏好"
+    description="站内通知始终保留；这里只控制普通类别的邮件和短信投递。安全等强制类别可绕过偏好。"
+    submit-text="保存偏好"
+    :loading="loading"
+    :before-close="beforeClose"
+    prevent-outside-close
+    content-class="sm:max-w-lg"
+    @submit="save"
+  >
+    <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
+    <fieldset class="space-y-3">
+      <legend class="text-sm font-medium">启用外部渠道</legend>
+      <label
+        v-for="channel in ['email', 'sms'] as ExternalNotificationChannel[]"
+        :key="channel"
+        class="flex items-center gap-2 text-sm"
+      >
+        <Checkbox
+          :model-value="form.enabledChannels.includes(channel)"
+          @update:model-value="toggle(channel, $event)"
+        />
+        {{ channel === "email" ? "邮件" : "短信" }}
+      </label>
+      <p class="text-xs text-muted-foreground">
+        短信需要业务项目提供供应商 Adapter；未配置时会记录为不可投递。
+      </p>
+    </fieldset>
+    <label class="block space-y-2 text-sm font-medium">
+      <span>不接收外部推送的普通分类</span>
+      <Input
+        v-model="categoryText"
+        maxlength="4000"
+        placeholder="例如：营销、运营活动"
+      />
+      <span class="block text-xs font-normal text-muted-foreground">
+        使用顿号或逗号分隔；不会影响站内通知。
+      </span>
+    </label>
+  </FormDialog>
+
+  <UnsavedChangesDialog
+    :open="confirmation.open.value"
+    :saving="confirmation.saving.value"
+    description="通知偏好尚未保存。取消会留在编辑状态；保存成功后才会继续关闭或离开。"
+    @cancel="confirmation.cancel"
+    @save="confirmation.save"
+  />
+</template>

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

@@ -0,0 +1,80 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import FormDialog from "@/components/common/FormDialog.vue";
+import NotificationPreferencesDialog from "./NotificationPreferencesDialog.vue";
+
+const mocks = vi.hoisted(() => ({
+  get: vi.fn(),
+  update: vi.fn(),
+  beforeEach: vi.fn(() => vi.fn()),
+}));
+
+vi.mock("@/services/notification-api", () => ({
+  getNotificationPreference: mocks.get,
+  updateNotificationPreference: mocks.update,
+}));
+
+vi.mock("vue-router", () => ({
+  useRouter: () => ({ beforeEach: mocks.beforeEach }),
+}));
+
+describe("通知偏好", () => {
+  beforeEach(() => {
+    mocks.get.mockReset();
+    mocks.update.mockReset();
+    mocks.beforeEach.mockClear();
+    mocks.get.mockResolvedValue({
+      userId: "u1",
+      enabledChannels: [],
+      disabledCategories: [],
+    });
+    mocks.update.mockImplementation(async (input) => ({
+      userId: "u1",
+      ...input,
+      updatedAt: "2026-07-26T00:00:00.000Z",
+    }));
+  });
+
+  test("保存渠道和分类偏好，且站内通知边界保持可见", async () => {
+    const wrapper = mount(NotificationPreferencesDialog, {
+      props: { open: true },
+      attachTo: document.body,
+    });
+    await flushPromises();
+    expect(document.body.textContent).toContain("站内通知始终保留");
+    document.body
+      .querySelector<HTMLButtonElement>('[data-slot="checkbox"]')
+      ?.click();
+    const input = document.body.querySelector<HTMLInputElement>("input");
+    expect(input).not.toBeNull();
+    input!.value = "营销、运营活动";
+    input!.dispatchEvent(new Event("input", { bubbles: true }));
+    await flushPromises();
+    wrapper.getComponent(FormDialog).vm.$emit("submit");
+    await flushPromises();
+
+    expect(mocks.update).toHaveBeenCalledWith({
+      enabledChannels: ["email"],
+      disabledCategories: ["营销", "运营活动"],
+    });
+    expect(wrapper.getComponent(FormDialog).props("open")).toBe(false);
+    wrapper.unmount();
+  });
+
+  test("偏好草稿触发浏览器离开保护", async () => {
+    const wrapper = mount(NotificationPreferencesDialog, {
+      props: { open: true },
+      attachTo: document.body,
+    });
+    await flushPromises();
+    const input = document.body.querySelector<HTMLInputElement>("input");
+    expect(input).not.toBeNull();
+    input!.value = "尚未保存";
+    input!.dispatchEvent(new Event("input", { bubbles: true }));
+    await flushPromises();
+    const event = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+    wrapper.unmount();
+  });
+});

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

@@ -1,13 +1,25 @@
-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",
-});
+const DEFAULT_TIME_ZONE = "Asia/Shanghai";
+let currentTimeZone = DEFAULT_TIME_ZONE;
+let dateTimeFormatter = createFormatter(currentTimeZone);
+
+function createFormatter(timeZone: string) {
+  return new Intl.DateTimeFormat("zh-CN", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hourCycle: "h23",
+  });
+}
+
+export function setDateTimeZone(timeZone: string): void {
+  if (timeZone === currentTimeZone) return;
+  dateTimeFormatter = createFormatter(timeZone);
+  currentTimeZone = timeZone;
+}
 
 export function formatDateTime(value: unknown): string {
   const date = value instanceof Date ? value : new Date(String(value || ""));

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { formatDateTime } from "./date-time";
+import { formatDateTime, setDateTimeZone } from "./date-time";
 
 describe("formatDateTime", () => {
   test("固定使用 Asia/Shanghai 的 24 小时时间显示到秒", () => {
@@ -11,4 +11,12 @@ describe("formatDateTime", () => {
   test("无效时间显示占位符", () => {
     expect(formatDateTime("not-a-date")).toBe("-");
   });
+
+  test("运行时切换 IANA 时区后用于后续格式化", () => {
+    setDateTimeZone("UTC");
+    expect(formatDateTime("2026-07-14T01:05:06.000Z")).toBe(
+      "2026-07-14 01:05:06",
+    );
+    setDateTimeZone("Asia/Shanghai");
+  });
 });

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

@@ -2,10 +2,23 @@ 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 {
+  installApiFailureNavigation,
+  installUnexpectedErrorNavigation,
+} from "./router/error-navigation";
+import { setApiFailureHandler, setUnauthorizedHandler } from "./services/http";
 import "./style.css";
 
 setUnauthorizedHandler(installUnauthorizedNavigation(router));
+setApiFailureHandler(installApiFailureNavigation(router));
+const navigateUnexpectedError = installUnexpectedErrorNavigation(router);
+router.onError((_error, to) => {
+  if (to.meta.errorPage !== true) navigateUnexpectedError(to.fullPath);
+});
 const app = createApp(App).use(router);
+app.config.errorHandler = (error, _instance, info) => {
+  console.error("Web 页面运行异常", { error, info });
+  navigateUnexpectedError();
+};
 await router.isReady();
 app.mount("#app");

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
+import { onMounted, shallowRef } from "vue";
+import { PASSWORD_POLICY, type PasswordPolicy } from "@southwind-ai/shared";
 import PasswordChangeForm from "@/components/auth/PasswordChangeForm.vue";
 import {
   Card,
@@ -10,11 +12,23 @@ import {
 } from "@/components/ui/card";
 import { useAuthSession } from "@/composables/useAuthSession";
 import { usePasswordChange } from "@/composables/usePasswordChange";
-import type { PasswordChangeInput } from "@/services/auth-api";
+import {
+  loadPasswordPolicy,
+  type PasswordChangeInput,
+} from "@/services/auth-api";
 
 const flow = usePasswordChange();
 const auth = useAuthSession();
 const router = useRouter();
+const policy = shallowRef<PasswordPolicy>(PASSWORD_POLICY);
+
+onMounted(async () => {
+  try {
+    policy.value = await loadPasswordPolicy();
+  } catch {
+    // The server enforces the policy; the packaged default keeps the form usable.
+  }
+});
 
 async function submit(input: PasswordChangeInput) {
   if (!(await flow.submit(input))) return;
@@ -38,6 +52,7 @@ async function submit(input: PasswordChangeInput) {
         <PasswordChangeForm
           :loading="flow.loading.value"
           :error="flow.submitError.value"
+          :policy="policy"
           @submit="submit"
         />
       </CardContent>

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

@@ -26,6 +26,7 @@ const statusText: Record<ModuleConfigApplyStatus, string> = {
   applying: "应用中",
   effective: "已生效",
   failed: "应用失败",
+  "pending-restart": "等待重启",
   superseded: "已替代",
 };
 </script>

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

@@ -52,6 +52,9 @@ function updateInteger(path: string, event: Event) {
         <template v-if="summary.effectiveVersion">
           · 生效版本 v{{ summary.effectiveVersion }}
         </template>
+        <template v-if="summary.latestStatus === 'pending-restart'">
+          · v{{ summary.latestVersion }} 等待重启，表单显示该版本的目标值
+        </template>
       </CardDescription>
     </CardHeader>
     <CardContent class="space-y-5">
@@ -68,6 +71,13 @@ function updateInteger(path: string, event: Event) {
             <p class="text-xs text-muted-foreground">
               {{ field.description }}
             </p>
+            <p class="text-xs font-medium text-muted-foreground">
+              {{
+                field.applyMode === "restart"
+                  ? "保存后等待服务重启生效"
+                  : "保存后即时生效"
+              }}
+            </p>
           </div>
           <Switch
             v-if="field.input === 'boolean'"

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

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import type { ModuleConfigValues, ModuleConfigVersion } from "@southwind-ai/shared";
+import type {
+  ModuleConfigValues,
+  ModuleConfigVersion,
+} from "@southwind-ai/shared";
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
 import { onBeforeRouteLeave } from "vue-router";
 import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
@@ -7,6 +10,7 @@ import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { useAppToast } from "@/composables/useAppToast";
 import { useModuleConfigurations } from "@/composables/useModuleConfigurations";
 import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
+import { setDateTimeZone } from "@/lib/date-time";
 import ModuleConfigRollbackDialog from "./ModuleConfigRollbackDialog.vue";
 import ModuleConfigVersionList from "./ModuleConfigVersionList.vue";
 import ModuleConfigurationEditor from "./ModuleConfigurationEditor.vue";
@@ -80,14 +84,22 @@ async function save(): Promise<boolean> {
       { ...values.value },
       reason.value.trim() || undefined,
     );
-    if (version.applyStatus !== "effective") {
+    if (
+      version.applyStatus !== "effective" &&
+      version.applyStatus !== "pending-restart"
+    ) {
       toast.error("新版本未能生效", {
         description: version.applyError || "请查看版本状态后重试。",
       });
       return false;
     }
+    applyLocalRuntimeProjection(version);
     resetDraft();
-    toast.success(`配置版本 v${version.version} 已生效`);
+    toast.success(
+      version.applyStatus === "pending-restart"
+        ? `配置版本 v${version.version} 已保存，等待服务重启生效`
+        : `配置版本 v${version.version} 已生效`,
+    );
     return true;
   } catch {
     toast.error("配置版本应用失败", {
@@ -111,16 +123,24 @@ async function confirmRollback(rollbackReason: string) {
       target.version,
       rollbackReason,
     );
-    if (version.applyStatus !== "effective") {
+    if (
+      version.applyStatus !== "effective" &&
+      version.applyStatus !== "pending-restart"
+    ) {
       toast.error("回滚版本未能生效", {
         description: version.applyError || "请查看版本状态后重试。",
       });
       return;
     }
+    applyLocalRuntimeProjection(version);
     rollbackOpen.value = false;
     rollbackTarget.value = undefined;
     resetDraft();
-    toast.success(`回滚版本 v${version.version} 已生效`);
+    toast.success(
+      version.applyStatus === "pending-restart"
+        ? `回滚版本 v${version.version} 已保存，等待服务重启生效`
+        : `回滚版本 v${version.version} 已生效`,
+    );
   } catch {
     toast.error("创建回滚版本失败", {
       description: configurations.error.value || "请稍后重试。",
@@ -129,11 +149,22 @@ async function confirmRollback(rollbackReason: string) {
 }
 
 function resetDraft() {
-  values.value = { ...(configurations.selected.value?.effectiveValues || {}) };
+  values.value = {
+    ...(configurations.selected.value?.pendingValues ||
+      configurations.selected.value?.effectiveValues ||
+      {}),
+  };
   baseline.value = serialize(values.value);
   reason.value = "";
 }
 
+function applyLocalRuntimeProjection(version: ModuleConfigVersion) {
+  const timeZone = version.values["regional.timeZone"];
+  if (version.applyStatus === "effective" && typeof timeZone === "string") {
+    setDateTimeZone(timeZone);
+  }
+}
+
 function confirmChanges(): Promise<boolean> {
   return dirty.value ? confirmation.request(save) : Promise.resolve(true);
 }

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

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import {
+  AlertTriangleIcon,
+  CloudOffIcon,
+  ConstructionIcon,
+  FileQuestionIcon,
+} from "@lucide/vue";
+import { computed, type Component } from "vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import type { ErrorPageKind, ErrorPageProps } from "./error-page-extension";
+
+interface ErrorPageContent {
+  eyebrow: string;
+  title: string;
+  description: string;
+  primaryLabel: string;
+}
+
+const props = defineProps<ErrorPageProps>();
+
+const contentByKind: Record<ErrorPageKind, ErrorPageContent> = {
+  "not-found": {
+    eyebrow: "404",
+    title: "页面不存在",
+    description: "当前地址没有对应页面，可能已被移动、删除或输入有误。",
+    primaryLabel: "返回首页",
+  },
+  internal: {
+    eyebrow: "500",
+    title: "页面运行异常",
+    description:
+      "应用处理当前页面时发生异常。你可以重新进入原页面，或返回首页继续使用。",
+    primaryLabel: "重新进入",
+  },
+  maintenance: {
+    eyebrow: "维护中",
+    title: "服务正在维护",
+    description:
+      "服务端暂时停止处理请求。请稍后重试；如持续发生，请联系系统维护人员。",
+    primaryLabel: "重新连接",
+  },
+  network: {
+    eyebrow: "网络异常",
+    title: "无法连接服务",
+    description: "请检查当前网络与服务状态，连接恢复后再重新进入原页面。",
+    primaryLabel: "重新连接",
+  },
+};
+
+const iconByKind = {
+  "not-found": FileQuestionIcon,
+  internal: AlertTriangleIcon,
+  maintenance: ConstructionIcon,
+  network: CloudOffIcon,
+} satisfies Record<ErrorPageKind, Component>;
+
+const content = computed(() => contentByKind[props.kind]);
+const icon = computed(() => iconByKind[props.kind]);
+const primaryTarget = computed(() =>
+  props.kind === "not-found" ? "/" : props.from,
+);
+</script>
+
+<template>
+  <main class="mx-auto flex min-h-svh w-full max-w-3xl items-center px-6 py-16">
+    <Card class="w-full overflow-hidden">
+      <CardContent class="grid gap-8 p-8 sm:grid-cols-[auto_1fr] sm:p-12">
+        <div
+          class="flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground"
+          aria-hidden="true"
+        >
+          <component :is="icon" class="size-7" />
+        </div>
+        <section class="space-y-5">
+          <div class="space-y-2">
+            <p class="text-sm font-semibold text-muted-foreground">
+              {{ content.eyebrow }}
+            </p>
+            <h1 class="text-3xl font-semibold tracking-tight">
+              {{ content.title }}
+            </h1>
+            <p class="max-w-xl leading-7 text-muted-foreground">
+              {{ content.description }}
+            </p>
+          </div>
+
+          <dl class="space-y-1 text-xs text-muted-foreground">
+            <div class="flex flex-wrap gap-2">
+              <dt>原请求地址</dt>
+              <dd class="break-all font-mono text-foreground">{{ from }}</dd>
+            </div>
+            <div v-if="requestId" class="flex flex-wrap gap-2">
+              <dt>Request ID</dt>
+              <dd class="break-all font-mono text-foreground">
+                {{ requestId }}
+              </dd>
+            </div>
+          </dl>
+
+          <div class="flex flex-wrap gap-3">
+            <Button as-child>
+              <RouterLink :to="primaryTarget">
+                {{ content.primaryLabel }}
+              </RouterLink>
+            </Button>
+            <Button v-if="primaryTarget !== '/'" as-child variant="outline">
+              <RouterLink to="/">返回首页</RouterLink>
+            </Button>
+          </div>
+        </section>
+      </CardContent>
+    </Card>
+  </main>
+</template>

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

@@ -0,0 +1,44 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import PlatformErrorPage from "./PlatformErrorPage.vue";
+import type { ErrorPageKind } from "./error-page-extension";
+
+function render(kind: ErrorPageKind, requestId?: string) {
+  return mount(PlatformErrorPage, {
+    props: {
+      kind,
+      from: "/records/42",
+      requestId,
+    },
+    global: {
+      stubs: {
+        RouterLink: {
+          props: ["to"],
+          template: '<a :data-to="to"><slot /></a>',
+        },
+      },
+    },
+  });
+}
+
+describe("平台统一错误页", () => {
+  test.each([
+    ["not-found", "页面不存在", "404"],
+    ["internal", "页面运行异常", "500"],
+    ["maintenance", "服务正在维护", "维护中"],
+    ["network", "无法连接服务", "网络异常"],
+  ] as const)("展示 %s 的稳定中文语义", (kind, title, eyebrow) => {
+    const wrapper = render(kind);
+
+    expect(wrapper.text()).toContain(title);
+    expect(wrapper.text()).toContain(eyebrow);
+    expect(wrapper.text()).toContain("/records/42");
+  });
+
+  test("服务端 Request ID 可直接提供给支持人员", () => {
+    const wrapper = render("internal", "req-error-page-1");
+
+    expect(wrapper.text()).toContain("Request ID");
+    expect(wrapper.text()).toContain("req-error-page-1");
+  });
+});