create-windy 0.1.0

package/template/apps/web/src/app/home/HomeWelcome.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ArrowRightIcon, LoaderCircleIcon, LogOutIcon } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+defineProps<{
+  projectName: string;
+  displayName: string;
+  username?: string;
+  adminAccess: boolean;
+  loading: boolean;
+  loggingOut: boolean;
+  error?: string;
+}>();
+
+const emit = defineEmits<{
+  enterAdmin: [];
+  logout: [];
+  retry: [];
+}>();
+</script>
+
+<template>
+  <main class="mx-auto flex min-h-svh w-full max-w-5xl items-center px-6 py-16">
+    <div class="w-full space-y-10">
+      <header class="flex items-center justify-between gap-4">
+        <p class="text-sm font-semibold tracking-wide">{{ projectName }}</p>
+        <Button
+          variant="ghost"
+          :disabled="loggingOut"
+          @click="emit('logout')"
+        >
+          <LoaderCircleIcon v-if="loggingOut" class="animate-spin" />
+          <LogOutIcon v-else />
+          {{ loggingOut ? "正在退出" : "退出登录" }}
+        </Button>
+      </header>
+
+      <section class="max-w-3xl space-y-4">
+        <p class="text-sm text-muted-foreground">
+          已登录{{ username ? ` · ${username}` : "" }}
+        </p>
+        <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
+          你好，{{ displayName }}
+        </h1>
+        <p class="max-w-2xl text-base leading-7 text-muted-foreground">
+          这是业务功能的初始首页。你可以从这里开始组织自己的页面、导航与产品体验，管理后台保持独立，不限制业务层的开发方式。
+        </p>
+      </section>
+
+      <Card class="max-w-2xl">
+        <CardContent class="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
+          <div class="space-y-1">
+            <p class="font-medium">开始构建你的产品</p>
+            <p class="text-sm text-muted-foreground">
+              替换这个页面，接入第一个业务模块或搭建你的应用导航。
+            </p>
+          </div>
+          <Button
+            v-if="adminAccess"
+            data-testid="enter-admin"
+            @click="emit('enterAdmin')"
+          >
+            进入管理后台
+            <ArrowRightIcon />
+          </Button>
+        </CardContent>
+      </Card>
+
+      <div
+        v-if="loading || error"
+        class="flex max-w-2xl items-center gap-3 text-sm text-muted-foreground"
+      >
+        <LoaderCircleIcon v-if="loading" class="size-4 animate-spin" />
+        <template v-if="loading">正在确认当前账号能力…</template>
+        <template v-else>
+          <span>暂时无法加载账号能力。</span>
+          <Button size="sm" variant="outline" @click="emit('retry')">
+            重试
+          </Button>
+        </template>
+      </div>
+    </div>
+  </main>
+</template>

package/template/apps/web/src/app/home/HomeWelcome.webtest.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from "vitest";
+import { mount } from "@vue/test-utils";
+import HomeWelcome from "./HomeWelcome.vue";
+
+const baseProps = {
+  projectName: "Sharp Sword",
+  displayName: "测试用户",
+  username: "tester",
+  loading: false,
+  loggingOut: false,
+};
+
+describe("业务首页", () => {
+  test("普通账号不会看到管理后台入口", () => {
+    const wrapper = mount(HomeWelcome, {
+      props: { ...baseProps, adminAccess: false },
+    });
+
+    expect(wrapper.text()).toContain("你好，测试用户");
+    expect(wrapper.find('[data-testid="enter-admin"]').exists()).toBe(false);
+  });
+
+  test("服务端确认管理员能力后展示并触发管理后台入口", async () => {
+    const wrapper = mount(HomeWelcome, {
+      props: { ...baseProps, adminAccess: true },
+    });
+
+    await wrapper.get('[data-testid="enter-admin"]').trigger("click");
+
+    expect(wrapper.emitted("enterAdmin")).toHaveLength(1);
+  });
+});

package/template/apps/web/src/app/layouts/AppLayout.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Toaster } from "@/components/ui/sonner";
+</script>
+
+<template>
+  <div class="min-h-svh bg-muted/30 text-foreground">
+    <slot />
+    <Toaster />
+  </div>
+</template>

package/template/apps/web/src/components/auth/DevelopmentAuthWarning.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TriangleAlertIcon } from "@lucide/vue";
+</script>
+
+<template>
+  <Alert class="border-amber-300 bg-amber-50 text-amber-950">
+    <TriangleAlertIcon />
+    <AlertTitle>开发认证直通已配置</AlertTitle>
+    <AlertDescription>
+      当前构建显式启用了开发 Bearer
+      Token，仅用于本地调试。生产构建会忽略该配置，不能替代真实账号登录。
+    </AlertDescription>
+  </Alert>
+</template>

