create-windy 0.9.1 → 0.10.1

package/template/apps/web/src/components/license/LicenseMachineCodeQr.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+const props = defineProps<{ machineCode: string }>();
+const visible = shallowRef(false);
+const loading = shallowRef(false);
+const image = shallowRef("");
+const error = shallowRef("");
+let generation = 0;
+
+function reset(): void {
+  generation++;
+  visible.value = false;
+  loading.value = false;
+  image.value = "";
+  error.value = "";
+}
+watch(() => props.machineCode, reset, { flush: "sync" });
+onBeforeUnmount(reset);
+
+async function show(): Promise<void> {
+  if (loading.value || !props.machineCode) return;
+  const current = ++generation;
+  const machineCode = props.machineCode;
+  visible.value = true;
+  loading.value = true;
+  error.value = "";
+  try {
+    const { default: QRCode } = await import("qrcode");
+    if (current !== generation) return;
+    const data = await QRCode.toDataURL(machineCode, {
+      width: 320,
+      margin: 4,
+      errorCorrectionLevel: "M",
+    });
+    if (current === generation) image.value = data;
+  } catch {
+    if (current === generation)
+      error.value = "二维码生成失败，请重试或返回授权页复制设备码。";
+  } finally {
+    if (current === generation) loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Sheet
+    v-if="machineCode"
+    :open="visible"
+    @update:open="$event ? show() : reset()"
+  >
+    <SheetTrigger as-child>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        class="mt-2"
+        data-testid="machine-code-qr-toggle"
+      >
+        显示设备码二维码
+      </Button>
+    </SheetTrigger>
+    <SheetContent class="w-full overflow-y-auto sm:max-w-sm">
+      <SheetHeader>
+        <SheetTitle>设备码二维码</SheetTitle>
+        <SheetDescription
+          >请运维扫码获取设备码，用于授权签发。</SheetDescription
+        >
+      </SheetHeader>
+      <div class="space-y-2 px-4 pb-4" aria-live="polite">
+        <p v-if="loading" class="text-muted-foreground">正在生成二维码…</p>
+        <img
+          v-if="image"
+          :src="image"
+          width="320"
+          height="320"
+          class="aspect-square h-auto w-80 max-w-full rounded-md border bg-white"
+          alt="设备码二维码，供运维扫码读取设备码"
+          data-testid="machine-code-qr"
+        />
+        <template v-if="error">
+          <p role="alert" class="text-sm text-destructive">{{ error }}</p>
+          <Button type="button" variant="outline" size="sm" @click="show">
+            重试
+          </Button>
+        </template>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>

package/template/apps/web/src/components/license/LicenseMachineCodeQr.webtest.ts

@@ -0,0 +1,83 @@
+import {
+  DOMWrapper,
+  enableAutoUnmount,
+  flushPromises,
+  mount,
+} from "@vue/test-utils";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import LicenseMachineCodeQr from "./LicenseMachineCodeQr.vue";
+
+enableAutoUnmount(afterEach);
+afterEach(() => document.body.replaceChildren());
+const body = () => new DOMWrapper(document.body);
+
+const render = vi.hoisted(() => vi.fn());
+vi.mock("qrcode", () => ({ default: { toDataURL: render } }));
+beforeEach(() =>
+  render.mockReset().mockResolvedValue("data:image/png;base64,qr"),
+);
+
+test("按需编码完整设备码，关闭抽屉后移除图片", async () => {
+  const machineCode = "machine:设备/123-ABC";
+  const wrapper = mount(LicenseMachineCodeQr, {
+    attachTo: document.body,
+    props: { machineCode },
+  });
+  expect(render).not.toHaveBeenCalled();
+  await wrapper.get("button").trigger("click");
+  await flushPromises();
+  expect(render).toHaveBeenCalledWith(
+    machineCode,
+    expect.objectContaining({ margin: 4 }),
+  );
+  expect(body().get("img").attributes("src")).toBe("data:image/png;base64,qr");
+  await body().get('[data-slot="sheet-close"]').trigger("click");
+  await flushPromises();
+  expect(body().find("img").exists()).toBe(false);
+  wrapper.unmount();
+});
+
+test("设备码变化后丢弃未完成的旧二维码", async () => {
+  let finish: (value: string) => void = () => {};
+  render.mockImplementationOnce(
+    () =>
+      new Promise<string>((resolve) => {
+        finish = resolve;
+      }),
+  );
+  const wrapper = mount(LicenseMachineCodeQr, {
+    attachTo: document.body,
+    props: { machineCode: "old" },
+  });
+  await wrapper.get("button").trigger("click");
+  await flushPromises();
+  await wrapper.setProps({ machineCode: "new" });
+  finish("data:image/png;base64,old");
+  await flushPromises();
+  expect(body().find("img").exists()).toBe(false);
+  await wrapper.get("button").trigger("click");
+  await flushPromises();
+  expect(render).toHaveBeenLastCalledWith("new", expect.any(Object));
+  wrapper.unmount();
+});
+
+test("生成失败允许重试，空设备码无入口", async () => {
+  render.mockRejectedValueOnce(new Error("failed"));
+  const wrapper = mount(LicenseMachineCodeQr, {
+    attachTo: document.body,
+    props: { machineCode: "machine" },
+  });
+  await wrapper.get("button").trigger("click");
+  await flushPromises();
+  expect(body().get('[role="alert"]').text()).toContain("生成失败");
+  await body()
+    .findAll("button")
+    .find((button) => button.text() === "重试")!
+    .trigger("click");
+  await flushPromises();
+  expect(body().find("img").exists()).toBe(true);
+  await wrapper.setProps({ machineCode: "" });
+  expect(wrapper.find("button").exists()).toBe(false);
+  expect(body().find("img").exists()).toBe(false);
+  wrapper.unmount();
+});

package/template/apps/web/src/components/license/LicensePairingCard.vue

@@ -30,7 +30,7 @@ const statusText = computed(() => {
   if (status === "consumed") return "配对激活完成，新 License 已生效。";
   return model.session.value
     ? "等待手机扫描并完成签发…"
-    : "客户端无需连接互联网；手机扫码签发后会自动回传。";
+    : "客户服务器无需访问互联网。手机须能访问签发中心和本系统的内网 HTTPS 地址，才能扫码签发并回传。";
 });
 
 async function confirm(): Promise<void> {

package/template/apps/web/src/components/license/LicenseStatusCard.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { usePlatformSettings } from "@/composables/usePlatformSettings";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { PlatformLicenseSnapshot } from "@/services/license-api";
+import LicenseMachineCodeQr from "./LicenseMachineCodeQr.vue";
 import { formatLicenseDateTime } from "./license-display";
 
 const props = defineProps<{
   snapshot: PlatformLicenseSnapshot;
 }>();
 
+const { softwareName } = usePlatformSettings();
+
 const statusLabel = computed(() => {
   const labels: Record<PlatformLicenseSnapshot["status"], string> = {
     valid: "有效",
@@ -53,10 +57,18 @@ const expiresAtLabel = computed(() =>
         <p class="break-all font-mono" data-testid="machine-code">
           {{ snapshot.machineCode }}
         </p>
+        <LicenseMachineCodeQr
+          v-if="snapshot.machineCode"
+          :machine-code="snapshot.machineCode"
+        />
+      </div>
+      <div v-if="snapshot.canViewDetails">
+        <p class="text-muted-foreground">软件名称</p>
+        <p>{{ softwareName }}</p>
       </div>
       <div v-if="snapshot.canViewDetails">
-        <p class="text-muted-foreground">产品</p>
-        <p>{{ snapshot.productCode }}</p>
+        <p class="text-muted-foreground">产品标识</p>
+        <p class="break-all font-mono">{{ snapshot.productCode }}</p>
       </div>
       <template v-if="snapshot.canViewDetails && snapshot.license">
         <div>

package/template/apps/web/src/composables/useLoginFlow.ts

@@ -26,7 +26,7 @@ export function useLoginFlow() {
       // @windy-module system.license end
       resetSessionContext();
       const returnTo = safeReturnTo(route.query.returnTo);
-      // @windy-module system.agent begin
+      // @windy-module system.agent-ui begin
       if (
         new URL(returnTo, window.location.origin).pathname.replace(
           /\/$/,
@@ -36,7 +36,7 @@ export function useLoginFlow() {
         window.location.assign(returnTo);
         return;
       }
-      // @windy-module system.agent end
+      // @windy-module system.agent-ui end
       await router.replace(returnTo);
     } catch {
       submitError.value = auth.error.value || "登录失败，请稍后重试";

package/template/apps/web/src/composables/usePlatformSettings.ts

@@ -9,7 +9,7 @@ import {
 // @windy-module system.settings end
 
 const fallback: PlatformBrandingSettings = {
-  softwareName: "Windy Platform",
+  softwareName: "Windy",
   timeZone: "Asia/Shanghai",
 };
 const branding = shallowRef<PlatformBrandingSettings>({ ...fallback });

package/template/apps/web/src/composables/useWatermarkSettings.ts

@@ -44,6 +44,7 @@ export function useWatermarkSettings(
     refresh: () => load(true, "public"),
     loadManaged: () => load(true, "managed"),
     save,
+    applyImportedPolicy: applyPolicy,
   };
 }
 

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import windyLogo from "@/assets/windy.svg";
 import type { MenuNode } from "@southwind-ai/shared";
 import {
   ActivityIcon,
@@ -16,6 +17,7 @@ import {
   PanelLeftIcon,
   SettingsIcon,
   ShieldCheckIcon,
+  SparklesIcon,
   StampIcon,
   TicketIcon,
   UsersIcon,
@@ -62,6 +64,7 @@ const iconMap: Record<string, Component> = {
   settings: SettingsIcon,
   users: UsersIcon,
   "shield-check": ShieldCheckIcon,
+  sparkles: SparklesIcon,
   stamp: StampIcon,
   flag: FlagIcon,
   "key-round": KeyRoundIcon,
@@ -196,20 +199,13 @@ function findMenu(menus: MenuNode[], key: string): MenuNode | undefined {
       >
         <div
           data-testid="sidebar-brand-logo"
-          class="flex size-8 max-w-full shrink-0 items-center justify-center overflow-hidden rounded-lg [&>svg]:size-5 group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:[&>svg]:size-4"
-          :class="
-            platform.branding.value.logoUrl
-              ? 'bg-transparent text-sidebar-foreground'
-              : 'bg-primary text-primary-foreground'
-          "
+          class="flex size-8 max-w-full shrink-0 items-center justify-center overflow-hidden rounded-lg group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:rounded-sm"
         >
           <img
-            v-if="platform.branding.value.logoUrl"
-            :src="platform.branding.value.logoUrl"
+            :src="platform.branding.value.logoUrl || windyLogo"
             alt=""
             class="size-full object-contain"
           />
-          <BlocksIcon v-else />
         </div>
         <div class="min-w-0 group-data-[collapsible=icon]:hidden">
           <p class="truncate text-sm font-semibold">

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

@@ -96,7 +96,10 @@ describe("AppSidebar", () => {
     expect(brandLink.classes()).toContain("group-data-[collapsible=icon]:p-0");
     expect(logo.classes()).toContain("group-data-[collapsible=icon]:size-4");
     expect(logo.classes()).toContain("overflow-hidden");
-    expect(logo.classes()).toContain("bg-transparent");
+    expect(logo.classes().filter((name) => name.startsWith("bg-"))).toEqual([]);
+    expect(logo.get("img").attributes("src")).toBe(
+      state.branding.value.logoUrl,
+    );
     expect(logo.classes()).not.toContain("bg-primary");
     wrapper.unmount();
   });

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>