package/template/apps/web/src/components/auth/LoginForm.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { LoaderCircleIcon, LogInIcon } from "@lucide/vue";
+import type { LoginCredentials } from "@/services/auth-api";
+
+const props = defineProps<{
+  error?: string;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  submit: [credentials: LoginCredentials];
+}>();
+
+const username = shallowRef("");
+const password = shallowRef("");
+const canSubmit = computed(
+  () =>
+    !props.loading &&
+    username.value.trim().length > 0 &&
+    password.value.length > 0,
+);
+
+function submit() {
+  if (!canSubmit.value) return;
+  emit("submit", {
+    username: username.value.trim(),
+    password: password.value,
+  });
+}
+</script>
+
+<template>
+  <form class="space-y-4" data-testid="login-form" @submit.prevent="submit">
+    <div class="space-y-2">
+      <label for="username" class="text-sm font-medium">用户名</label>
+      <Input
+        id="username"
+        v-model="username"
+        name="username"
+        autocomplete="username"
+        placeholder="请输入用户名"
+        :disabled="loading"
+        required
+      />
+    </div>
+    <div class="space-y-2">
+      <label for="password" class="text-sm font-medium">密码</label>
+      <Input
+        id="password"
+        v-model="password"
+        name="password"
+        type="password"
+        autocomplete="current-password"
+        placeholder="请输入密码"
+        :disabled="loading"
+        required
+      />
+    </div>
+    <p v-if="error" class="text-sm text-destructive" role="alert">
+      {{ error }}
+    </p>
+    <Button
+      type="submit"
+      class="w-full"
+      :disabled="!canSubmit"
+      data-testid="login-submit"
+    >
+      <LoaderCircleIcon
+        v-if="loading"
+        class="animate-spin"
+        data-icon="inline-start"
+      />
+      <LogInIcon v-else data-icon="inline-start" />
+      {{ loading ? "正在登录" : "登录" }}
+    </Button>
+  </form>
+</template>

package/template/apps/web/src/components/auth/LoginForm.webtest.ts

@@ -0,0 +1,33 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import LoginForm from "./LoginForm.vue";
+
+describe("登录表单", () => {
+  test("用户填写用户名密码后提交公开 credentials 事件", async () => {
+    const wrapper = mount(LoginForm);
+
+    expect(wrapper.text()).toContain("用户名");
+    expect(wrapper.text()).toContain("密码");
+    await wrapper.get("#username").setValue(" admin ");
+    await wrapper.get("#password").setValue("test-only-password");
+    await wrapper.get("[data-testid='login-form']").trigger("submit");
+    await flushPromises();
+
+    expect(wrapper.emitted("submit")).toEqual([
+      [{ username: "admin", password: "test-only-password" }],
+    ]);
+  });
+
+  test("加载时禁用交互并显示服务端错误", async () => {
+    const wrapper = mount(LoginForm, {
+      props: { loading: true, error: "用户名或密码错误" },
+    });
+    await flushPromises();
+
+    expect(wrapper.get("[role='alert']").text()).toBe("用户名或密码错误");
+    expect(
+      wrapper.get("[data-testid='login-submit']").attributes(),
+    ).toHaveProperty("disabled");
+    expect(wrapper.text()).toContain("正在登录");
+  });
+});

package/template/apps/web/src/components/auth/PasswordChangeForm.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import { KeyRoundIcon, LoaderCircleIcon } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { PasswordChangeInput } from "@/services/auth-api";
+
+const props = defineProps<{ error?: string; loading?: boolean }>();
+const emit = defineEmits<{ submit: [input: PasswordChangeInput] }>();
+
+const currentPassword = shallowRef("");
+const newPassword = shallowRef("");
+const confirmation = shallowRef("");
+const localError = computed(() => {
+  if (confirmation.value && confirmation.value !== newPassword.value) {
+    return "两次输入的新密码不一致";
+  }
+  return "";
+});
+const canSubmit = computed(
+  () =>
+    !props.loading &&
+    currentPassword.value.length > 0 &&
+    newPassword.value.length >= 12 &&
+    newPassword.value === confirmation.value,
+);
+
+function submit() {
+  if (!canSubmit.value) return;
+  emit("submit", {
+    currentPassword: currentPassword.value,
+    newPassword: newPassword.value,
+  });
+}
+</script>
+
+<template>
+  <form class="space-y-4" @submit.prevent="submit">
+    <div class="space-y-2">
+      <label for="current-password" class="text-sm font-medium">当前密码</label>
+      <Input
+        id="current-password"
+        v-model="currentPassword"
+        type="password"
+        autocomplete="current-password"
+        :disabled="loading"
+        required
+      />
+    </div>
+    <div class="space-y-2">
+      <label for="new-password" class="text-sm font-medium">新密码</label>
+      <Input
+        id="new-password"
+        v-model="newPassword"
+        type="password"
+        autocomplete="new-password"
+        minlength="12"
+        maxlength="128"
+        :disabled="loading"
+        required
+      />
+      <p class="text-xs text-muted-foreground">请输入 12-128 个字符。</p>
+    </div>
+    <div class="space-y-2">
+      <label for="confirm-password" class="text-sm font-medium"
+        >确认新密码</label
+      >
+      <Input
+        id="confirm-password"
+        v-model="confirmation"
+        type="password"
+        autocomplete="new-password"
+        :disabled="loading"
+        required
+      />
+    </div>
+    <p v-if="localError || error" class="text-sm text-destructive" role="alert">
+      {{ localError || error }}
+    </p>
+    <Button type="submit" class="w-full" :disabled="!canSubmit">
+      <LoaderCircleIcon
+        v-if="loading"
+        class="animate-spin"
+        data-icon="inline-start"
+      />
+      <KeyRoundIcon v-else data-icon="inline-start" />
+      {{ loading ? "正在修改" : "修改密码并重新登录" }}
+    </Button>
+  </form>
+</template>

package/template/apps/web/src/components/auth/UserSessionMenu.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { WebAccessActor } from "@/layout/navigation";
+import {
+  LoaderCircleIcon,
+  LogOutIcon,
+  UserCircleIcon,
+  UserRoundCogIcon,
+} from "@lucide/vue";
+import { RouterLink } from "vue-router";
+
+defineProps<{
+  actor?: WebAccessActor;
+  loading?: boolean;
+  profileEnabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  logout: [];
+}>();
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="max-w-48" aria-label="当前账号">
+        <UserCircleIcon data-icon="inline-start" />
+        <span class="truncate">{{ actor?.name || "当前账号" }}</span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-56">
+      <DropdownMenuLabel class="space-y-1">
+        <p class="truncate">{{ actor?.name || "当前账号" }}</p>
+        <p class="truncate text-xs font-normal text-muted-foreground">
+          {{ actor?.roleCodes.join("、") || "无角色" }}
+        </p>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem v-if="profileEnabled" as-child>
+        <RouterLink to="/admin/profile">
+          <UserRoundCogIcon />
+          个人设置
+        </RouterLink>
+      </DropdownMenuItem>
+      <DropdownMenuItem :disabled="loading" @select="emit('logout')">
+        <LoaderCircleIcon v-if="loading" class="animate-spin" />
+        <LogOutIcon v-else />
+        {{ loading ? "正在退出" : "退出登录" }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/template/apps/web/src/components/auth/UserSessionMenu.webtest.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { createMemoryHistory, createRouter } from "vue-router";
+import UserSessionMenu from "./UserSessionMenu.vue";
+
+describe("UserSessionMenu", () => {
+  test("有访问权限时从头像菜单进入个人设置", async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: "/", component: { template: "<div />" } },
+        { path: "/admin/profile", component: { template: "<div />" } },
+      ],
+    });
+    await router.push("/");
+    await router.isReady();
+    const wrapper = mount(UserSessionMenu, {
+      attachTo: document.body,
+      props: {
+        profileEnabled: true,
+        actor: {
+          id: "user_1",
+          type: "user",
+          name: "管理员",
+          roleCodes: ["admin"],
+          permissionKeys: ["system.profile.read"],
+        },
+      },
+      global: { plugins: [router] },
+    });
+
+    await wrapper.get('button[aria-label="当前账号"]').trigger("click");
+    await flushPromises();
+    const link =
+      document.body.querySelector<HTMLAnchorElement>(
+        'a[href="/admin/profile"]',
+      );
+
+    expect(link?.textContent).toContain("个人设置");
+    link?.click();
+    await flushPromises();
+    expect(router.currentRoute.value.path).toBe("/admin/profile");
+    wrapper.unmount();
+  });
+});

package/template/apps/web/src/components/common/ConfirmDialog.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import ModalBody from "@/components/common/ModalBody.vue";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+const open = defineModel<boolean>("open", {
+  default: false,
+});
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    loading?: boolean;
+    destructive?: boolean;
+  }>(),
+  {
+    title: "确认操作",
+    description: "此操作提交后将立即生效，请确认是否继续。",
+    confirmText: "确认",
+    cancelText: "取消",
+    loading: false,
+    destructive: false,
+  },
+);
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+function handleCancel() {
+  emit("cancel");
+  open.value = false;
+}
+
+function handleConfirm() {
+  emit("confirm");
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent :show-close-button="false">
+      <DialogHeader>
+        <DialogTitle>{{ title }}</DialogTitle>
+      </DialogHeader>
+      <ModalBody>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </ModalBody>
+
+      <DialogFooter>
+        <Button variant="outline" :disabled="loading" @click="handleCancel">
+          {{ cancelText }}
+        </Button>
+        <Button
+          :variant="destructive ? 'destructive' : 'default'"
+          :disabled="loading"
+          @click="handleConfirm"
+        >
+          {{ loading ? "处理中..." : confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

package/template/apps/web/src/components/common/DataPagination.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch } from "vue";
+import { MAX_PAGE_SIZE } from "@windy/shared";
+import { Button } from "@/components/ui/button";
+
+const props = defineProps<{
+  page: number;
+  pageSize: number;
+  total: number;
+}>();
+const emit = defineEmits<{
+  "update:page": [page: number];
+  "update:page-size": [pageSize: number];
+}>();
+
+const pageSizeInput = shallowRef(String(props.pageSize));
+const pageCount = computed(() =>
+  Math.max(1, Math.ceil(props.total / props.pageSize)),
+);
+const hasPrevious = computed(() => props.page > 1);
+const hasNext = computed(() => props.page < pageCount.value);
+
+watch(
+  () => props.pageSize,
+  (value) => (pageSizeInput.value = String(value)),
+);
+
+function applyPageSize() {
+  const value = Number(pageSizeInput.value);
+  if (!Number.isSafeInteger(value) || value < 1 || value > MAX_PAGE_SIZE) {
+    pageSizeInput.value = String(props.pageSize);
+    return;
+  }
+  emit("update:page-size", value);
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between"
+  >
+    <span>共 {{ total }} 条，第 {{ page }} / {{ pageCount }} 页</span>
+    <div class="flex flex-wrap items-center gap-2">
+      <label class="flex items-center gap-2">
+        <span>每页</span>
+        <input
+          v-model="pageSizeInput"
+          data-testid="page-size-input"
+          type="number"
+          inputmode="numeric"
+          min="1"
+          :max="MAX_PAGE_SIZE"
+          class="h-8 w-20 rounded-md border border-input bg-transparent px-2 text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+          @change="applyPageSize"
+          @keyup.enter="applyPageSize"
+        />
+        <span>条（每页最多 {{ MAX_PAGE_SIZE }} 条）</span>
+      </label>
+      <Button
+        data-testid="previous-page"
+        variant="outline"
+        size="sm"
+        :disabled="!hasPrevious"
+        @click="emit('update:page', page - 1)"
+      >
+        上一页
+      </Button>
+      <Button
+        data-testid="next-page"
+        variant="outline"
+        size="sm"
+        :disabled="!hasNext"
+        @click="emit('update:page', page + 1)"
+      >
+        下一页
+      </Button>
+    </div>
+  </div>
+</template>

package/template/apps/web/src/components/common/DataPagination.webtest.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest";
+import { mount } from "@vue/test-utils";
+import DataPagination from "./DataPagination.vue";
+
+describe("DataPagination", () => {
+  test("首末页按钮禁用并允许输入任意有效页大小", async () => {
+    const wrapper = mount(DataPagination, {
+      props: { page: 1, pageSize: 10, total: 25 },
+    });
+
+    expect(
+      wrapper.get('[data-testid="previous-page"]').attributes(),
+    ).toHaveProperty("disabled");
+    expect(
+      wrapper.get('[data-testid="next-page"]').attributes(),
+    ).not.toHaveProperty("disabled");
+    expect(wrapper.text()).toContain("每页最多 100 条");
+
+    await wrapper.get('[data-testid="page-size-input"]').setValue("37");
+    await wrapper.get('[data-testid="page-size-input"]').trigger("change");
+    expect(wrapper.emitted("update:page-size")?.[0]).toEqual([37]);
+
+    await wrapper.setProps({ page: 3, total: 25 });
+    expect(
+      wrapper.get('[data-testid="next-page"]').attributes(),
+    ).toHaveProperty("disabled");
+  });
+});

package/template/apps/web/src/components/common/EmptyState.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { InboxIcon } from "@lucide/vue";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    actionLabel?: string;
+  }>(),
+  {
+    title: "暂无数据",
+    description: "当前没有可展示的内容。",
+  },
+);
+
+const emit = defineEmits<{
+  action: [];
+}>();
+</script>
+
+<template>
+  <Card class="border-dashed">
+    <CardContent
+      class="flex flex-col items-center gap-4 px-6 py-12 text-center"
+    >
+      <div
+        class="flex size-12 items-center justify-center rounded-lg border bg-muted text-muted-foreground"
+        aria-hidden="true"
+      >
+        <InboxIcon class="size-5" />
+      </div>
+      <div class="space-y-1.5">
+        <h2 class="text-base font-semibold text-foreground">{{ title }}</h2>
+        <p class="max-w-md text-sm text-muted-foreground">{{ description }}</p>
+      </div>
+      <Button v-if="actionLabel" variant="outline" @click="emit('action')">
+        {{ actionLabel }}
+      </Button>
+    </CardContent>
+  </Card>
+</template>