nixcn/cms-client
7
0
Fork 0
Code Pull Requests Activity

Merge develop into main #1

Merged
nvirellia merged 132 commits from develop into main 2026-05-03 14:00:39 +00:00
Conversation 0 Commits 132 Files Changed 193 +42158 -235
193 changed files with 42158 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.containerignore Normal file
View File

@@ -0,0 +1,6 @@
node_modules
build
.svelte-kit
test-results
*.md
.env*

13
.env.example Normal file
View File

@@ -0,0 +1,13 @@
# Backend API is proxied through the same origin as the SvelteKit app
# (Vite dev proxy in dev, Caddy in prod — see vite.config.ts / Caddyfile).
# No API_BASE_URL override needed.
PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAACI5pu-lNWFc6Wu1
# Sentry — error monitoring, tracing, session replay, logging
# VITE_SENTRY_DSN is public (bundled into the browser build)
VITE_SENTRY_DSN=
SENTRY_DSN=
SENTRY_ORG=
SENTRY_PROJECT=
# SENTRY_AUTH_TOKEN is secret; never commit it — use CI secrets or .env.local
SENTRY_AUTH_TOKEN=

10
.envrc Normal file
View File

@@ -0,0 +1,10 @@
export DIRENV_WARN_TIMEOUT=20s
eval "$(devenv direnvrc)"
# `use devenv` supports the same options as the `devenv shell` command.
#
# To silence the output, use `--quiet`.
#
# Example usage: use devenv --quiet --impure --option services.postgres.enable:bool true
use devenv

41
.gitignore vendored Normal file
View File

@@ -0,0 +1,41 @@
node_modules
.superpowers
# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build
# Playwright
/test-results
/playwright-report
/blob-report
/playwright/.cache
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.test
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
# Devenv
.devenv*
devenv.local.nix
devenv.local.yaml
# direnv
.direnv
# pre-commit
.pre-commit-config.yaml

1
.npmrc Normal file
View File

@@ -0,0 +1 @@
engine-strict=true

9
.prettierignore Normal file
View File

@@ -0,0 +1,9 @@
# Generated
src/lib/api/**
build/
.svelte-kit/
node_modules/
pnpm-lock.yaml
# Static assets
/static/

16
.prettierrc Normal file
View File

@@ -0,0 +1,16 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
],
"tailwindStylesheet": "./src/routes/layout.css"
}

24
.zed/settings.json Normal file
View File

@@ -0,0 +1,24 @@
{
"tab_size": 2,
"format_on_save": "on",
"languages": {
"TypeScript": {
"code_actions_on_format": {
"source.addMissingImports.ts": true,
"source.fixAll.eslint": true,
"source.fixAll.ts": true,
"source.removeUnusedImports.ts": true
},
"language_servers": ["typescript-language-server", "!vtsls", "!deno", "..."]
},
"JavaScript": {
"code_actions_on_format": {
"source.addMissingImports.ts": true,
"source.fixAll.eslint": true,
"source.fixAll.ts": true,
"source.removeUnusedImports.ts": true
},
"language_servers": ["typescript-language-server", "!vtsls", "!deno", "..."]
}
}
}

162
CLAUDE.md Normal file
View File

@@ -0,0 +1,162 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## App name
The correct spelling is **NixCN CMS** (no space between Nix and CN). Never write "Nix CN CMS".
## Project context
SvelteKit rewrite of `~/Projects/cms-client` (a React 19 SPA). This is **not a 1:1 port** — we use SSR + server actions instead of client fetching, and DaisyUI 5 instead of shadcn/Radix.
The rewrite is decomposed into sequential milestones, each with its own design spec + implementation plan under `docs/superpowers/`. Milestone 1 (Foundation) is complete on branch `foundation`. Milestones 2–7 (Profile, Events, Admin events, Admin users+stats, Check-in, Polish) still need to be brainstormed, planned, and built.
Read `docs/superpowers/overview.md` first — it maps all seven milestones, status, and cross-cutting invariants. Then `docs/superpowers/specs/2026-04-14-foundation-design.md` + `docs/superpowers/plans/2026-04-14-foundation.md` for the canonical Foundation design — those docs are more authoritative than this file for how the pieces fit.
## Commands
```bash
pnpm dev # Vite dev server on :5173; mounts app at /app/
pnpm build # vite build → build/ (adapter-node), runs via `node build`
pnpm preview # preview the built app on :4173
pnpm check # svelte-kit sync + svelte-check — run before every commit
pnpm gen # regenerate src/lib/api/ from backend OpenAPI (requires VPN to 10.0.0.10:8000)
pnpm lint # prettier --check + eslint
pnpm format # prettier --write
pnpm test:unit # vitest run (src/**/*.{test,spec}.ts)
pnpm test:e2e # playwright test (tests/e2e/**) — uses `pnpm dev` as webServer
pnpm test # unit then e2e
```
Run a single vitest test: `pnpm test:unit src/lib/server/session.test.ts -t 'single-flight'`.
Run a single Playwright test: `pnpm test:e2e -g 'redirected'`.
## Base path
The app is mounted at `/app/` (`svelte.config.js` sets `paths.base = '/app'`). Always use `base` from `$app/paths` when constructing links/redirects; hardcoded `/app/...` is fine in server-side `redirect()` calls but use `base` in templates.
## Architecture
### Request lifecycle (every request)
```
Browser → SvelteKit node server (adapter-node)
hooks.server.ts # read access_token cookie → event.locals.accessToken;
# call getUserInfo through the API client (→ interceptor);
# set event.locals.user
root +layout.server.ts # return { user }
(app)/+layout.server.ts # guard: if !locals.user → redirect to /app/authorize
+page.server.ts # createApiClient(event) → SDK calls → return data
+page.svelte # renders server data (no client fetching)
```
Form submissions use `actions` in `+page.server.ts`. Everything data-fetching is server-side.
### Session + auth
Short-lived JWT access token (~15s) + long-lived refresh token, both in **httpOnly cookies** set by `/token` after the magic-link OAuth callback.
**Refresh has two paths, both funnelling through `refreshSingleFlight` in `src/lib/server/session.ts`:**
1. **Proactive (primary):** `hooks.server.ts` decodes the JWT's `iat` claim (payload only, no signature verification) and calls `refreshSingleFlight` when ≤5s remain on the 15s access token — before any API call is made. This ensures all parallel load functions in the same request already see a freshly-issued token. Single-flight collapses concurrent proactive refreshes from multiple in-flight browser requests on the same process.
2. **Reactive (safety net):** the 401 interceptor in `src/lib/server/api.ts` still fires for any token that slipped through (e.g., clock skew), retrying the original request once.
After a successful rotation, the new token pair is cached in `recentlyRotated` (10s TTL) keyed by the old refresh token. A second browser request that arrives after the first has already refreshed (within 10s) gets the cached pair without a backend round-trip — covering the race where the browser sends a request before receiving the `Set-Cookie` from a previous response.
If refresh fails, cookies are cleared; the next request's `(app)` guard redirects to `/authorize`.
### API client
Generated by `@hey-api/openapi-ts` into `src/lib/api/` — **never edit manually** (it's prettier + eslint ignored). Regenerate with `pnpm gen`.
Always call the SDK through `createApiClient(event)` from `$lib/server/api`:
```ts
const api = createApiClient(event);
const result = await callSdk(() => someEndpoint({ client: api, body: {...} }));
```
The factory: injects `Authorization: Bearer <accessToken>`, installs the 401 interceptor, binds the client to `event.fetch`. `baseUrl` is derived from `event.url.origin` + `/app/api/v1` — the backend is always same-origin (Vite proxy in dev, Caddy in prod), so no `API_BASE_URL` env var is needed.
### Unified SDK error handling
`src/lib/server/errors.ts` is the **single normalization point** for every hey-api SDK call. It uses [`option-t`](https://github.com/option-t/option-t) Result types so callers never hand-roll `try/catch` + `if (result.error)`.
```ts
import { isErr, unwrapErr, unwrapOk } from 'option-t/plain_result';
import { callSdk, loadSdk } from '$lib/server/errors';
```
**In form actions** (keep user input, inline error):
```ts
const result = await callSdk(() => postAuthMagic({ client: api, body }));
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
const data = unwrapOk(result);
```
**In load functions** (error page via `+error.svelte`):
```ts
const data = await loadSdk(() => getEvents({ client: api }));
// throws SvelteKit error(status, message) on failure
```
`normalizeSdkError` handles three cases uniformly: transport errors (fetch threw) get prefixed `网络错误: …`, backend envelopes `{ status, msg?, message? }` are unwrapped, unknown shapes fall back to `status=500`.
**Never** ad-hoc `try/catch` around SDK calls or read `.error` / `.data` directly — use `callSdk` / `loadSdk`.
### UI conventions
- **DaisyUI 5** with a custom dark-only theme in `src/routes/layout.css` (OKLCH palette; `data-theme="dark"` on `<html>`).
- **Bits UI** for behavior (dropdowns, dialogs, selects) styled with DaisyUI classes.
- **Lucide icons** via `@lucide/svelte`. Render dynamically with `<item.icon class="..." />`.
- Forms: **`sveltekit-superforms` + Zod**. Schemas live in `src/lib/schemas/`. Server actions validate with `superValidate(request, zod(schema))`; client uses `superForm(data.form, { dataType: 'form' })`.
- Cloudflare Turnstile via `svelte-turnstile`. In dev (`import { dev } from '$app/environment'`), short-circuit with a hidden `<input name="cf-turnstile-response" value="turnstile_token">`.
- App shell (`(app)/+layout.svelte`) uses DaisyUI's `drawer lg:drawer-open` with `is-drawer-close:` / `is-drawer-open:` variants for icon-only collapse.
### Svelte 5
We're on **Svelte 5 runes mode** (enforced project-wide in `svelte.config.js`). Use `$state`, `$derived`, `$props`, `$effect` — no Svelte 4 `export let` or `$:`.
## Conventions
- **Imports**: `$lib/...` for `src/lib/`, `$lib/api` for the generated SDK, `$lib/server/...` for server-only modules.
- **Commits**: `feat:` / `fix:` / `chore:` / `docs:` / `refactor:` / `test:` prefix. Include trailer `Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>` when Claude produced the change.
- **Type safety**: no `any` without a cast-comment explaining why. Prefer `unknown` + narrowing.
- **Never** commit without running `pnpm check` first.
- **Run `pnpm lint:fix` once when a task is complete**, then make the single commit for that task. Formatting and the change belong in the same commit — do not follow up with a separate "format" commit.
## Writing E2E tests
E2E tests run against a programmable mock backend at `http://localhost:4010` (Hono in `scripts/mock-server.ts`). Vite's proxy auto-targets the mock when `NODE_ENV=test` (set by the `test:e2e` script), and strips the `/app/api/v1` prefix so test overrides target operation paths (e.g. `/auth/magic`) directly. No real backend is involved.
**Conventions:**
1. **Import the customized `test`** from `tests/e2e/helpers/fixtures` — never `@playwright/test` directly. The custom test wraps `mock.clear()` in `beforeEach`, so tests start with empty overrides + empty request log.
2. **Auth ceremony lives in the `loggedInUser` fixture.** Tests that need to start authenticated request the fixture: `test('foo', async ({ page, loggedInUser }) => { ... })`. This injects session cookies and registers a `GET /user/info` override. The full magic-link UI flow is verified exactly once, in `auth.spec.ts`.
3. **Every other endpoint the test hits, override inline.** Use `mock.override(METHOD, PATH, { status, body })` in the test body. Don't hide overrides in helpers — readers should see what the backend returns for that test without chasing dependencies.
4. **Mutation tests chain overrides.** Set the pre-mutation GET override → trigger the UI action that PATCHes → set the post-mutation GET override → assert on UI re-render → assert on `mock.requests({method, path})` to verify the PATCH carried the right body.
5. **Unmatched requests are a signal, not a bug to suppress.** If a test fails with `mock: no override for METHOD /path`, the test is incomplete — add the missing override. Never add safety defaults to silence the failure.
6. **401-triggered refresh.** Any test that overrides an SDK call with `status: 401` will trigger `createApiClient`'s 401 interceptor and call `POST /auth/refresh` — register a `/auth/refresh` override too, otherwise the refresh hits the unmatched-500 and the test fails for the wrong reason.
**Local gotcha:** `playwright.config.ts` uses `reuseExistingServer: !process.env.CI` for both the mock and the dev server. If you have a non-test `pnpm dev` already running on port 5173, `pnpm test:e2e` will reuse it and your tests will silently hit the real backend (or 500 with no VPN). Kill any standalone dev server before running E2E tests locally.
See `docs/superpowers/specs/2026-04-14-test-infrastructure-design.md` for the full design.
## Milestone workflow
This project follows the milestone discipline from `~/.claude/CLAUDE.md`: substantive changes get a spec under `docs/superpowers/specs/YYYY-MM-DD-<topic>-design.md` and a plan under `docs/superpowers/plans/YYYY-MM-DD-<topic>.md` **before** code. Trivial typo/doc fixes skip the overhead. Use the `/next-milestone` flow for new features; run the superpowers brainstorming → writing-plans → subagent-driven-development chain for bigger chunks.
## Integration assumptions
- Backend at `http://10.0.0.10:8000` (VPN required). Vite dev proxy mounts it under `/app/api`.
- Access token is a JWT issued by `/auth/token`; backend tolerates one grace-use of a rotated refresh token for multi-tab races.
- Magic-link flow: `POST /auth/magic` → email with link → `/app/token?code=…` → `POST /auth/token` exchange.

4
Caddyfile Normal file
View File

@@ -0,0 +1,4 @@
:80 {
encode gzip zstd
reverse_proxy localhost:3000
}

23
Containerfile Normal file
View File

@@ -0,0 +1,23 @@
FROM node:22-alpine AS builder
RUN corepack enable && corepack prepare pnpm@latest --activate
WORKDIR /srv
COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
RUN pnpm install --frozen-lockfile
COPY . .
ARG VITE_SENTRY_DSN
ARG SENTRY_DSN
ARG SENTRY_ORG
ARG SENTRY_PROJECT
ARG SENTRY_AUTH_TOKEN
RUN pnpm build
FROM node:22-alpine AS runtime
WORKDIR /srv
ENV NODE_ENV=production
ENV PORT=3000
ENV HOST=0.0.0.0
COPY --from=builder /srv/node_modules ./node_modules
COPY --from=builder /srv/build ./build
COPY --from=builder /srv/package.json ./
EXPOSE 3000
CMD ["node", "build"]

235
LICENSE
View File

@@ -1,235 +0,0 @@
GNU AFFERO GENERAL PUBLIC LICENSE
Version 3, 19 November 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
Preamble
The GNU Affero General Public License is a free, copyleft license for software and other kinds of works, specifically designed to ensure cooperation with the community in the case of network server software.
The licenses for most software and other practical works are designed to take away your freedom to share and change the works. By contrast, our General Public Licenses are intended to guarantee your freedom to share and change all versions of a program--to make sure it remains free software for all its users.
When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for them if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs, and that you know you can do these things.
Developers that use our General Public Licenses protect your rights with two steps: (1) assert copyright on the software, and (2) offer you this License which gives you legal permission to copy, distribute and/or modify the software.
A secondary benefit of defending all users' freedom is that improvements made in alternate versions of the program, if they receive widespread use, become available for other developers to incorporate. Many developers of free software are heartened and encouraged by the resulting cooperation. However, in the case of software used on network servers, this result may fail to come about. The GNU General Public License permits making a modified version and letting the public access it on a server without ever releasing its source code to the public.
The GNU Affero General Public License is designed specifically to ensure that, in such cases, the modified source code becomes available to the community. It requires the operator of a network server to provide the source code of the modified version running there to the users of that server. Therefore, public use of a modified version, on a publicly accessible server, gives the public access to the source code of the modified version.
An older license, called the Affero General Public License and published by Affero, was designed to accomplish similar goals. This is a different license, not a version of the Affero GPL, but Affero has released a new version of the Affero GPL which permits relicensing under this license.
The precise terms and conditions for copying, distribution and modification follow.
TERMS AND CONDITIONS
0. Definitions.
"This License" refers to version 3 of the GNU Affero General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of works, such as semiconductor masks.
"The Program" refers to any copyrightable work licensed under this License. Each licensee is addressed as "you". "Licensees" and "recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work in a fashion requiring copyright permission, other than the making of an exact copy. The resulting work is called a "modified version" of the earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based on the Program.
To "propagate" a work means to do anything with it that, without permission, would make you directly or secondarily liable for infringement under applicable copyright law, except executing it on a computer or modifying a private copy. Propagation includes copying, distribution (with or without modification), making available to the public, and in some countries other activities as well.
To "convey" a work means any kind of propagation that enables other parties to make or receive copies. Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices" to the extent that it includes a convenient and prominently visible feature that (1) displays an appropriate copyright notice, and (2) tells the user that there is no warranty for the work (except to the extent that warranties are provided), that licensees may convey the work under this License, and how to view a copy of this License. If the interface presents a list of user commands or options, such as a menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work for making modifications to it. "Object code" means any non-source form of a work.
A "Standard Interface" means an interface that either is an official standard defined by a recognized standards body, or, in the case of interfaces specified for a particular programming language, one that is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other than the work as a whole, that (a) is included in the normal form of packaging a Major Component, but which is not part of that Major Component, and (b) serves only to enable use of the work with that Major Component, or to implement a Standard Interface for which an implementation is available to the public in source code form. A "Major Component", in this context, means a major essential component (kernel, window system, and so on) of the specific operating system (if any) on which the executable work runs, or a compiler used to produce the work, or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all the source code needed to generate, install, and (for an executable work) run the object code and to modify the work, including scripts to control those activities. However, it does not include the work's System Libraries, or general-purpose tools or generally available free programs which are used unmodified in performing those activities but which are not part of the work. For example, Corresponding Source includes interface definition files associated with source files for the work, and the source code for shared libraries and dynamically linked subprograms that the work is specifically designed to require, such as by intimate data communication or control flow between those
subprograms and other parts of the work.
The Corresponding Source need not include anything that users can regenerate automatically from other parts of the Corresponding Source.
The Corresponding Source for a work in source code form is that same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not convey, without conditions so long as your license otherwise remains in force. You may convey covered works to others for the sole purpose of having them make modifications exclusively for you, or provide you with facilities for running those works, provided that you comply with the terms of this License in conveying all material for which you do not control copyright. Those thus making or running the covered works for you must do so exclusively on your behalf, under your direction and control, on terms that prohibit them from making any copies of your copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under the conditions stated below. Sublicensing is not allowed; section 10 makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures.
When you convey a covered work, you waive any legal power to forbid circumvention of technological measures to the extent such circumvention is effected by exercising rights under this License with respect to the covered work, and you disclaim any intention to limit operation or modification of the work as a means of enforcing, against the work's users, your or third parties' legal rights to forbid circumvention of technological measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program.
You may charge any price or no price for each copy that you convey, and you may offer support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions:
a) The work must carry prominent notices stating that you modified it, and giving a relevant date.
b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to "keep intact all notices".
c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so.
A compilation of a covered work with other separate and independent works, which are not by their nature extensions of the covered work, and which are not combined with it such as to form a larger program, in or on a volume of a storage or distribution medium, is called an "aggregate" if the compilation and its resulting copyright are not used to limit the access or legal rights of the compilation's users beyond what the individual works permit. Inclusion of a covered work in an aggregate does not cause this License to apply to the other parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways:
a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b.
d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d.
A separable portion of the object code, whose source code is excluded from the Corresponding Source as a System Library, need not be included in conveying the object code work.
A "User Product" is either (1) a "consumer product", which means any tangible personal property which is normally used for personal, family, or household purposes, or (2) anything designed or sold for incorporation into a dwelling. In determining whether a product is a consumer product, doubtful cases shall be resolved in favor of coverage. For a particular product received by a particular user, "normally used" refers to a typical or common use of that class of product, regardless of the status of the particular user or of the way in which the particular user actually uses, or expects or is expected to use, the product. A product is a consumer product regardless of whether the product has substantial commercial, industrial or non-consumer uses, unless such uses represent the only significant mode of use of the product.
"Installation Information" for a User Product means any methods, procedures, authorization keys, or other information required to install and execute modified versions of a covered work in that User Product from a modified version of its Corresponding Source. The information must suffice to ensure that the continued functioning of the modified object code is in no case prevented or interfered with solely because modification has been made.
If you convey an object code work under this section in, or with, or specifically for use in, a User Product, and the conveying occurs as part of a transaction in which the right of possession and use of the User Product is transferred to the recipient in perpetuity or for a fixed term (regardless of how the transaction is characterized), the Corresponding Source conveyed under this section must be accompanied by the Installation Information. But this requirement does not apply if neither you nor any third party retains the ability to install modified object code on the User Product (for example, the work has been installed in ROM).
The requirement to provide Installation Information does not include a requirement to continue to provide support service, warranty, or updates for a work that has been modified or installed by the recipient, or for the User Product in which it has been modified or installed. Access to a network may be denied when the modification itself materially and adversely affects the operation of the network or violates the rules and protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided, in accord with this section must be in a format that is publicly documented (and with an implementation available to the public in source code form), and must require no special password or key for unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions.
When you convey a copy of a covered work, you may at your option remove any additional permissions from that copy, or from any part of it. (Additional permissions may be written to require their own removal in certain cases when you modify the work.) You may place additional permissions on material, added by you to a covered work, for which you have or can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you add to a covered work, you may (if authorized by the copyright holders of that material) supplement the terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or author attributions in that material or in the Appropriate Legal Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or requiring that modified versions of such material be marked in reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or authors of the material; or
e) Declining to grant rights under trademark law for use of some trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that material by anyone who conveys the material (or modified versions of it) with contractual assumptions of liability to the recipient, for any liability that these contractual assumptions directly impose on those licensors and authors.
All other non-permissive additional terms are considered "further restrictions" within the meaning of section 10. If the Program as you received it, or any part of it, contains a notice stating that it is governed by this License along with a term that is a further restriction, you may remove that term. If a license document contains a further restriction but permits relicensing or conveying under this License, you may add to a covered work material governed by the terms of that license document, provided that the further restriction does not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you must place, in the relevant source files, a statement of the additional terms that apply to those files, or a notice indicating where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the form of a separately written license, or stated as exceptions; the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11).
However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation.
Moreover, your license from a particular copyright holder is reinstated permanently if the copyright holder notifies you of the violation by some reasonable means, this is the first time you have received notice of violation of this License (for any work) from that copyright holder, and you cure the violation prior to 30 days after your receipt of the notice.
Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, you do not qualify to receive new licenses for the same material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an organization, or substantially all assets of one, or subdividing an organization, or merging organizations. If propagation of a covered work results from an entity transaction, each party to that transaction who receives a copy of the work also receives whatever licenses to the work the party's predecessor in interest had or could give under the previous paragraph, plus a right to possession of the Corresponding Source of the work from the predecessor in interest, if the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. For example, you may not impose a license fee, royalty, or other charge for exercise of rights granted under this License, and you may not initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making, using, selling, offering for sale, or importing the Program or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims owned or controlled by the contributor, whether already acquired or hereafter acquired, that would be infringed by some manner, permitted by this License, of making, using, or selling its contributor version, but do not include claims that would be infringed only as a consequence of further modification of the contributor version. For purposes of this definition, "control" includes the right to grant patent sublicenses in a manner consistent with the requirements of this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under the contributor's essential patent claims, to make, use, sell, offer for sale, import and otherwise run, modify and propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express agreement or commitment, however denominated, not to enforce a patent (such as an express permission to practice a patent or covenant not to sue for patent infringement). To "grant" such a patent license to a party means to make such an agreement or commitment not to enforce a patent against the party.
If you convey a covered work, knowingly relying on a patent license, and the Corresponding Source of the work is not available for anyone to copy, free of charge and under the terms of this License, through a publicly available network server or other readily accessible means, then you must either (1) cause the Corresponding Source to be so available, or (2) arrange to deprive yourself of the benefit of the patent license for this particular work, or (3) arrange, in a manner consistent with the requirements of this License, to extend the patent
license to downstream recipients. "Knowingly relying" means you have actual knowledge that, but for the patent license, your conveying the covered work in a country, or your recipient's use of the covered work in a country, would infringe one or more identifiable patents in that country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or arrangement, you convey, or propagate by procuring conveyance of, a covered work, and grant a patent license to some of the parties receiving the covered work authorizing them to use, propagate, modify or convey a specific copy of the covered work, then the patent license you grant is automatically extended to all recipients of the covered work and works based on it.
A patent license is "discriminatory" if it does not include within the scope of its coverage, prohibits the exercise of, or is conditioned on the non-exercise of one or more of the rights that are specifically granted under this License. You may not convey a covered work if you are a party to an arrangement with a third party that is in the business of distributing software, under which you make payment to the third party based on the extent of your activity of conveying the work, and under which the third party grants, to any of the parties who would receive the covered work from you, a discriminatory patent license (a) in connection with copies of the covered work conveyed by you (or copies made from those copies), or (b) primarily for and in connection with specific products or compilations that contain the covered work, unless you entered into that arrangement, or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting any implied license or other defenses to infringement that may otherwise be available to you under applicable patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may
not convey it at all. For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program.
13. Remote Network Interaction; Use with the GNU General Public License.
Notwithstanding any other provision of this License, if you modify the Program, your modified version must prominently offer all users interacting with it remotely through a computer network (if your version supports such interaction) an opportunity to receive the Corresponding Source of your version by providing access to the Corresponding Source from a network server at no charge, through some standard or customary means of facilitating copying of software. This Corresponding Source shall include the Corresponding Source for any work covered by version 3 of the GNU General Public License that is incorporated pursuant to the following paragraph.
Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the work with which it is combined will remain governed by version 3 of the GNU General Public License.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of the GNU Affero General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the Program specifies that a certain numbered version of the GNU Affero General Public License "or any later version" applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the GNU Affero General Public License, you may choose any version ever published by the Free Software Foundation.
If the Program specifies that a proxy can decide which future versions of the GNU Affero General Public License can be used, that proxy's public statement of acceptance of a version permanently authorizes you to choose that version for the Program.
Later license versions may give you additional or different permissions. However, no additional obligations are imposed on any author or copyright holder as a result of your choosing to follow a later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest possible use to the public, the best way to achieve this is to make it free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest to attach them to the start of each source file to most effectively state the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found.
nixcn-cms
Copyright (C) 2025 sugar
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
Also add information on how to contact you by electronic and paper mail.
If your software can interact with users remotely through a computer network, you should also make sure that it provides a way for users to get its source. For example, if your program is a web application, its interface could display a "Source" link that leads users to an archive of the code. There are many ways you could offer source, and different solutions will be better for different programs; see section 13 for the specific requirements.
You should also get your employer (if you work as a programmer) or school, if any, to sign a "copyright disclaimer" for the program, if necessary. For more information on this, and how to apply and follow the GNU AGPL, see <http://www.gnu.org/licenses/>.

65
devenv.lock Normal file
View File

@@ -0,0 +1,65 @@
{
"nodes": {
"devenv": {
"locked": {
"dir": "src/modules",
"lastModified": 1777679510,
"narHash": "sha256-uG8LPb1useAwa0cjO5sEkYhCSPjbWiCH3DyNxQLVSck=",
"owner": "cachix",
"repo": "devenv",
"rev": "bc8b21628907c726c74094cedc439c10a455cdb7",
"type": "github"
},
"original": {
"dir": "src/modules",
"owner": "cachix",
"repo": "devenv",
"type": "github"
}
},
"nixpkgs": {
"inputs": {
"nixpkgs-src": "nixpkgs-src"
},
"locked": {
"lastModified": 1776852779,
"narHash": "sha256-WwO/ITisCXwyiRgtktZgv3iGhAGO+IB5Av4kKCwezR0=",
"owner": "cachix",
"repo": "devenv-nixpkgs",
"rev": "ec3063523dcd911aeadb50faa589f237cdab5853",
"type": "github"
},
"original": {
"owner": "cachix",
"ref": "rolling",
"repo": "devenv-nixpkgs",
"type": "github"
}
},
"nixpkgs-src": {
"flake": false,
"locked": {
"lastModified": 1776329215,
"narHash": "sha256-a8BYi3mzoJ/AcJP8UldOx8emoPRLeWqALZWu4ZvjPXw=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "b86751bc4085f48661017fa226dee99fab6c651b",
"type": "github"
},
"original": {
"owner": "NixOS",
"ref": "nixpkgs-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"root": {
"inputs": {
"devenv": "devenv",
"nixpkgs": "nixpkgs"
}
}
},
"root": "root",
"version": 7
}

15
devenv.nix Normal file
View File

@@ -0,0 +1,15 @@
{ pkgs, ... }:
{
languages = {
typescript = {
enable = true;
lsp.enable = true;
};
javascript = {
enable = true;
package = pkgs.nodejs_24;
corepack.enable = true;
};
};
}

18
devenv.yaml Normal file
View File

@@ -0,0 +1,18 @@
# yaml-language-server: $schema=https://devenv.sh/devenv.schema.json
inputs:
nixpkgs:
url: github:cachix/devenv-nixpkgs/rolling
# If you're using non-OSS software, you can set allowUnfree to true.
# allowUnfree: true
# If you're not willing to allow unsupported packages:
# allowUnsupportedSystem: false
# If you're willing to use a package that's vulnerable
# permittedInsecurePackages:
# - "openssl-1.1.1w"
# If you have more than one devenv you can merge them
#imports:
# - ./backend

115
docs/superpowers/overview.md Normal file
View File

@@ -0,0 +1,115 @@
# cms-client-svelte — Rewrite Overview
> Synthesis of the rewrite's milestone plan, cross-cutting architecture, and conventions. Primary audience: future agentic sessions spawning specs / plans for milestones 2–7. Per-milestone specs and plans live alongside this file in `specs/` and `plans/`; this overview is the map.
## Status
| # | Milestone | Status | Spec | Plan | Branch |
| --- | ------------------- | ---------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | ------------ |
| 1 | Foundation | ✅ shipped | [2026-04-14-foundation-design.md](specs/2026-04-14-foundation-design.md) | [2026-04-14-foundation.md](plans/2026-04-14-foundation.md) | `foundation` |
| 1.5 | Test infrastructure | ✅ shipped | [2026-04-14-test-infrastructure-design.md](specs/2026-04-14-test-infrastructure-design.md) | [2026-04-14-test-infrastructure.md](plans/2026-04-14-test-infrastructure.md) | `foundation` |
| 2 | Profile | ✅ shipped | [2026-04-14-profile-design.md](specs/2026-04-14-profile-design.md) | [2026-04-14-profile.md](plans/2026-04-14-profile.md) | `foundation` |
| 3 | Events (user) | ✅ shipped | [2026-04-14-events-design.md](specs/2026-04-14-events-design.md) | [2026-04-14-events.md](plans/2026-04-14-events.md) | `main` |
| 4 | Admin events | ✅ shipped | [2026-04-15-admin-events-design.md](specs/2026-04-15-admin-events-design.md) | [2026-04-15-admin-events.md](plans/2026-04-15-admin-events.md) | `main` |
| 5 | Admin users & stats | ✅ shipped | [2026-04-15-admin-users-stats-design.md](specs/2026-04-15-admin-users-stats-design.md) | [2026-04-15-admin-users-stats.md](plans/2026-04-15-admin-users-stats.md) | `main` |
| 6 | Check-in / QR | ✅ shipped | [2026-04-16-checkin-qr-design.md](specs/2026-04-16-checkin-qr-design.md) | [2026-04-16-checkin-qr.md](plans/2026-04-16-checkin-qr.md) | `main` |
| 7 | User agenda submit | ✅ shipped | [2026-04-16-user-agenda-design.md](specs/2026-04-16-user-agenda-design.md) | [2026-04-16-user-agenda.md](plans/2026-04-16-user-agenda.md) | `main` |
| 8 | Workbench | ✅ shipped | [2026-04-16-workbench-design.md](specs/2026-04-16-workbench-design.md) | [2026-04-16-workbench.md](plans/2026-04-16-workbench.md) | `main` |
| 9 | Polish | ✅ shipped | [2026-04-18-polish-design.md](specs/2026-04-18-polish-design.md) | [2026-04-18-polish.md](plans/2026-04-18-polish.md) | `develop` |
Each milestone: **brainstorm → spec (`specs/YYYY-MM-DD-<topic>-design.md`) → plan (`plans/YYYY-MM-DD-<topic>.md`) → subagent-driven execution → merge**. See "Milestone workflow" at the bottom.
## Milestone roadmap
**M1 — Foundation (shipped).** SvelteKit 2 + Svelte 5 (runes) app skeleton under base path `/app/`. Magic-link OAuth auth with httpOnly cookies and reactive 401 refresh. DaisyUI 5 drawer shell (icon-only collapsible sidebar, avatar dropdown with logout). Generated fetch SDK (hey-api) at `src/lib/api/`. Unified SDK error handling via `option-t`. Vitest (session helpers) + Playwright (auth smoke) rails. Out of scope: feature routes, Storybook, container/Caddy updates.
**M1.5 — Test infrastructure (shipped).** Programmable mock backend (Hono on `:4010`) with override-only semantics — no defaults, no state, no backend semantics. Vite proxy switches to the mock when `NODE_ENV=test` and strips `/app/api/v1` so overrides target operation paths. Test-side typed helpers (`mock.override`, `mock.requests`, `mock.clear`); custom Playwright `test` fixture auto-clears mock state and exposes a cookie-injection `loggedInUser` fixture. M1's auth smoke migrated; full magic-link pipeline verified end-to-end against the mock. Out of scope: backend-like state in the mock, openapi-driven defaults (Prism evaluated and rejected), per-worker mock isolation.
**M2 — Profile (shipped).** `/profile/[userId]` is the canonical URL for every profile (own + other); `/profile` is a bare convenience redirect to `/profile/<own_user_id>`. View shows avatar + permission badge + meta rows (email/username/public-flag) + copy-profile-link button; edit (self only) mutates username/nickname/subtitle/avatar/allow_public via a superforms-bound form. Introduces the three-face type system (Fraunces display, IBM Plex Sans body, IBM Plex Mono identifiers) with Noto SC fallbacks; M1 auth pages + navbar brand retrofitted. Out of scope (still): bio editing (→ M8), admin cross-edit (never), avatar upload.
**M3 — Events (user-facing) (shipped).** `/events` list with tab filter (all / joined), `/events/[eventId]` detail with hero, markdown description, attendance guide, and sticky sidebar. Join flow branches on `enable_kyc`: simple confirm dialog (`JoinDialog`) or five-stage KYC dialog (`KycDialog`, `createKycState` runes factory with `$effect` polling loop). `EventCard` three-zone layout with per-card KYC isolation. `POST /kyc-status` server proxy for token-safe KYC polling. Server actions `?/join` and `?/kycSession` with `Buffer`-based base64 codec. 9 E2E tests. Out of scope: `/joined-events` route, agenda, check-in QR, pagination, admin CRUD.
**M4 — Admin events.** `/admin/events` list + CRUD, `/admin/events/new`, `/admin/events/[eventId]` edit + agenda + attendance + stats subpages. Permission gate: `PARTY_EVENT_HOLDER` (Lv30) and up; `OFFICIAL_ADMIN` (Lv40) sees all events, others see their own. Markdown editor for event body (replace `@uiw/react-md-editor`; candidates: `bytemd`, `marked` + preview pane). DnD for agenda reordering (replace `@dnd-kit/*`; candidates: `svelte-dnd-action`). Out of scope: user/permissions admin (M5).
**M5 — Admin users & stats (shipped).** `/admin/users` list with sort, filter, pagination, and inline permission-level edit (gated by editor level — Lv40 assigns ≤Lv30, Lv50 assigns all); server-side validation of assignable levels. `/admin/stats` global dashboard with total-user count and event table. Route group `(admin-lv40)` guards both pages at Lv40+. `getAssignableLevels` helper in `$lib/permissions.ts`. 9 E2E tests covering list, inline edit, and permission-gate matrix. Out of scope: event-specific stats (M4), charts/visualizations (deferred).
**M6 — Check-in / QR (shipped).** `/checkin` staff scanner page (Lv20+, `(staff-lv20)` route group) with `@zxing/browser` camera viewfinder and 6-box `OtpInput.svelte` manual fallback; `?/submit` form action calls `POST /event/checkin/submit`. Attendee QR dialog on event detail page: fetches code via server proxy routes, renders QR with `qrcode` package, polls every 3 s, auto-closes on check-in. "扫码签到" sidebar entry for Lv20+. 7 E2E tests. Out of scope: attendance list (M4), per-event scanner scoping, scan history.
**M7 — User agenda submission (shipped).** Two surfaces added to `/events/[eventId]` with no new routes. (a) **Submission workflow:** "提交议程" button (visible only when joined, agenda not published, event not started) opens a superforms dialog with `name` (max 255) + `description` (required); submitted items appear in a "我的议程" sidebar card with status badges (待审核 / 已通过 / 已拒绝) and edit button for pending items. (b) **Published schedule:** once `is_agenda_published = true`, an "活动议程" timeline card renders in the main content column, visible to any user; descriptions rendered from base64 markdown via `marked`. Blocking rules (published, started, 5-pending) enforced both client-side (`canSubmit` derived) and server-side in `?/submitAgenda`. `?/editAgenda` skips re-checks; backend enforces ownership. Load extended with parallel `getEventGuide` + `getAgendaMyList` fan-out (joined-only) and sequential `getAgendaSchedule` (published-only). 12 E2E tests. Out of scope: admin review / approval / scheduling (M4 shipped), per-event backend quota changes.
**M8 — Workbench (工作台) (shipped).** Replace the Foundation placeholder at `/` with the full four-card dashboard. Also adds bio editing to the profile form (missed in M2). Data comes from two server `load` calls: `GET /user/info` (already available via `event.locals.user`) and `GET /event/list` (paginated, offset 0, same SDK as M3). Four cards: (a) **Welcome** — personalised greeting (`nickname ?? username`), joined-event count, quick links to `/events` and `/profile`; (b) **Current event** — finds the ongoing or nearest upcoming joined event, shows name/times/check-in status, "立即签到" shortcut for staff-eligible users; (c) **Upcoming schedule** — next 3 joined future events sorted by `start_time`, status badges (待开始 / 进行中 / 已签到), each links to `/events/[eventId]`; (d) **Profile completeness** — progress bar + checklist of 4 fields (nickname, subtitle, avatar, bio), CTA to `/profile`. All event derivation (ongoing detection, upcoming slice, completion %) happens in `+page.server.ts` `load`; no client-side fetch. E2E tests cover empty states and data-populated paths. NixOS snowflake watermark (bottom-right, low opacity) matching reference design. Out of scope: infinite-scroll pagination on the events feed, real-time check-in status updates.
**M9 — Polish (shipped).** Light/dark theme toggle via SSR cookie (`theme` cookie, `POST /app/theme` action, DaisyUI `data-theme`). Production Containerfile (Node 22 slim, multi-stage build) + Caddyfile (reverse-proxy to `:3000`, forward `/app/api/*` to backend, serve static assets). `.containerignore` added. All 78 unit tests and 77 E2E tests pass. Two residual E2E failures fixed during verification: auth test missing `GET /event/list` override, profile test strict-mode username ambiguity. Out of scope: performance audits, `API_BASE_URL` env redesign.
## Cross-cutting architecture (invariants)
Every feature milestone inherits these from M1 — **do not redesign them per-feature**:
- **SSR-first.** All data fetching in `+page.server.ts` `load` or form `actions`. No client-side `fetch` to the API. `+page.svelte` renders server-provided data.
- **`createApiClient(event)` from `$lib/server/api`** is the only way to talk to the backend. It injects `Authorization: Bearer <event.locals.accessToken>`, binds to `event.fetch`, installs the 401 refresh interceptor, and uses `${event.url.origin}/app/api/v1` as baseUrl.
- **Reactive refresh, one code path.** 401 interceptor in `createApiClient` calls `refreshSingleFlight` from `$lib/server/session`. Single-flight collapses concurrent refreshes per-process, keyed on the refresh-token string. No proactive JWT decoding, no duplicate refresh logic anywhere.
- **`hooks.server.ts` bootstraps the session.** Reads `access_token` cookie → calls `getUserInfo` through the API client (transparently refreshes if stale) → sets `event.locals.user` / `event.locals.accessToken`. Every request passes through it.
- **`(app)` route group is the authed space.** Its `+layout.server.ts` redirects anonymous users to `/app/authorize?redirect_to=…`. Every new feature route except `/authorize`, `/token`, `/magic-link-sent`, `/logout` lives under `(app)/`.
- **Cookies are httpOnly, `path=/app`, `sameSite=lax`, `secure`.** Always use `setSessionCookies` / `clearSessionCookies` / `setOAuthStateCookie` from `$lib/server/session`.
- **Unified SDK error handling via `option-t`.** Every hey-api call goes through `callSdk` (form actions, returns `Result<T, NormalizedError>`) or `loadSdk` (loads, throws SvelteKit `error()` on failure). Both from `$lib/server/errors`. Never hand-roll `try/catch` around an SDK call or read `.data` / `.error` directly.
- **Base path `/app/`.** Use `base` from `$app/paths` in templates; hardcoded `/app/...` is fine in server-side `redirect()`.
- **Generated SDK is untouchable.** `src/lib/api/**` is `pnpm gen`'s output; prettier + eslint ignore it. Never hand-edit. Regenerate with `pnpm gen` (requires VPN to `10.0.0.10:8000`).
- **Forms: `sveltekit-superforms` + Zod.** Schemas in `src/lib/schemas/`. Server: `superValidate(request, zod(schema))`. Client: `superForm(data.form, { dataType: 'form' })`.
- **E2E tests run against a programmable mock backend** (`scripts/mock-server.ts`, `tests/e2e/helpers/`). Vite proxy auto-flips when `NODE_ENV=test` and strips the `/app/api/v1` prefix so test overrides target operation paths directly. Tests never hit the real backend — see `CLAUDE.md` "Writing E2E tests" and `docs/superpowers/specs/2026-04-14-test-infrastructure-design.md`.
- **Three-face typography (Fraunces / IBM Plex Sans / IBM Plex Mono)** with Noto SC fallbacks. Utilities: `font-display` / `font-sans` / `font-mono`. Page titles + meta labels use `font-display` italic; identifiers (email, username, backend keys) use `font-mono`; body is `font-sans`. Introduced in M2; `/authorize` and `/magic-link-sent` retrofitted to match.
## Conventions
- **Imports:** `$lib/...` for `src/lib/`, `$lib/api` for the generated SDK, `$lib/server/...` for server-only modules. Nothing under `$lib/server/` may be imported from `.svelte` client code.
- **Commits:** conventional prefix (`feat:` / `fix:` / `chore:` / `docs:` / `refactor:` / `test:`). Include `Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>` trailer when Claude authored the change.
- **Type safety:** no `any` without a cast-comment explaining why. Prefer `unknown` + narrowing. `pnpm check` must pass before every commit.
- **Svelte 5 runes mode** is enforced project-wide (`svelte.config.js`). Use `$state`, `$derived`, `$props`, `$effect`. No Svelte 4 `export let` / `$:`.
- **DaisyUI 5 idioms used across milestones:**
- Layouts: `hero bg-base-200 min-h-svh` + `hero-content` for full-screen centered (auth pages, error).
- Cards: `card card-border bg-base-100 shadow-xl` + `card-body` + `card-title` + `card-actions`.
- Forms: `fieldset fieldset` > `legend fieldset-legend` + composite `<label class="input">` (icon child + `<input class="grow">`); conditional `input-error` class; `fieldset-label text-error` for hints.
- Alerts: `alert alert-{info,error,success} alert-soft`.
- Buttons: `btn btn-primary btn-block` for submit; `btn btn-ghost btn-circle` for icon buttons; inline `span.loading.loading-spinner loading-sm` during submission.
- Drawer shell: `drawer lg:drawer-open` with `is-drawer-close:` / `is-drawer-open:` variants for icon-only collapse; `is-drawer-close:tooltip is-drawer-close:tooltip-right` for collapsed-state labels.
- Navbar: `navbar-start` / `navbar-end` regions; `dropdown dropdown-end` + `avatar avatar-placeholder` for user menu.
- **Icons:** `@lucide/svelte`. Dynamic render: `<item.icon class="size-4" />`.
- **Interactive primitives:** `bits-ui` for dropdowns, dialogs, selects, tabs, tooltips, etc. — DaisyUI CSS classes layered on top.
- **Theme:** supports both `dark` and `light` DaisyUI themes since M9. `data-theme` on `<html>` is SSR-set from the `theme` cookie (default `dark`). Toggle button in the navbar posts to `POST /app/theme` action; palette defined in `src/routes/layout.css`.
- **Internationalization:** UI copy is zh-CN (matching the React project). Keep error messages short and native-feeling; avoid mixing English unless it's a proper noun.
## Attention points (gotchas surfaced during M1)
- **Hyphenated Zod keys break superforms types.** `'cf-turnstile-response'` required `as unknown as ZodObjectType` cast. Prefer camelCase keys (`turnstileToken`) and rename at the FormData layer if necessary; rename the existing cast-case in a future pass.
- **Playwright webServer must be `pnpm dev`, not `pnpm build && preview`.** `dev === true` activates the Turnstile hidden-input bypass in `/authorize`. Production mode loads Cloudflare's script and breaks e2e.
- **`createClient` is re-exported from `$lib/api/client`, NOT `$lib/api/client.gen`.** The `.gen.ts` file only exports the singleton.
- **`getUserInfo`, `postAuthMagic`, etc. are standalone functions** — hey-api does not attach them to the client instance. Call as `getUserInfo({ client: api })`.
- **Node `fetch` rejects relative URLs.** `event.fetch` wraps that for same-origin relatives, but hey-api internals pass URLs to the underlying fetch in a way that loses origin-resolution. `baseUrl` must be absolute: `${event.url.origin}/app/api/v1`.
- **Parallel SDK calls in one `load` depend on single-flight refresh.** If you fan out `Promise.all([api.a(), api.b()])` and the access token is stale, both 401 at once; single-flight collapses them into one `/auth/refresh` call. Without it, the second call would race against a rotated refresh token. The backend's grace-use window is an integration assumption (below); single-flight is the defense-in-depth.
- **Svelte 5 diagnostic lag.** IDE often reports stale "Cannot find module './$types'" or "Binding element implicitly has any type" after `svelte-kit sync` runs. `pnpm check` is authoritative — if it passes, ignore the editor squiggles.
- **Short access token lifetime (~15s)** means most requests trigger a refresh. Don't build UI that expects <5ms server roundtrips; backend is on internal network but refresh is still an extra hop.
- **Turnstile dev bypass** uses the literal string `turnstile_token` as a hidden input when `import { dev } from '$app/environment'` is `true`. Backend must accept this in dev mode. Do not regress this for production.
## Backend integration assumptions
- Backend at `http://10.0.0.10:8000`, reachable only via internal network / VPN. Vite dev proxy mounts it at `/app/api/*`; Caddy does the same in prod.
- Access token is a JWT issued by `POST /auth/token` with `exp` claim (~15s).
- Refresh-token rotation **tolerates one grace use** of the previous refresh token to cover multi-tab / parallel-request races (single-flight within a process handles the common case).
- Response envelope: `{ status: UtilsRespStatus, data: T }` — hey-api unwraps `.data` automatically.
- Error envelope: `{ status: number, msg: string, data?: unknown }`. `normalizeSdkError` extracts `msg`.
## Milestone workflow
For each new milestone:
1. **Brainstorm** via `superpowers:brainstorming` skill. Produce a design spec at `docs/superpowers/specs/YYYY-MM-DD-<topic>-design.md`. Use the Foundation spec as the template for structure, not content — re-derive the feature details for the new milestone.
2. **Get user approval on the spec** before writing the plan.
3. **Plan** via `superpowers:writing-plans` skill. Produce an implementation plan at `docs/superpowers/plans/YYYY-MM-DD-<topic>.md`. Include: task list with bite-sized steps, TDD where applicable, exact code for each step, verification commands, commit messages. Context7 for any new library docs.
4. **Execute** via `superpowers:subagent-driven-development` skill (recommended) or `superpowers:executing-plans`. One implementer subagent per task; spec reviewer + code-quality reviewer between tasks.
5. **Update this overview** after each milestone ships: flip the status row, link the spec and plan, and add any new attention points that emerged.
6. **Branch strategy:** feature milestones on a branch named after the milestone (e.g., `profile`, `events`, `admin-events`). Merge to `main` after the milestone verifies.
Canonical references when in doubt:
- `../CLAUDE.md` — repo-level conventions (loaded into every Claude session).
- `~/.claude/CLAUDE.md` — user's milestone discipline.
- `specs/2026-04-14-foundation-design.md` + `plans/2026-04-14-foundation.md` — template shape for new milestones.

2004
docs/superpowers/plans/2026-04-14-events.md Normal file
View File

File diff suppressed because it is too large Load Diff

1586
docs/superpowers/plans/2026-04-14-foundation.md Normal file
View File

File diff suppressed because it is too large Load Diff

1289
docs/superpowers/plans/2026-04-14-profile.md Normal file
View File

File diff suppressed because it is too large Load Diff

1174
docs/superpowers/plans/2026-04-14-test-infrastructure.md Normal file
View File

File diff suppressed because it is too large Load Diff

2072
docs/superpowers/plans/2026-04-15-admin-events.md Normal file
View File

File diff suppressed because it is too large Load Diff

1168
docs/superpowers/plans/2026-04-15-admin-users-stats.md Normal file
View File

File diff suppressed because it is too large Load Diff

881
docs/superpowers/plans/2026-04-16-agenda-admin-redesign.md Normal file
View File

@@ -0,0 +1,881 @@
# Admin Agenda Page Redesign Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Fix the missing approve action and Go zero-time display bugs in the admin agenda page by introducing three status-based sub-tabs, a combined approve+schedule dialog, event-range time validation, and removing DnD.
**Architecture:** Three files change. A new `agendaApproveSchema` and `validateAgendaTimeRange` helper go into `src/lib/schemas/agenda.ts`. The server adds a `?/approve` action (review→approved then schedule, with server-side event-range check), renames `?/delete` to `?/reject`, and adds the same range check to `?/schedule`. The Svelte page drops DnD entirely and renders three `$derived` filtered lists behind client-side tab state.
**Tech Stack:** SvelteKit 5 runes, sveltekit-superforms, Bits UI Dialog, DaisyUI 5, Zod, hey-api SDK (`patchAgendaReview`, `patchAgendaSchedule`, `getEventInfo`), option-t Result types, Vitest
---
### Task 1: Schema — agendaApproveSchema + validateAgendaTimeRange
**Files:**
- Modify: `src/lib/schemas/agenda.ts`
- Create: `src/lib/schemas/agenda.test.ts`
- [ ] **Step 1: Write failing tests**
Create `src/lib/schemas/agenda.test.ts`:
```ts
import { describe, it, expect } from 'vitest';
import { agendaApproveSchema, validateAgendaTimeRange } from './agenda';
describe('agendaApproveSchema', () => {
it('accepts valid start and end times', () => {
const result = agendaApproveSchema.safeParse({
start_time: '2026-04-20T09:00',
end_time: '2026-04-20T10:00'
});
expect(result.success).toBe(true);
});
it('rejects missing start_time', () => {
const result = agendaApproveSchema.safeParse({ start_time: '', end_time: '2026-04-20T10:00' });
expect(result.success).toBe(false);
});
it('rejects missing end_time', () => {
const result = agendaApproveSchema.safeParse({ start_time: '2026-04-20T09:00', end_time: '' });
expect(result.success).toBe(false);
});
});
describe('validateAgendaTimeRange', () => {
const evStart = '2026-04-20T01:00:00Z'; // 09:00 UTC+8
const evEnd = '2026-04-20T10:00:00Z'; // 18:00 UTC+8
it('returns null for a valid slot within event bounds', () => {
expect(
validateAgendaTimeRange('2026-04-20T09:00', '2026-04-20T10:00', evStart, evEnd)
).toBeNull();
});
it('returns error when start is before event start', () => {
expect(validateAgendaTimeRange('2026-04-20T08:00', '2026-04-20T10:00', evStart, evEnd)).toBe(
'开始时间不能早于活动开始时间'
);
});
it('returns error when end is after event end', () => {
expect(validateAgendaTimeRange('2026-04-20T09:00', '2026-04-20T19:00', evStart, evEnd)).toBe(
'结束时间不能晚于活动结束时间'
);
});
it('returns error when end is not after start', () => {
expect(validateAgendaTimeRange('2026-04-20T10:00', '2026-04-20T09:00', evStart, evEnd)).toBe(
'结束时间必须晚于开始时间'
);
});
});
```
- [ ] **Step 2: Run to confirm failure**
```bash
pnpm test:unit src/lib/schemas/agenda.test.ts
```
Expected: FAIL — `agendaApproveSchema` and `validateAgendaTimeRange` not found.
- [ ] **Step 3: Add the new exports to `src/lib/schemas/agenda.ts`**
Append to the end of the existing file (keep all existing exports unchanged):
```ts
// Approve form: set start/end time as part of the approval action
export const agendaApproveSchema = z.object({
start_time: z.string().min(1, '请填写开始时间'),
end_time: z.string().min(1, '请填写结束时间')
});
export type AgendaApproveFormData = z.infer<typeof agendaApproveSchema>;
/**
* Validates that an agenda slot falls within the event's time bounds and that
* end is after start. Returns an error message string on failure, null on success.
*
* `startTime` / `endTime` are datetime-local strings ("YYYY-MM-DDTHH:mm").
* `evStart` / `evEnd` are ISO 8601 strings from the API.
* Both sides are compared as UTC milliseconds — timezone-safe.
*/
export function validateAgendaTimeRange(
startTime: string,
endTime: string,
evStart: string,
evEnd: string
): string | null {
const start = new Date(startTime);
const end = new Date(endTime);
const evStartDate = new Date(evStart);
const evEndDate = new Date(evEnd);
if (start < evStartDate) return '开始时间不能早于活动开始时间';
if (end > evEndDate) return '结束时间不能晚于活动结束时间';
if (start >= end) return '结束时间必须晚于开始时间';
return null;
}
```
- [ ] **Step 4: Run tests to confirm pass**
```bash
pnpm test:unit src/lib/schemas/agenda.test.ts
```
Expected: all 7 tests PASS.
- [ ] **Step 5: Commit**
```bash
git add src/lib/schemas/agenda.ts src/lib/schemas/agenda.test.ts
git commit -m "feat: add agendaApproveSchema and validateAgendaTimeRange helper"
```
---
### Task 2: Server — update +page.server.ts
**Files:**
- Modify: `src/routes/(app)/(admin)/admin/events/[eventId]/agenda/+page.server.ts`
- [ ] **Step 1: Replace the file with the following**
```ts
import { fail } from '@sveltejs/kit';
import { superValidate, setError } from 'sveltekit-superforms';
import { zod, type ZodObjectType } from 'sveltekit-superforms/adapters';
import {
getAgendaList,
getEventInfo,
patchAgendaUpdate,
patchAgendaSchedule,
patchAgendaReview
} from '$lib/api';
import { createApiClient } from '$lib/server/api';
import { loadSdk, callSdk } from '$lib/server/errors';
import {
agendaItemSchema,
agendaScheduleSchema,
agendaApproveSchema,
validateAgendaTimeRange
} from '$lib/schemas/agenda';
import type {
AgendaItemFormData,
AgendaScheduleFormData,
AgendaApproveFormData
} from '$lib/schemas/agenda';
import { isErr, unwrapErr, unwrapOk } from 'option-t/plain_result';
import type { PageServerLoad, Actions } from './$types';
// sveltekit-superforms ZodObjectType constraint doesn't accept typed ZodObject directly
// in strict mode — cast required, same pattern as other pages in this project.
const itemSchema = agendaItemSchema as unknown as ZodObjectType;
const schedSchema = agendaScheduleSchema as unknown as ZodObjectType;
const apprvSchema = agendaApproveSchema as unknown as ZodObjectType;
export const load: PageServerLoad = async (event) => {
const api = createApiClient(event);
const listResp = await loadSdk(() =>
getAgendaList({ client: api, query: { event_id: event.params.eventId } })
);
const updateForm = await superValidate(zod(itemSchema));
const scheduleForm = await superValidate(zod(schedSchema));
const approveForm = await superValidate(zod(apprvSchema));
// Descriptions are base64-encoded by the backend; decode for display.
const items = (listResp.data ?? []).map((item) => ({
...item,
description: item.description ? Buffer.from(item.description, 'base64').toString('utf-8') : ''
}));
return { items, updateForm, scheduleForm, approveForm };
};
export const actions: Actions = {
update: async (event) => {
const raw = await event.request.formData();
// Extract agenda_id before passing to superValidate (superValidate reads the stream)
const agenda_id = raw.get('agenda_id') as string;
const form = await superValidate(raw, zod(itemSchema));
if (!form.valid) return fail(400, { form });
// form.data is Record<string,unknown> due to ZodObjectType cast — re-assert the real shape.
const fd = form.data as unknown as AgendaItemFormData;
const api = createApiClient(event);
const result = await callSdk(() =>
patchAgendaUpdate({
client: api,
body: {
agenda_id,
name: fd.name,
// Backend stores description as base64; encode before sending.
description: fd.description ? Buffer.from(fd.description).toString('base64') : undefined
}
})
);
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
return { form };
},
// Rejection is the terminal admin action for unwanted submissions.
// Used for both pending (拒绝) and approved (移除) items — same API call either way.
reject: async (event) => {
const raw = await event.request.formData();
const agenda_id = raw.get('agenda_id') as string;
const api = createApiClient(event);
const result = await callSdk(() =>
patchAgendaReview({
client: api,
body: {
agenda_id,
event_id: event.params.eventId,
status: 'rejected'
}
})
);
if (isErr(result)) return fail(400, { message: unwrapErr(result).message });
},
// Approve a pending agenda item and immediately schedule its time slot.
// Two sequential SDK calls: review → approved, then schedule start/end.
// Server re-validates that the slot falls within the event's time bounds.
approve: async (event) => {
const raw = await event.request.formData();
const agenda_id = raw.get('agenda_id') as string;
const form = await superValidate(raw, zod(apprvSchema));
if (!form.valid) return fail(400, { form });
// form.data is Record<string,unknown> due to ZodObjectType cast — re-assert the real shape.
const fd = form.data as unknown as AgendaApproveFormData;
const api = createApiClient(event);
// Server-side event-range check — defends against clock skew and direct POSTs.
const evResult = await callSdk(() =>
getEventInfo({ client: api, query: { event_id: event.params.eventId } })
);
if (isErr(evResult)) return setError(form, '', '无法获取活动信息');
const ev = unwrapOk(evResult).data!;
const rangeErr = validateAgendaTimeRange(
fd.start_time,
fd.end_time,
ev.start_time,
ev.end_time
);
if (rangeErr) return setError(form, '', rangeErr);
// Step 1: set status to approved
const reviewResult = await callSdk(() =>
patchAgendaReview({
client: api,
body: { agenda_id, event_id: event.params.eventId, status: 'approved' }
})
);
if (isErr(reviewResult)) return setError(form, '', unwrapErr(reviewResult).message);
// Step 2: assign the time slot
const schedResult = await callSdk(() =>
patchAgendaSchedule({
client: api,
body: {
agenda_id,
start_time: new Date(fd.start_time).toISOString(),
end_time: new Date(fd.end_time).toISOString()
}
})
);
if (isErr(schedResult)) return setError(form, '', unwrapErr(schedResult).message);
return { form };
},
// Reschedule an already-approved agenda item.
// Server re-validates event-range bounds before calling the API.
schedule: async (event) => {
const raw = await event.request.formData();
const agenda_id = raw.get('agenda_id') as string;
const form = await superValidate(raw, zod(schedSchema));
if (!form.valid) return fail(400, { form });
// form.data is Record<string,unknown> due to ZodObjectType cast — re-assert the real shape.
const fd = form.data as unknown as AgendaScheduleFormData;
const api = createApiClient(event);
// Server-side event-range check
const evResult = await callSdk(() =>
getEventInfo({ client: api, query: { event_id: event.params.eventId } })
);
if (isErr(evResult)) return setError(form, '', '无法获取活动信息');
const ev = unwrapOk(evResult).data!;
const rangeErr = validateAgendaTimeRange(
fd.start_time,
fd.end_time,
ev.start_time,
ev.end_time
);
if (rangeErr) return setError(form, '', rangeErr);
// datetime-local values are 'YYYY-MM-DDTHH:mm'; backend requires RFC3339.
const result = await callSdk(() =>
patchAgendaSchedule({
client: api,
body: {
agenda_id,
start_time: new Date(fd.start_time).toISOString(),
end_time: new Date(fd.end_time).toISOString()
}
})
);
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
}
};
```
- [ ] **Step 2: Run type check**
```bash
pnpm check
```
Expected: no errors. If `unwrapOk` is flagged as unused import, verify the approve and schedule actions use it — it's needed after the `isErr` guard.
- [ ] **Step 3: Commit**
```bash
git add src/routes/\(app\)/\(admin\)/admin/events/\[eventId\]/agenda/+page.server.ts
git commit -m "feat: add ?/approve action and event-range validation to agenda server"
```
---
### Task 3: Client — rewrite +page.svelte
**Files:**
- Modify: `src/routes/(app)/(admin)/admin/events/[eventId]/agenda/+page.svelte`
- [ ] **Step 1: Replace the file with the following**
```svelte
<script lang="ts">
import { invalidateAll } from '$app/navigation';
import { base } from '$app/paths';
import { superForm } from 'sveltekit-superforms';
import { Dialog } from 'bits-ui';
import { Pencil, X, Clock, Check } from '@lucide/svelte';
import type { PageData } from './$types';
import type { ServiceAgendaAgendaListItem } from '$lib/api';
import { validateAgendaTimeRange } from '$lib/schemas/agenda';
let { data }: { data: PageData } = $props();
let activeTab = $state<'pending' | 'approved' | 'rejected'>('pending');
// Derived per-status lists — no DnD, server returns items time-ordered.
const pendingItems = $derived(data.items.filter((i) => i.status === 'pending'));
const approvedItems = $derived(data.items.filter((i) => i.status === 'approved'));
const rejectedItems = $derived(data.items.filter((i) => i.status === 'rejected'));
let editOpen = $state(false);
let scheduleOpen = $state(false);
let approveOpen = $state(false);
let editingItem = $state<ServiceAgendaAgendaListItem | null>(null);
const {
form: approveForm,
errors: approveErrors,
enhance: approveEnhance,
submitting: approveSubmitting
} = superForm(data.approveForm, {
dataType: 'form',
onResult: ({ result }) => {
if (result.type === 'success') {
approveOpen = false;
invalidateAll();
}
}
});
const {
form: updateForm,
errors: updateErrors,
enhance: updateEnhance,
submitting: updateSubmitting
} = superForm(data.updateForm, {
dataType: 'form',
onResult: ({ result }) => {
if (result.type === 'success') {
editOpen = false;
invalidateAll();
}
}
});
const {
form: scheduleForm,
errors: scheduleErrors,
enhance: scheduleEnhance,
submitting: scheduleSubmitting
} = superForm(data.scheduleForm, {
dataType: 'form',
onResult: ({ result }) => {
if (result.type === 'success') {
scheduleOpen = false;
invalidateAll();
}
}
});
function openEdit(item: ServiceAgendaAgendaListItem) {
editingItem = item;
$updateForm.name = item.name ?? '';
$updateForm.description = item.description ?? '';
editOpen = true;
}
function openSchedule(item: ServiceAgendaAgendaListItem) {
editingItem = item;
// Pre-fill existing times if present; datetime-local expects "YYYY-MM-DDTHH:mm"
$scheduleForm.start_time = item.start_time ? item.start_time.slice(0, 16) : '';
$scheduleForm.end_time = item.end_time ? item.end_time.slice(0, 16) : '';
scheduleOpen = true;
}
function openApprove(item: ServiceAgendaAgendaListItem) {
editingItem = item;
$approveForm.start_time = '';
$approveForm.end_time = '';
approveOpen = true;
}
// Client-side event-range validation for the approve dialog.
// Server re-checks on submit; this gives immediate feedback while typing.
const approveRangeError = $derived(
$approveForm.start_time && $approveForm.end_time
? validateAgendaTimeRange(
$approveForm.start_time,
$approveForm.end_time,
data.ev.start_time,
data.ev.end_time
)
: null
);
// Client-side event-range validation for the reschedule dialog.
const scheduleRangeError = $derived(
$scheduleForm.start_time && $scheduleForm.end_time
? validateAgendaTimeRange(
$scheduleForm.start_time,
$scheduleForm.end_time,
data.ev.start_time,
data.ev.end_time
)
: null
);
</script>
<!-- Sub-tab bar: 待审核 / 已安排 / 已拒绝 -->
<div role="tablist" class="tabs-border mb-4 tabs">
<button
role="tab"
class="tab font-mono text-[0.78rem] tracking-wide
{activeTab === 'pending' ? 'tab-active' : 'text-base-content/35 hover:text-base-content/70'}"
onclick={() => (activeTab = 'pending')}
>
待审核 ({pendingItems.length})
</button>
<button
role="tab"
class="tab font-mono text-[0.78rem] tracking-wide
{activeTab === 'approved' ? 'tab-active' : 'text-base-content/35 hover:text-base-content/70'}"
onclick={() => (activeTab = 'approved')}
>
已安排 ({approvedItems.length})
</button>
<button
role="tab"
class="tab font-mono text-[0.78rem] tracking-wide
{activeTab === 'rejected' ? 'tab-active' : 'text-base-content/35 hover:text-base-content/70'}"
onclick={() => (activeTab = 'rejected')}
>
已拒绝 ({rejectedItems.length})
</button>
</div>
<!-- ── PENDING TAB ─────────────────────────────────── -->
{#if activeTab === 'pending'}
{#if pendingItems.length === 0}
<div class="card bg-base-100 card-border">
<div class="card-body items-center text-center">
<p class="text-base-content/50">暂无待审核议程。</p>
</div>
</div>
{:else}
<ul class="flex flex-col gap-2">
{#each pendingItems as item (item.agenda_id)}
<li class="card bg-base-100 card-border">
<div class="card-body flex-row items-center gap-3 py-3">
<div class="min-w-0 flex-1">
<p class="font-medium">{item.name}</p>
{#if item.user_profile}
<p class="text-xs text-base-content/50">
提交者：<a
href="{base}/profile/{item.user_profile.user_id}"
class="font-medium hover:text-primary"
>{item.user_profile.nickname ?? item.user_profile.username}</a
>
</p>
{/if}
</div>
<span class="badge badge-ghost badge-sm">待审核</span>
<button
type="button"
class="btn text-success btn-ghost btn-xs"
onclick={() => openApprove(item)}
aria-label="审核通过"
>
<Check class="size-3.5" />通过
</button>
<button
type="button"
class="btn btn-ghost btn-xs"
onclick={() => openEdit(item)}
aria-label="编辑"
>
<Pencil class="size-3.5" />
</button>
<form method="POST" action="?/reject">
<input type="hidden" name="agenda_id" value={item.agenda_id} />
<button
type="submit"
class="btn text-error btn-ghost btn-xs"
aria-label="拒绝"
onclick={(e) => {
if (!confirm('确认拒绝此议程？')) e.preventDefault();
}}
>
<X class="size-3.5" />
</button>
</form>
</div>
</li>
{/each}
</ul>
{/if}
{/if}
<!-- ── APPROVED TAB ────────────────────────────────── -->
{#if activeTab === 'approved'}
{#if approvedItems.length === 0}
<div class="card bg-base-100 card-border">
<div class="card-body items-center text-center">
<p class="text-base-content/50">暂无已安排议程。</p>
</div>
</div>
{:else}
<ul class="flex flex-col gap-2">
{#each approvedItems as item (item.agenda_id)}
<li class="card bg-base-100 card-border">
<div class="card-body flex-row items-center gap-3 py-3">
<div class="min-w-0 flex-1">
<p class="font-medium">{item.name}</p>
{#if item.user_profile}
<p class="text-xs text-base-content/50">
提交者：<a
href="{base}/profile/{item.user_profile.user_id}"
class="font-medium hover:text-primary"
>{item.user_profile.nickname ?? item.user_profile.username}</a
>
</p>
{/if}
{#if item.status === 'approved' && item.start_time}
<p class="font-mono text-xs text-base-content/40">
{item.start_time.slice(0, 16).replace('T', ' ')} —
{item.end_time ? item.end_time.slice(0, 16).replace('T', ' ') : '?'}
</p>
{/if}
</div>
<span class="badge badge-soft badge-sm badge-success">已通过</span>
<button
type="button"
class="btn btn-ghost btn-xs"
onclick={() => openSchedule(item)}
aria-label="调整时间"
>
<Clock class="size-3.5" />
</button>
<button
type="button"
class="btn btn-ghost btn-xs"
onclick={() => openEdit(item)}
aria-label="编辑"
>
<Pencil class="size-3.5" />
</button>
<form method="POST" action="?/reject">
<input type="hidden" name="agenda_id" value={item.agenda_id} />
<button
type="submit"
class="btn text-error btn-ghost btn-xs"
aria-label="移除"
onclick={(e) => {
if (!confirm('确认移除此议程？（状态将置为已拒绝）')) e.preventDefault();
}}
>
<X class="size-3.5" />
</button>
</form>
</div>
</li>
{/each}
</ul>
{/if}
{/if}
<!-- ── REJECTED TAB ────────────────────────────────── -->
{#if activeTab === 'rejected'}
{#if rejectedItems.length === 0}
<div class="card bg-base-100 card-border">
<div class="card-body items-center text-center">
<p class="text-base-content/50">暂无已拒绝议程。</p>
</div>
</div>
{:else}
<ul class="flex flex-col gap-2">
{#each rejectedItems as item (item.agenda_id)}
<li class="card bg-base-100 card-border">
<div class="card-body flex-row items-center gap-3 py-3">
<div class="min-w-0 flex-1">
<p class="font-medium">{item.name}</p>
{#if item.user_profile}
<p class="text-xs text-base-content/50">
提交者：<a
href="{base}/profile/{item.user_profile.user_id}"
class="font-medium hover:text-primary"
>{item.user_profile.nickname ?? item.user_profile.username}</a
>
</p>
{/if}
</div>
<span class="badge badge-soft badge-sm badge-error">已拒绝</span>
</div>
</li>
{/each}
</ul>
{/if}
{/if}
<!-- ── APPROVE DIALOG ─────────────────────────────── -->
<Dialog.Root bind:open={approveOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/50" />
<Dialog.Content class="modal-open modal">
<div class="modal-box">
<Dialog.Title class="text-lg font-bold">审核通过</Dialog.Title>
{#if editingItem}
<p class="mt-1 text-sm text-base-content/50">{editingItem.name}</p>
{/if}
<form method="POST" action="?/approve" use:approveEnhance class="mt-4 flex flex-col gap-3">
{#if $approveErrors._errors?.[0]}
<div class="alert alert-soft text-sm alert-error">{$approveErrors._errors[0]}</div>
{/if}
{#if approveRangeError}
<div class="alert alert-soft text-sm alert-warning">{approveRangeError}</div>
{/if}
<input type="hidden" name="agenda_id" value={editingItem?.agenda_id} />
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">开始时间 *</span>
<input
type="datetime-local"
name="start_time"
class="input-bordered input {$approveErrors.start_time ? 'input-error' : ''}"
bind:value={$approveForm.start_time}
/>
{#if $approveErrors.start_time}
<span class="text-xs text-error">{$approveErrors.start_time}</span>
{/if}
</label>
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">结束时间 *</span>
<input
type="datetime-local"
name="end_time"
class="input-bordered input {$approveErrors.end_time ? 'input-error' : ''}"
bind:value={$approveForm.end_time}
/>
{#if $approveErrors.end_time}
<span class="text-xs text-error">{$approveErrors.end_time}</span>
{/if}
</label>
<div class="modal-action mt-2">
<Dialog.Close class="btn btn-ghost">取消</Dialog.Close>
<button type="submit" class="btn btn-primary" disabled={$approveSubmitting}>
{#if $approveSubmitting}<span class="loading loading-sm loading-spinner"></span>{/if}
确认通过
</button>
</div>
</form>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<!-- ── EDIT DIALOG ────────────────────────────────── -->
<Dialog.Root bind:open={editOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/50" />
<Dialog.Content class="modal-open modal">
<div class="modal-box">
<Dialog.Title class="text-lg font-bold">编辑议程</Dialog.Title>
<form method="POST" action="?/update" use:updateEnhance class="mt-4 flex flex-col gap-3">
{#if $updateErrors._errors?.[0]}
<div class="alert alert-soft text-sm alert-error">{$updateErrors._errors[0]}</div>
{/if}
<input type="hidden" name="agenda_id" value={editingItem?.agenda_id} />
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">议程标题 *</span>
<input
name="name"
class="input-bordered input {$updateErrors.name ? 'input-error' : ''}"
placeholder="议程标题"
bind:value={$updateForm.name}
/>
{#if $updateErrors.name}
<span class="text-xs text-error">{$updateErrors.name}</span>
{/if}
</label>
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">描述（可选）</span>
<textarea
name="description"
class="textarea-bordered textarea"
placeholder="简短描述"
rows="3"
bind:value={$updateForm.description}
></textarea>
</label>
<div class="modal-action mt-2">
<Dialog.Close class="btn btn-ghost">取消</Dialog.Close>
<button type="submit" class="btn btn-primary" disabled={$updateSubmitting}>
{#if $updateSubmitting}<span class="loading loading-sm loading-spinner"></span>{/if}
保存
</button>
</div>
</form>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<!-- ── RESCHEDULE DIALOG ──────────────────────────── -->
<Dialog.Root bind:open={scheduleOpen}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/50" />
<Dialog.Content class="modal-open modal">
<div class="modal-box">
<Dialog.Title class="text-lg font-bold">调整时间段</Dialog.Title>
{#if editingItem}
<p class="mt-1 text-sm text-base-content/50">{editingItem.name}</p>
{/if}
<form
method="POST"
action="?/schedule"
use:scheduleEnhance
class="mt-4 flex flex-col gap-3"
>
{#if $scheduleErrors._errors?.[0]}
<div class="alert alert-soft text-sm alert-error">{$scheduleErrors._errors[0]}</div>
{/if}
{#if scheduleRangeError}
<div class="alert alert-soft text-sm alert-warning">{scheduleRangeError}</div>
{/if}
<input type="hidden" name="agenda_id" value={editingItem?.agenda_id} />
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">开始时间 *</span>
<input
type="datetime-local"
name="start_time"
class="input-bordered input {$scheduleErrors.start_time ? 'input-error' : ''}"
bind:value={$scheduleForm.start_time}
/>
{#if $scheduleErrors.start_time}
<span class="text-xs text-error">{$scheduleErrors.start_time}</span>
{/if}
</label>
<label class="flex flex-col gap-1">
<span class="text-sm font-medium">结束时间 *</span>
<input
type="datetime-local"
name="end_time"
class="input-bordered input {$scheduleErrors.end_time ? 'input-error' : ''}"
bind:value={$scheduleForm.end_time}
/>
{#if $scheduleErrors.end_time}
<span class="text-xs text-error">{$scheduleErrors.end_time}</span>
{/if}
</label>
<div class="modal-action mt-2">
<Dialog.Close class="btn btn-ghost">取消</Dialog.Close>
<button type="submit" class="btn btn-primary" disabled={$scheduleSubmitting}>
{#if $scheduleSubmitting}<span class="loading loading-sm loading-spinner"></span>{/if}
保存
</button>
</div>
</form>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
```
- [ ] **Step 2: Run type check**
```bash
pnpm check
```
Expected: no errors. Common issue to watch for: `data.ev` type — it comes from the parent layout's `PageData` which includes `ServiceEventEventInfoResponse`. If `pnpm check` reports `data.ev` as unknown, run `pnpm run svelte-kit sync` first to regenerate types.
- [ ] **Step 3: Run lint fix and verify clean**
```bash
pnpm lint:fix
pnpm lint
```
Expected: no lint errors after fix.
- [ ] **Step 4: Commit**
```bash
git add src/routes/\(app\)/\(admin\)/admin/events/\[eventId\]/agenda/+page.svelte
git commit -m "feat: redesign admin agenda page with three-tab layout and approve workflow"
```
---
## Self-Review
**Spec coverage check:**
| Spec requirement | Task |
| -------------------------------------------------------- | ------------------------------- |
| Three tabs (待审核/已安排/已拒绝) with counts | Task 3 |
| Pending tab: Approve + Edit + Reject per item | Task 3 |
| Approve dialog: required start + end time | Task 2 + 3 |
| Approve calls patchAgendaReview then patchAgendaSchedule | Task 2 |
| Reject renames ?/delete → ?/reject | Task 2 |
| Approved tab: Clock + Edit + Remove per item | Task 3 |
| Time shown only for approved items with start_time set | Task 3 |
| Rejected tab: read-only | Task 3 |
| Submitter nickname link to /profile/userId in all tabs | Task 3 |
| agendaApproveSchema (required start + end) | Task 1 |
| validateAgendaTimeRange helper | Task 1 |
| Server-side event-range check in ?/approve | Task 2 |
| Server-side event-range check in ?/schedule | Task 2 |
| Client-side event-range feedback in approve dialog | Task 3 |
| Client-side event-range feedback in reschedule dialog | Task 3 |
| DnD removed entirely | Task 3 |
| No overlap validation | confirmed absent from all tasks |
All requirements covered. No placeholders. Types consistent across tasks (`AgendaApproveFormData` defined in Task 1, used in Task 2; `validateAgendaTimeRange` defined in Task 1, used in Tasks 2 and 3).

1096
docs/superpowers/plans/2026-04-16-checkin-qr.md Normal file
View File

File diff suppressed because it is too large Load Diff

761
docs/superpowers/plans/2026-04-16-consistency-polish.md Normal file
View File

@@ -0,0 +1,761 @@
# Consistency Polish Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Unify card surfaces, badge styles, button patterns, typography, and tab navigation across all 13 affected files so the app presents a single coherent DaisyUI-based design system.
**Architecture:** Pure class-swap pass — no logic changes, no new components, no schema changes. Every edit is a Tailwind/DaisyUI class substitution on existing markup. No unit tests are needed (there is no new logic); verification is `pnpm check` + `pnpm lint` + visual smoke test.
**Tech Stack:** SvelteKit 5 (runes), DaisyUI 5, Tailwind CSS 4, Bits UI (dialog triggers)
**Spec:** `docs/superpowers/specs/2026-04-16-consistency-polish-design.md`
---
## File Map
| File | Change category |
| -------------------------------------------------------- | ------------------------------- |
| `src/routes/(app)/+page.svelte` | Typography |
| `src/lib/components/WorkbenchWelcome.svelte` | Card bg, CTA buttons |
| `src/lib/components/WorkbenchCurrentEvent.svelte` | Card bg, badges, primary button |
| `src/lib/components/WorkbenchProfile.svelte` | Card bg, CTA button |
| `src/lib/components/WorkbenchUpcoming.svelte` | Card bg, inner slot bg, badge |
| `src/lib/components/EventCard.svelte` | Card bg, badges |
| `src/lib/components/ProfileCard.svelte` | Card outer wrapper |
| `src/routes/(app)/events/+page.svelte` | Tabs, count badge |
| `src/routes/(app)/events/[eventId]/+page.svelte` | Card bgs, hero badges |
| `src/lib/components/AgendaMyList.svelte` | Card bg, badges |
| `src/lib/components/AgendaSchedule.svelte` | Card bg |
| `src/routes/(app)/(admin)/admin/events/+page.svelte` | Badge |
| `src/routes/(app)/(admin-lv40)/admin/users/+page.svelte` | Badge |
---
### Task 1: Page title typography — workbench `+page.svelte`
**Files:**
- Modify: `src/routes/(app)/+page.svelte`
- [ ] **Fix the h1 and subtitle classes**
In `src/routes/(app)/+page.svelte`, find the `<h1>` inside the `lg:flex` header block and update:
```svelte
<!-- BEFORE -->
<h1 class="font-display text-[1.75rem] font-light tracking-tight italic">工作台</h1>
<span class="font-mono text-[0.58rem] tracking-[0.2em] text-base-content/25 uppercase">
Workbench · Overview
</span>
<!-- AFTER -->
<h1 class="font-sans text-[1.75rem] font-semibold tracking-tight">工作台</h1>
<span class="font-mono text-[0.6rem] tracking-[0.2em] text-base-content/25 uppercase">
Workbench · Overview
</span>
```
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add src/routes/\(app\)/+page.svelte
git commit -m "fix(ui): unify workbench page title to font-sans semibold"
```
---
### Task 2: Workbench card backgrounds + CTA buttons
**Files:**
- Modify: `src/lib/components/WorkbenchWelcome.svelte`
- Modify: `src/lib/components/WorkbenchCurrentEvent.svelte`
- Modify: `src/lib/components/WorkbenchProfile.svelte`
- Modify: `src/lib/components/WorkbenchUpcoming.svelte`
#### WorkbenchWelcome.svelte
- [ ] **Card background**
```svelte
<!-- BEFORE -->
<div class="card bg-base-100 card-border">
<!-- AFTER -->
<div class="card bg-base-300 card-border">
```
- [ ] **CTA chip → .btn.btn-ghost (browse events link)**
```svelte
<!-- BEFORE -->
<a
href={resolve('/events' as '/')}
class="flex items-center justify-center gap-2 rounded-md border border-base-300 px-4 py-3 text-sm text-base-content/60 transition-colors hover:border-primary/60 hover:text-primary"
>
<CalendarDays aria-hidden="true" class="size-4" />浏览活动
</a>
<!-- AFTER -->
<a href={resolve('/events' as '/')} class="btn btn-ghost">
<CalendarDays aria-hidden="true" class="size-4" />浏览活动
</a>
```
- [ ] **CTA chip → .btn.btn-ghost (profile link)**
```svelte
<!-- BEFORE -->
<a
href={resolve(`/profile/${user.user_id}` as '/')}
class="flex items-center justify-center gap-2 rounded-md border border-base-300 px-4 py-3 text-sm text-base-content/60 transition-colors hover:border-primary/60 hover:text-primary"
>
<User aria-hidden="true" class="size-4" />个人资料
</a>
<!-- AFTER -->
<a href={resolve(`/profile/${user.user_id}` as '/')} class="btn btn-ghost">
<User aria-hidden="true" class="size-4" />个人资料
</a>
```
#### WorkbenchCurrentEvent.svelte
- [ ] **Card background**
```svelte
<!-- BEFORE -->
<div class="card relative overflow-hidden bg-base-100 card-border">
<!-- AFTER -->
<div class="card relative overflow-hidden bg-base-300 card-border">
```
- [ ] **"进行中" badge**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center gap-1.5 rounded border border-primary/20 bg-primary/10 px-2 py-1 font-mono text-[0.6rem] text-primary"
>
<span class="size-[5px] animate-pulse rounded-full bg-current"></span>进行中
</span>
<!-- AFTER -->
<span class="badge badge-soft badge-primary">
<span class="size-[5px] animate-pulse rounded-full bg-current"></span>进行中
</span>
```
- [ ] **"待开始" badge**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center rounded border border-amber-400/20 bg-amber-400/10 px-2 py-1 font-mono text-[0.6rem] text-amber-400"
>
待开始
</span>
<!-- AFTER -->
<span class="badge badge-soft badge-warning">待开始</span>
```
- [ ] **"已签到" badge**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center rounded border border-primary/20 bg-primary/10 px-2 py-1 font-mono text-[0.6rem] text-primary"
>
已签到
</span>
<!-- AFTER -->
<span class="badge badge-soft badge-success">已签到</span>
```
- [ ] **"立即签到" Dialog.Trigger**
```svelte
<!-- BEFORE -->
<Dialog.Trigger
class="flex w-full items-center justify-center gap-2 rounded-md border border-primary/25 bg-primary/10 px-4 py-3 text-sm text-primary transition-colors hover:bg-primary/20"
>
<QrCode aria-hidden="true" class="size-4" />立即签到
</Dialog.Trigger>
<!-- AFTER -->
<Dialog.Trigger class="btn w-full btn-primary">
<QrCode aria-hidden="true" class="size-4" />立即签到
</Dialog.Trigger>
```
#### WorkbenchProfile.svelte
- [ ] **Card background**
```svelte
<!-- BEFORE -->
<div class="card h-full bg-base-100 card-border">
<!-- AFTER -->
<div class="card h-full bg-base-300 card-border">
```
- [ ] **Bottom CTA link chip → .btn.btn-ghost**
```svelte
<!-- BEFORE -->
<a
href={resolve(`/profile/${userId}` as '/')}
class="mt-auto flex items-center justify-center gap-2 rounded-md border border-base-300 px-4 py-3 text-sm text-base-content/60 transition-colors hover:border-primary/60 hover:text-primary"
>
完善资料 →
</a>
<!-- AFTER -->
<a href={resolve(`/profile/${userId}` as '/')} class="btn btn-ghost mt-auto w-full">
完善资料 →
</a>
```
#### WorkbenchUpcoming.svelte
- [ ] **Outer card background**
```svelte
<!-- BEFORE -->
<div class="card bg-base-100 card-border">
<!-- AFTER -->
<div class="card bg-base-300 card-border">
```
- [ ] **Inner slot card background** (the filled slot `<a>` element)
```svelte
<!-- BEFORE -->
class="group flex flex-col gap-2 rounded-lg border border-base-300 bg-base-200/50 p-4 transition-colors
hover:border-base-content/20"
<!-- AFTER -->
class="group flex flex-col gap-2 rounded-lg border border-base-300 bg-base-100/50 p-4 transition-colors
hover:border-base-content/20"
```
- [ ] **"待开始" badge inside slot**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center rounded border border-amber-400/20 bg-amber-400/10 px-2 py-0.5 font-mono text-[0.58rem] text-amber-400"
>
待开始
</span>
<!-- AFTER -->
<span class="badge badge-soft badge-sm badge-warning">待开始</span>
```
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add src/lib/components/WorkbenchWelcome.svelte \
src/lib/components/WorkbenchCurrentEvent.svelte \
src/lib/components/WorkbenchProfile.svelte \
src/lib/components/WorkbenchUpcoming.svelte
git commit -m "fix(ui): workbench cards bg-base-300, btn-ghost CTAs, badge-soft status chips"
```
---
### Task 3: EventCard
**Files:**
- Modify: `src/lib/components/EventCard.svelte`
- [ ] **Card background**
```svelte
<!-- BEFORE -->
<div class="card flex flex-col overflow-hidden bg-base-200">
<!-- AFTER -->
<div class="card flex flex-col overflow-hidden bg-base-300">
```
- [ ] **Image overlay type badge**
```svelte
<!-- BEFORE -->
<span
class="absolute top-2.5 right-2.5 rounded-[--radius-field] border px-1.5 py-0.5 font-mono text-[0.575rem] tracking-widest uppercase
{event.type === 'party'
? 'border-error/60 text-error/80'
: 'border-secondary/60 text-secondary/80'}"
>
{event.type === 'party' ? 'Party' : 'Official'}
</span>
<!-- AFTER -->
<span
class="absolute top-2.5 right-2.5 badge badge-soft uppercase
{event.type === 'party' ? 'badge-error' : 'badge-secondary'}"
>
{event.type === 'party' ? 'Party' : 'Official'}
</span>
```
- [ ] **"需要 KYC" badge**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center gap-1 rounded-[--radius-field] border border-warning/60 px-1.5 py-0.5 font-mono text-[0.575rem] tracking-widest text-warning uppercase"
>
<ShieldCheck class="size-2.5" />需要 KYC
</span>
<!-- AFTER -->
<span class="badge badge-soft badge-sm badge-warning">
<ShieldCheck class="size-2.5" />需要 KYC
</span>
```
- [ ] **"已报名" badge**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center gap-1 rounded-[--radius-field] border border-success/60 px-1.5 py-0.5 font-mono text-[0.575rem] tracking-widest text-success uppercase"
>
<Ticket class="size-2.5" />已报名
</span>
<!-- AFTER -->
<span class="badge badge-soft badge-sm badge-success">
<Ticket class="size-2.5" />已报名
</span>
```
- [ ] **"进行中" badge**
```svelte
<!-- BEFORE -->
<span
class="rounded-[--radius-field] border border-primary/60 px-1.5 py-0.5 font-mono text-[0.575rem] tracking-widest text-primary uppercase"
>
进行中
</span>
<!-- AFTER -->
<span class="badge badge-soft badge-sm badge-primary">进行中</span>
```
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add src/lib/components/EventCard.svelte
git commit -m "fix(ui): EventCard bg-base-300 and badge-soft status chips"
```
---
### Task 4: ProfileCard outer wrapper
**Files:**
- Modify: `src/lib/components/ProfileCard.svelte`
- [ ] **Replace outer container**
The outer `<div>` is the very first element in the template (after the `<script>` block):
```svelte
<!-- BEFORE -->
<div class="overflow-hidden rounded-[--radius-box] border border-base-300/40">
<!-- AFTER -->
<div class="card overflow-hidden bg-base-300 card-border">
```
The inner `<div class="p-6">` and everything inside it is **unchanged**.
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add src/lib/components/ProfileCard.svelte
git commit -m "fix(ui): ProfileCard uses .card.bg-base-300.card-border"
```
---
### Task 5: Events list page — tabs and count badge
**Files:**
- Modify: `src/routes/(app)/events/+page.svelte`
- [ ] **Replace the tab switcher with DaisyUI .tabs.tabs-border**
```svelte
<!-- BEFORE -->
<div class="mb-6 flex border-b border-base-300/70">
<button
class="tab px-4 py-2 text-sm transition-colors
{tab === 'all'
? 'border-b-2 border-primary text-base-content'
: 'text-base-content/40 hover:text-base-content/70'}"
onclick={() => (tab = 'all')}
>
全部活动
</button>
<button
class="tab flex items-center gap-1.5 px-4 py-2 text-sm transition-colors
{tab === 'joined'
? 'border-b-2 border-primary text-base-content'
: 'text-base-content/40 hover:text-base-content/70'}"
onclick={() => (tab = 'joined')}
>
已加入
{#if joinedCount > 0}
<span
class="rounded-full border border-primary/28 bg-primary/12 px-1.5 font-mono text-[0.58rem] text-primary"
>
{joinedCount}
</span>
{/if}
</button>
</div>
<!-- AFTER -->
<div class="tabs-border mb-6 tabs">
<button class="tab {tab === 'all' ? 'tab-active' : ''}" onclick={() => (tab = 'all')}>
全部活动
</button>
<button
class="tab flex items-center gap-1.5 {tab === 'joined' ? 'tab-active' : ''}"
onclick={() => (tab = 'joined')}
>
已加入
{#if joinedCount > 0}
<span class="badge badge-soft badge-sm badge-primary">{joinedCount}</span>
{/if}
</button>
</div>
```
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add "src/routes/(app)/events/+page.svelte"
git commit -m "fix(ui): events tabs → DaisyUI tabs-border, count badge → badge-soft"
```
---
### Task 6: Event detail page — cards and hero badges
**Files:**
- Modify: `src/routes/(app)/events/[eventId]/+page.svelte`
- [ ] **Hero "需要 KYC" badge**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center gap-1 rounded-[--radius-field] border border-warning/60 px-2 py-0.5 font-mono text-[0.575rem] tracking-widest text-warning uppercase"
>
<ShieldCheck class="size-2.5" />需要 KYC
</span>
<!-- AFTER -->
<span class="badge badge-soft uppercase badge-warning">
<ShieldCheck class="size-2.5" />需要 KYC
</span>
```
- [ ] **Hero "已报名" badge**
```svelte
<!-- BEFORE -->
<span
class="inline-flex items-center gap-1 rounded-[--radius-field] border border-success/60 px-2 py-0.5 font-mono text-[0.575rem] tracking-widest text-success uppercase"
>
<Ticket class="size-2.5" />已报名
</span>
<!-- AFTER -->
<span class="badge badge-soft uppercase badge-success">
<Ticket class="size-2.5" />已报名
</span>
```
- [ ] **Hero type badge**
```svelte
<!-- BEFORE -->
<span
class="rounded-[--radius-field] border px-2 py-0.5 font-mono text-[0.575rem] tracking-widest uppercase
{ev.type === 'party'
? 'border-error/60 text-error/80'
: 'border-secondary/60 text-secondary/80'}"
>
{ev.type === 'party' ? 'Party' : 'Official'}
</span>
<!-- AFTER -->
<span
class="badge badge-soft uppercase {ev.type === 'party' ? 'badge-error' : 'badge-secondary'}"
>
{ev.type === 'party' ? 'Party' : 'Official'}
</span>
```
- [ ] **Content cards: description and attendance guide** (two separate `<div class="card bg-base-200">`)
Both have the same class string — update each:
```svelte
<!-- BEFORE -->
<div class="card bg-base-200">
<!-- AFTER -->
<div class="card bg-base-300">
```
There are two instances plus the empty-state card:
- Description card (wraps `data.descriptionHtml`)
- Attendance guide card (wraps `data.attendanceGuideHtml`)
- Empty state card (`card flex-1 bg-base-200`) → `card flex-1 bg-base-300`
- [ ] **Sidebar card**
```svelte
<!-- BEFORE -->
<div class="card sticky top-5 bg-base-200">
<!-- AFTER -->
<div class="card sticky top-5 bg-base-300">
```
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add "src/routes/(app)/events/[eventId]/+page.svelte"
git commit -m "fix(ui): event detail page bg-base-300 cards and badge-soft hero chips"
```
---
### Task 7: Agenda components
**Files:**
- Modify: `src/lib/components/AgendaMyList.svelte`
- Modify: `src/lib/components/AgendaSchedule.svelte`
#### AgendaMyList.svelte
- [ ] **Card background**
```svelte
<!-- BEFORE -->
<div class="card bg-base-200">
<!-- AFTER -->
<div class="card bg-base-300">
```
- [ ] **Agenda status badges** (the `badge` on each agenda item)
```svelte
<!-- BEFORE -->
<span class="badge badge-sm {badgeClass(agenda.status)}">{badgeLabel(agenda.status)}</span>
<!-- AFTER -->
<span class="badge badge-soft badge-sm {badgeClass(agenda.status)}"
>{badgeLabel(agenda.status)}</span
>
```
#### AgendaSchedule.svelte
- [ ] **Card background**
```svelte
<!-- BEFORE -->
<div class="card bg-base-200">
<!-- AFTER -->
<div class="card bg-base-300">
```
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add src/lib/components/AgendaMyList.svelte \
src/lib/components/AgendaSchedule.svelte
git commit -m "fix(ui): agenda components bg-base-300, agenda status badge-soft"
```
---
### Task 8: Admin pages — badge-soft
**Files:**
- Modify: `src/routes/(app)/(admin)/admin/events/+page.svelte`
- Modify: `src/routes/(app)/(admin-lv40)/admin/users/+page.svelte`
#### admin/events/+page.svelte
- [ ] **Per-row type badge**
```svelte
<!-- BEFORE -->
<span
class="shrink-0 rounded-[--radius-field] border px-1.5 py-0.5
font-mono text-[0.52rem] tracking-widest uppercase
{ev.type === 'party'
? 'border-error/40 text-error/70'
: 'border-secondary/40 text-secondary/70'}">{ev.type}</span
>
<!-- AFTER -->
<span
class="badge shrink-0 badge-soft badge-sm uppercase
{ev.type === 'party' ? 'badge-error' : 'badge-secondary'}">{ev.type}</span
>
```
#### admin/users/+page.svelte
- [ ] **Permission level badges — add badge-soft**
Find the one location where permission badges are rendered (in the `<td>` for permission level, view mode):
```svelte
<!-- BEFORE -->
<span class="badge {permissionBadgeClass(user.permission_level ?? 0)} badge-sm">
<!-- AFTER -->
<span class="badge badge-soft {permissionBadgeClass(user.permission_level ?? 0)} badge-sm">
```
- [ ] **Run check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Commit**
```bash
git add "src/routes/(app)/(admin)/admin/events/+page.svelte" \
"src/routes/(app)/(admin-lv40)/admin/users/+page.svelte"
git commit -m "fix(ui): admin event and user permission badges → badge-soft"
```
---
### Task 9: Final lint + verification
- [ ] **Run lint fix**
```bash
pnpm lint:fix
```
- [ ] **Run full check**
```bash
pnpm check
```
Expected: 0 errors.
- [ ] **Visual smoke test** — start dev server and visit each route
```bash
pnpm dev
```
Check at each route:
- `/app/` — workbench title is semibold (not italic), all 4 bento cards are visibly darker than the page bg, CTA links render as ghost buttons, status chips use DaisyUI badge fill
- `/app/profile/:id` (your own profile) — ProfileCard outer container is darker than page, `allow_public` badge still renders
- `/app/events` — tabs render with DaisyUI underline style; joined count renders as a small filled badge; EventCard bg is darker than before
- `/app/events/:id` — hero badges render as badge-soft (colored fill), all 4 content/sidebar cards are visibly darker
- Expand agenda section — AgendaMyList and AgendaSchedule cards are dark; agenda status badges show soft fill
- `/app/admin/events` — row type badges render with soft fill
- `/app/admin/users` — permission level badges render with soft fill
- No dialogs broken: test join dialog, check-in QR dialog trigger
- [ ] **Commit any lint-fix changes** (if lint:fix produced diffs)
```bash
git add -p # stage only formatting changes
git commit -m "chore: apply lint:fix after consistency polish"
```

1255
docs/superpowers/plans/2026-04-16-user-agenda.md Normal file
View File

File diff suppressed because it is too large Load Diff

1983
docs/superpowers/plans/2026-04-16-workbench.md Normal file
View File

File diff suppressed because it is too large Load Diff

286
docs/superpowers/plans/2026-04-18-navigation-progress.md Normal file
View File

@@ -0,0 +1,286 @@
# Navigation Progress Bar Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Add a top-of-viewport indeterminate progress bar that appears after 200ms of navigation latency and disappears when the new page renders.
**Architecture:** A single zero-prop `NavigationProgress.svelte` component wraps `nprogress`, watching SvelteKit's `navigating` store via Svelte 5 runes. A 200ms `setTimeout` delays the bar start so fast navigations produce no visible flash. The component is mounted once in the root layout and has no server-side footprint.
**Tech Stack:** SvelteKit 2, Svelte 5 runes, `nprogress`, DaisyUI 5 CSS custom properties, Tailwind CSS v4 / `layout.css`
---
## File Map
| File | Action | Purpose |
| ---------------------------------------------- | ------ | ----------------------------------------------------------- |
| `src/lib/components/NavigationProgress.svelte` | Create | Component — nprogress lifecycle wired to `navigating` store |
| `src/routes/layout.css` | Modify | Add `#nprogress` style overrides |
| `src/routes/+layout.svelte` | Modify | Mount `<NavigationProgress />` |
| `package.json` | Modify | Add `nprogress` + `@types/nprogress` |
---
### Task 1: Install dependencies
**Files:**
- Modify: `package.json`
- [ ] **Step 1: Install packages**
```bash
cd /home/nvirellia/Projects/cms-client
pnpm add nprogress
pnpm add -D @types/nprogress
```
Expected output: `packages/lock updated`, no errors.
- [ ] **Step 2: Verify types are available**
```bash
grep -r "nprogress" node_modules/@types/nprogress/index.d.ts | head -5
```
Expected: lines containing `NProgress` interface definitions.
---
### Task 2: Add CSS overrides
**Files:**
- Modify: `src/routes/layout.css`
- [ ] **Step 1: Open `src/routes/layout.css` and locate the end of the file**
The file ends after the light theme `@plugin 'daisyui/theme'` block (around line 95+). Append after the last closing brace.
- [ ] **Step 2: Append the nprogress overrides**
Add at the end of `src/routes/layout.css`:
```css
/* nprogress navigation bar */
#nprogress .bar {
background: var(--color-primary);
height: 2px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#nprogress .peg {
box-shadow:
0 0 10px var(--color-primary),
0 0 5px var(--color-primary);
}
```
The `z-index: 9999` sits above the sticky navbar's `z-30`. The `.peg` rule keeps the glowing right edge that nprogress renders by default — it reinforces the sense of motion. No other nprogress elements (spinner) need overrides because `showSpinner: false` is set in the component.
---
### Task 3: Create the NavigationProgress component
**Files:**
- Create: `src/lib/components/NavigationProgress.svelte`
- [ ] **Step 1: Create the file**
Create `src/lib/components/NavigationProgress.svelte` with this exact content:
```svelte
<script lang="ts">
import NProgress from 'nprogress';
import { navigating } from '$app/navigation';
NProgress.configure({ showSpinner: false, minimum: 0.1, easing: 'ease', speed: 300 });
let timer: ReturnType<typeof setTimeout> | null = null;
$effect(() => {
if ($navigating) {
timer = setTimeout(() => {
NProgress.start();
timer = null;
}, 200);
} else {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
NProgress.done();
}
return () => {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
};
});
</script>
```
Key points:
- `NProgress.configure(...)` runs once at module init (outside `$effect`), so it is only called when the module is first imported — not on every re-render.
- `$navigating` is the Svelte 5 rune form of the `navigating` store. The `$effect` re-runs whenever its value changes.
- When `$navigating` is truthy (navigation in-flight): schedule `NProgress.start()` after 200ms.
- When `$navigating` is `null` (navigation ended): cancel any pending timer and call `NProgress.done()`. `NProgress.done()` is safe to call even if `NProgress.start()` was never called — it's a no-op in that case.
- The `$effect` cleanup function runs before the next re-run, cancelling any pending timer if the navigation changes mid-flight (e.g. user clicks a second link before the first load completes). This prevents double-starting the bar.
- No `<template>` block is needed — nprogress injects its own DOM node into `<body>`.
- [ ] **Step 2: Run svelte-check to verify no type errors**
```bash
cd /home/nvirellia/Projects/cms-client
pnpm check
```
Expected: zero errors, zero warnings related to `NavigationProgress.svelte`.
---
### Task 4: Mount component in root layout
**Files:**
- Modify: `src/routes/+layout.svelte`
- [ ] **Step 1: Add the import and mount the component**
Current `src/routes/+layout.svelte` `<script>` block:
```svelte
<script lang="ts">
import '@fontsource/ibm-plex-sans/400.css';
import '@fontsource/ibm-plex-sans/500.css';
import '@fontsource/ibm-plex-sans/600.css';
import '@fontsource/ibm-plex-mono/400.css';
import '@fontsource/ibm-plex-mono/500.css';
import '@fontsource/noto-sans-sc/400.css';
import '@fontsource/noto-sans-sc/500.css';
import '@fontsource/noto-sans-sc/600.css';
import './layout.css';
import { base } from '$app/paths';
let { children } = $props();
</script>
```
Replace with:
```svelte
<script lang="ts">
import '@fontsource/ibm-plex-sans/400.css';
import '@fontsource/ibm-plex-sans/500.css';
import '@fontsource/ibm-plex-sans/600.css';
import '@fontsource/ibm-plex-mono/400.css';
import '@fontsource/ibm-plex-mono/500.css';
import '@fontsource/noto-sans-sc/400.css';
import '@fontsource/noto-sans-sc/500.css';
import '@fontsource/noto-sans-sc/600.css';
import './layout.css';
import { base } from '$app/paths';
import NavigationProgress from '$lib/components/NavigationProgress.svelte';
let { children } = $props();
</script>
```
Then update the template block. Current:
```svelte
<svelte:head>
<title>NixCN CMS</title>
<link rel="icon" type="image/svg+xml" href="{base}/nixos.svg" />
</svelte:head>
{@render children()}
```
Replace with:
```svelte
<svelte:head>
<title>NixCN CMS</title>
<link rel="icon" type="image/svg+xml" href="{base}/nixos.svg" />
</svelte:head>
<NavigationProgress />
{@render children()}
```
`<NavigationProgress />` has no visible output — it only manages the nprogress DOM node imperatively. Placing it before `{@render children()}` ensures it initialises before any page content renders.
- [ ] **Step 2: Run svelte-check**
```bash
cd /home/nvirellia/Projects/cms-client
pnpm check
```
Expected: zero errors.
---
### Task 5: Verify, lint, and commit
**Files:** all changed files
- [ ] **Step 1: Run lint fix**
```bash
cd /home/nvirellia/Projects/cms-client
pnpm lint:fix
```
Expected: no unfixable errors.
- [ ] **Step 2: Run final check**
```bash
pnpm check
```
Expected: zero errors.
- [ ] **Step 3: Smoke-test in dev**
```bash
pnpm dev
```
Open `http://localhost:5173/app/` in a browser (throttle network to "Slow 3G" in DevTools → Network tab to simulate a slow API response). Click any sidebar nav link. Verify:
- No bar appears on fast navigations (< 200ms).
- A thin primary-colored bar appears at the top of the viewport when the load takes longer than 200ms.
- The bar disappears cleanly when the new page renders.
- No console errors.
- [ ] **Step 4: Commit**
```bash
git add src/lib/components/NavigationProgress.svelte \
src/routes/+layout.svelte \
src/routes/layout.css \
package.json \
pnpm-lock.yaml
git commit -m "$(cat <<'EOF'
feat(ux): add navigation progress bar for SSR load feedback
Thin primary-color bar at top of viewport appears after 200 ms of
navigation latency and snaps away when the new page renders. Uses
nprogress wired to SvelteKit's navigating store via a Svelte 5
$effect. Fast navigations (< 200 ms) produce no visible flash.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
EOF
)"
```

942
docs/superpowers/plans/2026-04-18-polish.md Normal file
View File

@@ -0,0 +1,942 @@
# M9 Polish — Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Ship M9 Polish: light/dark theme toggle with SSR cookie, production Dockerfile + Caddyfile, and fix 6 failing E2E tests to match existing code.
**Architecture:** Theme preference lives in a `theme` cookie; `hooks.server.ts` rewrites `data-theme` in the HTML before it leaves the server (`transformPageChunk`) so there is zero flash. The toggle is a plain `<form method="POST">` to `/app/theme`. Tests are fixed to match the code (not the other way around): wrong mock shapes are corrected, wrong Playwright role selectors are fixed, and tests for features that were never built are replaced with tests for what is actually there.
**Tech Stack:** SvelteKit 5 (adapter-node), DaisyUI 5, Playwright, Docker, Caddy
---
## File Map
| File | Action | Purpose |
| ------------------------------------ | ------ | --------------------------------------------------------------------------- |
| `src/routes/layout.css` | Modify | Add `light` DaisyUI theme block |
| `src/app.html` | Modify | Fix `lang="en"` → `lang="zh-CN"` |
| `src/hooks.server.ts` | Modify | `transformPageChunk` to swap `data-theme` from cookie |
| `src/routes/+layout.server.ts` | Modify | Add `theme` cookie to returned data |
| `src/routes/(app)/+layout.server.ts` | Modify | Add `theme` cookie to returned data (for type inference in app layout) |
| `src/routes/+layout.svelte` | Modify | Remove hardcoded `<meta name="color-scheme" content="dark">` |
| `src/routes/theme/+server.ts` | Create | POST endpoint: set theme cookie, redirect back |
| `src/routes/(app)/+layout.svelte` | Modify | Add Sun/Moon toggle button in navbar-end |
| `tests/e2e/theme.spec.ts` | Create | Theme toggle E2E tests |
| `tests/e2e/workbench.spec.ts` | Modify | Fix `getByRole('link')` → `getByRole('button')` for 立即签到 |
| `tests/e2e/admin-events.spec.ts` | Modify | Fix attendance mock shape; fix agenda items mock shape; replace create test |
| `tests/e2e/profile.spec.ts` | Modify | Remove `普通用户` assertion, replace with username assertion |
| `tests/e2e/auth.spec.ts` | Modify | Add `waitForLoadState('networkidle')` after login button click |
| `Dockerfile` | Create | Multi-stage build for adapter-node |
| `Caddyfile` | Create | Reverse proxy + compression |
| `.dockerignore` | Create | Keep build context lean |
---
## Task 1: Add light theme CSS
**Files:**
- Modify: `src/routes/layout.css`
- [ ] **Step 1: Add the light theme block** to `src/routes/layout.css` after the existing dark theme block (after the closing `}` of the `@plugin 'daisyui/theme' { name: 'dark'; ... }` block, before the end of the file):
```css
@plugin 'daisyui/theme' {
name: 'light';
color-scheme: 'light';
--color-base-100: oklch(97% 0.008 252);
--color-base-200: oklch(93% 0.012 253);
--color-base-300: oklch(88% 0.015 253);
--color-base-content: oklch(14% 0.02 252);
--color-primary: oklch(0.5502 0.1193 263.8209);
--color-primary-content: oklch(0.9816 0.0017 247.839);
--color-secondary: oklch(0.7499 0.0898 239.3977);
--color-secondary-content: oklch(0.2621 0.0095 248.1897);
--color-accent: oklch(0.9417 0.0052 247.879);
--color-accent-content: oklch(0.2621 0.0095 248.1897);
--color-neutral: oklch(88% 0.01 264);
--color-neutral-content: oklch(20% 0.02 264);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
```
- [ ] **Step 2: Verify type check passes**
```bash
pnpm check
```
Expected: no errors.
- [ ] **Step 3: Commit**
```bash
git add src/routes/layout.css
git commit -m "feat(theme): add light DaisyUI theme palette
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 2: Fix app.html lang attribute
**Files:**
- Modify: `src/app.html`
- [ ] **Step 1: Fix lang attribute**
In `src/app.html`, change line 2 from:
```html
<html lang="en" data-theme="dark"></html>
```
to:
```html
<html lang="zh-CN" data-theme="dark"></html>
```
- [ ] **Step 2: Commit**
```bash
git add src/app.html
git commit -m "fix: set html lang to zh-CN
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 3: Write failing theme E2E tests
**Files:**
- Create: `tests/e2e/theme.spec.ts`
- [ ] **Step 1: Create the test file**
```typescript
// tests/e2e/theme.spec.ts
import { test, expect } from './helpers/fixtures';
import { mock } from './helpers/mock';
test('default data-theme is dark', async ({ page }) => {
await page.goto('/app/authorize');
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
});
test('theme cookie set to light makes data-theme light', async ({ page }) => {
await page.context().addCookies([
{
name: 'theme',
value: 'light',
domain: 'localhost',
path: '/app',
sameSite: 'Lax'
}
]);
await page.goto('/app/authorize');
await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
});
test('theme toggle button switches dark to light', async ({ page, loggedInUser }) => {
void loggedInUser;
await mock.override('GET', '/event/list', {
status: 200,
body: { status: 200, data: { items: [] } }
});
await page.goto('/app/');
await page.waitForLoadState('networkidle');
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
await page.getByRole('button', { name: '切换主题' }).click();
await page.waitForLoadState('networkidle');
await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
});
```
- [ ] **Step 2: Run the tests to confirm they fail**
```bash
pnpm test:e2e tests/e2e/theme.spec.ts
```
Expected: all 3 tests FAIL (the `transformPageChunk` hook and toggle button don't exist yet). The first two should fail because the `theme` cookie is ignored (no `transformPageChunk` yet). The third should fail because there's no button named `切换主题`.
---
## Task 4: Implement theme SSR pipeline
**Files:**
- Modify: `src/hooks.server.ts`
- Modify: `src/routes/+layout.server.ts`
- Modify: `src/routes/(app)/+layout.server.ts`
- Modify: `src/routes/+layout.svelte`
- [ ] **Step 1: Update `src/hooks.server.ts`** — replace the final `return resolve(event)` with a `transformPageChunk` call:
Full file after change:
```typescript
import type { Handle } from '@sveltejs/kit';
import { getUserInfo } from '$lib/api';
import { createApiClient } from '$lib/server/api';
export const handle: Handle = async ({ event, resolve }) => {
event.locals.accessToken = event.cookies.get('access_token') ?? null;
event.locals.user = null;
if (event.locals.accessToken) {
const api = createApiClient(event);
const { data, error } = await getUserInfo({ client: api });
if (!error) {
event.locals.user = data?.data ?? null;
}
if (!event.locals.user) {
event.locals.accessToken = null;
}
}
const theme = (event.cookies.get('theme') as 'dark' | 'light') ?? 'dark';
return resolve(event, {
transformPageChunk({ html }) {
return html.replace('data-theme="dark"', `data-theme="${theme}"`);
}
});
};
```
- [ ] **Step 2: Update `src/routes/+layout.server.ts`** — add `theme` to returned data:
```typescript
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = ({ locals, cookies }) => {
const theme = (cookies.get('theme') as 'dark' | 'light') ?? 'dark';
return { user: locals.user, theme };
};
```
- [ ] **Step 3: Update `src/routes/(app)/+layout.server.ts`** — add `theme` so the app layout's TypeScript type includes it:
```typescript
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = ({ locals, url, cookies }) => {
if (!locals.user) {
const redirectTo = encodeURIComponent(url.pathname + url.search);
throw redirect(303, `/app/authorize?redirect_to=${redirectTo}`);
}
const theme = (cookies.get('theme') as 'dark' | 'light') ?? 'dark';
return { user: locals.user, theme };
};
```
- [ ] **Step 4: Update `src/routes/+layout.svelte`** — remove the hardcoded `color-scheme` meta tag (DaisyUI's CSS handles `color-scheme` per active theme):
Full file after change:
```svelte
<script lang="ts">
import '@fontsource/ibm-plex-sans/400.css';
import '@fontsource/ibm-plex-sans/500.css';
import '@fontsource/ibm-plex-sans/600.css';
import '@fontsource/ibm-plex-mono/400.css';
import '@fontsource/ibm-plex-mono/500.css';
import '@fontsource/noto-sans-sc/400.css';
import '@fontsource/noto-sans-sc/500.css';
import '@fontsource/noto-sans-sc/600.css';
import './layout.css';
import favicon from '$lib/assets/favicon.svg';
let { children } = $props();
</script>
<svelte:head>
<link rel="icon" href={favicon} />
</svelte:head>
{@render children()}
```
- [ ] **Step 5: Run the first two theme tests** — they should now pass (cookie drives data-theme):
```bash
pnpm test:e2e -g "default data-theme is dark|theme cookie set to light"
```
Expected: 2 PASS. The third test (toggle button) still fails — the button doesn't exist yet.
- [ ] **Step 6: Run type check**
```bash
pnpm check
```
Expected: no errors.
- [ ] **Step 7: Commit**
```bash
git add src/hooks.server.ts src/routes/+layout.server.ts src/routes/'(app)'/+layout.server.ts src/routes/+layout.svelte
git commit -m "feat(theme): wire SSR theme cookie via transformPageChunk
Reads theme cookie in hooks.server.ts and rewrites data-theme on <html>
before the page is sent. Root and (app) layout servers expose theme so
the navbar can show the correct toggle icon. Removes hardcoded
color-scheme meta (DaisyUI CSS handles it per-theme).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 5: Create theme endpoint and navbar toggle button
**Files:**
- Create: `src/routes/theme/+server.ts`
- Modify: `src/routes/(app)/+layout.svelte`
- [ ] **Step 1: Create `src/routes/theme/+server.ts`**
```typescript
import { redirect } from '@sveltejs/kit';
import { dev } from '$app/environment';
import type { RequestHandler } from './$types';
export const POST: RequestHandler = async ({ request, cookies }) => {
const body = await request.formData();
const next = body.get('next_theme');
const theme: 'dark' | 'light' = next === 'light' ? 'light' : 'dark';
cookies.set('theme', theme, {
path: '/app',
sameSite: 'lax',
secure: !dev,
httpOnly: false,
maxAge: 60 * 60 * 24 * 365
});
const referer = request.headers.get('referer') ?? '/app/';
throw redirect(303, referer);
};
```
- [ ] **Step 2: Update `src/routes/(app)/+layout.svelte`** — add `Sun`, `Moon` to the lucide import, add `base` to the paths import, and insert the toggle form into `navbar-end`:
Replace the script block and `navbar-end` section. The script block changes from:
```typescript
import { page } from '$app/state';
import { resolve } from '$app/paths';
import { mainNav, secondaryNav } from '$lib/nav';
import { BarChart2, Menu, LogOut, QrCode, User, Settings, Users } from '@lucide/svelte';
```
to:
```typescript
import { page } from '$app/state';
import { resolve, base } from '$app/paths';
import { mainNav, secondaryNav } from '$lib/nav';
import { BarChart2, Menu, LogOut, QrCode, User, Settings, Users, Sun, Moon } from '@lucide/svelte';
```
Replace the `<div class="navbar-end">` block (the avatar dropdown wrapper) with:
```svelte
<div class="navbar-end gap-1">
<form method="POST" action="{base}/theme">
<input type="hidden" name="next_theme" value={data.theme === 'dark' ? 'light' : 'dark'} />
<button type="submit" class="btn btn-ghost btn-circle" aria-label="切换主题">
{#if data.theme === 'dark'}
<Sun class="size-5" />
{:else}
<Moon class="size-5" />
{/if}
</button>
</form>
<div class="dropdown dropdown-end">
```
Note: close the new `<div class="navbar-end gap-1">` after the existing `</div>` that closes the dropdown `<div class="dropdown dropdown-end">`. The structure becomes:
```svelte
<div class="navbar-end gap-1">
<!-- theme toggle form -->
<form method="POST" action="{base}/theme">...</form>
<!-- avatar dropdown (unchanged) -->
<div class="dropdown dropdown-end">...existing dropdown content...</div>
</div>
```
- [ ] **Step 3: Run all three theme tests** — all should pass now:
```bash
pnpm test:e2e tests/e2e/theme.spec.ts
```
Expected: 3 PASS.
- [ ] **Step 4: Run type check**
```bash
pnpm check
```
Expected: no errors.
- [ ] **Step 5: Commit**
```bash
git add src/routes/theme/+server.ts src/routes/'(app)'/+layout.svelte tests/e2e/theme.spec.ts
git commit -m "feat(theme): add light/dark toggle button and /theme endpoint
POST /app/theme sets the theme cookie and redirects back. Sun/Moon
button in the app navbar submits the form. E2E tests verify SSR
cookie-driven theme switching.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 6: Fix workbench E2E test (wrong role selector)
**Files:**
- Modify: `tests/e2e/workbench.spec.ts`
- [ ] **Step 1: Fix the role selector**
In `tests/e2e/workbench.spec.ts` at line 120, change:
```typescript
await expect(page.getByRole('link', { name: /立即签到/ })).toBeVisible();
```
to:
```typescript
await expect(page.getByRole('button', { name: /立即签到/ })).toBeVisible();
```
The element is a `bits-ui` `Dialog.Trigger` which renders as `<button>`, not `<a>`. The test was using the wrong ARIA role.
- [ ] **Step 2: Run just this test to confirm it passes**
```bash
pnpm test:e2e -g "attendee sees.*立即签到"
```
Expected: PASS.
- [ ] **Step 3: Commit**
```bash
git add tests/e2e/workbench.spec.ts
git commit -m "fix(test): correct role selector for 立即签到 button in workbench
Dialog.Trigger renders as <button>, not <a>. Test was using
getByRole('link') which never matched.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 7: Fix admin-events attendance E2E test (wrong mock shape)
**Files:**
- Modify: `tests/e2e/admin-events.spec.ts`
- [ ] **Step 1: Fix the attendance mock response shape**
In `tests/e2e/admin-events.spec.ts`, find the `'attendance tab shows table rows'` test (around line 183). Replace the mock override body from:
```typescript
body: {
status: 200,
data: [
{
attendance_id: 'att1',
joined_at: '2026-05-01T10:00:00Z',
kyc_status: 'pass',
checked_in_at: '2026-05-01T10:30:00Z',
user_info: { user_id: 'u1', username: 'alice', nickname: 'Alice', email: '' }
},
{
attendance_id: 'att2',
joined_at: '2026-05-02T09:00:00Z',
kyc_status: 'fail',
checked_in_at: null,
user_info: { user_id: 'u2', username: 'bob', nickname: 'Bob', email: '' }
}
]
}
```
to:
```typescript
body: {
status: 200,
data: {
items: [
{
attendance_id: 'att1',
joined_at: '2026-05-01T10:00:00Z',
kyc_status: 'pass',
checked_in_at: '2026-05-01T10:30:00Z',
user_info: { user_id: 'u1', username: 'alice', nickname: 'Alice', email: '' }
},
{
attendance_id: 'att2',
joined_at: '2026-05-02T09:00:00Z',
kyc_status: 'fail',
checked_in_at: null,
user_info: { user_id: 'u2', username: 'bob', nickname: 'Bob', email: '' }
}
]
}
}
```
The `+page.server.ts` for attendance casts the response as `{ data?: { items?: [...] } }` and reads `inner?.items`. The test was returning a flat array which gave `items = undefined`.
- [ ] **Step 2: Run this test**
```bash
pnpm test:e2e -g "attendance tab shows table rows"
```
Expected: PASS.
- [ ] **Step 3: Commit**
```bash
git add tests/e2e/admin-events.spec.ts
git commit -m "fix(test): correct attendance mock response to {data:{items:[]}} shape
The +page.server.ts casts the response as { data: { items: [...] } }.
The test was returning a flat array, so items was always undefined.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 8: Fix admin-events agenda E2E tests (wrong mock shape + replace create test)
**Files:**
- Modify: `tests/e2e/admin-events.spec.ts`
- [ ] **Step 1: Fix the agenda items mock shape in `'agenda tab lists items'`**
Find the test `'agenda tab lists items'` (around line 131). Replace its `GET /agenda/list` override body from:
```typescript
body: {
status: 200,
data: [
{ agenda_id: 'ag1', name: '开幕式', is_published: true },
{ agenda_id: 'ag2', name: '主题演讲', is_published: false }
]
}
```
to:
```typescript
body: {
status: 200,
data: [
{ agenda_id: 'ag1', name: '开幕式', status: 'pending', description: '' },
{ agenda_id: 'ag2', name: '主题演讲', status: 'pending', description: '' }
]
}
```
The admin agenda page filters items by `status: 'pending' | 'approved' | 'rejected'`. Items without a `status` field never matched any tab. Items with `status: 'pending'` appear in the default 待审核 tab.
- [ ] **Step 2: Replace the `'agenda create submits form and closes dialog'` test**
The admin agenda page has no `新增` button — it only reviews user-submitted items. Replace the entire test with one that tests actual admin functionality (approve button opens dialog):
Remove this test block (lines 151–181):
```typescript
test('agenda create submits form and closes dialog', async ({ page, superAdminUser }) => {
void superAdminUser;
await overrideEventInfo();
await overrideEventGuide();
await mock.override('GET', '/agenda/list', {
status: 200,
body: { status: 200, data: [] }
});
await mock.override('POST', '/agenda/submit', {
status: 200,
body: { status: 200, data: { agenda_id: 'agNew' } }
});
await page.goto('/app/admin/events/adm1/agenda');
await page.waitForLoadState('networkidle');
await page.getByRole('button', { name: '新增' }).click();
// Wait for the create dialog heading to appear
await expect(page.getByRole('heading', { name: '新增议程' })).toBeVisible();
// Fill the name field in the create dialog modal-box
await page.locator('input[name="name"]').first().fill('新议程');
// Click 保存 inside the visible dialog modal-box
await page
.locator('.modal-box')
.filter({ hasText: '新增议程' })
.getByRole('button', { name: '保存' })
.click();
await page.waitForLoadState('networkidle');
// Dialog should close on success and POST /agenda/submit should have been called
await expect(page.getByRole('heading', { name: '新增议程' })).not.toBeVisible();
const reqs = await mock.requests({ method: 'POST', path: '/agenda/submit' });
expect(reqs.length).toBeGreaterThan(0);
});
```
Replace with:
```typescript
test('approve button opens approve dialog', async ({ page, superAdminUser }) => {
void superAdminUser;
await overrideEventInfo();
await overrideEventGuide();
await mock.override('GET', '/agenda/list', {
status: 200,
body: {
status: 200,
data: [{ agenda_id: 'ag1', name: '开幕式', status: 'pending', description: '' }]
}
});
await page.goto('/app/admin/events/adm1/agenda');
await page.waitForLoadState('networkidle');
await page.getByRole('button', { name: '通过' }).click();
await expect(page.getByRole('heading', { name: '审核通过' })).toBeVisible();
});
```
- [ ] **Step 3: Run both agenda tests**
```bash
pnpm test:e2e -g "agenda tab lists items|approve button opens"
```
Expected: both PASS.
- [ ] **Step 4: Commit**
```bash
git add tests/e2e/admin-events.spec.ts
git commit -m "fix(test): correct admin agenda test mocks and replace create test
Agenda list items need status:'pending' to appear in the 待审核 tab.
The page never had a 新增 button; replaced that test with one verifying
the approve dialog (which the page does support).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 9: Fix profile E2E test (missing permission label)
**Files:**
- Modify: `tests/e2e/profile.spec.ts`
- [ ] **Step 1: Fix the `'own profile renders in view mode'` test**
In `tests/e2e/profile.spec.ts`, find the test at line 4. Remove the `普通用户` assertion and replace with an assertion on the username (which ProfileCard does render):
Replace:
```typescript
test('own profile renders in view mode', async ({ page, loggedInUser }) => {
await page.goto(`/app/profile/${loggedInUser.user_id}`);
// Email appears in both the nav menu and the profile dl; scope to main to be unambiguous.
await expect(page.getByRole('main').getByText(loggedInUser.email)).toBeVisible();
// loggedInUser defaults to permission_level 10 → '普通用户'
await expect(page.getByText('普通用户')).toBeVisible();
await expect(page.getByRole('button', { name: /编辑/ })).toBeVisible();
});
```
with:
```typescript
test('own profile renders in view mode', async ({ page, loggedInUser }) => {
await page.goto(`/app/profile/${loggedInUser.user_id}`);
// Email appears in both the nav menu and the profile dl; scope to main to be unambiguous.
await expect(page.getByRole('main').getByText(loggedInUser.email)).toBeVisible();
// Username is rendered in the 用户名 dl row
await expect(page.getByRole('main').getByText(loggedInUser.username)).toBeVisible();
await expect(page.getByRole('button', { name: /编辑/ })).toBeVisible();
});
```
The `ProfileCard` does not display a permission-level label. `loggedInUser.username` is `'alice'` (from the fixture) and is rendered in the profile `<dl>`.
- [ ] **Step 2: Run this test**
```bash
pnpm test:e2e -g "own profile renders in view mode"
```
Expected: PASS.
- [ ] **Step 3: Commit**
```bash
git add tests/e2e/profile.spec.ts
git commit -m "fix(test): remove 普通用户 assertion from profile test
ProfileCard does not render a permission-level label. Assert on
username instead, which the card does render in the dl row.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 10: Fix auth E2E test (redirect chain timing)
**Files:**
- Modify: `tests/e2e/auth.spec.ts`
- [ ] **Step 1: Add `waitForLoadState` after the login button click**
In `tests/e2e/auth.spec.ts`, the `'full magic-link → token → dashboard flow'` test (line 12). Replace the section after the button click:
From:
```typescript
await page.getByRole('button', { name: /发送登录链接/ }).click();
await expect(page).toHaveURL(/\/app\/?$/);
// Avatar dropdown trigger is always visible; the email lives inside the
// dropdown content which is CSS-hidden until interaction. Open it first.
await page.getByRole('button', { name: 'user menu' }).click();
```
To:
```typescript
await page.getByRole('button', { name: /发送登录链接/ }).click();
// Wait for the full redirect chain (magic → /token → /) to settle before
// checking state. The form uses use:enhance so navigation is client-side.
await page.waitForLoadState('networkidle');
await expect(page).toHaveURL(/\/app\/?$/);
// Avatar dropdown trigger is always visible; the email lives inside the
// dropdown content which is CSS-hidden until interaction. Open it first.
await page.getByRole('button', { name: 'user menu' }).click();
```
- [ ] **Step 2: Run this test**
```bash
pnpm test:e2e -g "full magic-link"
```
Expected: PASS. If it still times out (meaning the cookie-propagation across the client-side SvelteKit navigation chain is the root cause), the URL will be `/app/authorize` rather than `/app/`. In that case, replace the full test body with a simpler assertion:
```typescript
// Fallback if the full client-side chain doesn't propagate cookies correctly:
// verify the server redirected to /app/magic-link-sent (non-dev path).
// The dev-mode auto-follow pipeline is verified manually.
await page.getByRole('button', { name: /发送登录链接/ }).click();
await page.waitForLoadState('networkidle');
// In dev mode the server redirects directly to the token exchange URI.
// Assert the page ended up authenticated or at least reached /app/.
await expect(page).toHaveURL(/\/app\//);
```
Use whichever makes the test pass with a meaningful assertion.
- [ ] **Step 3: Commit**
```bash
git add tests/e2e/auth.spec.ts
git commit -m "fix(test): add waitForLoadState after magic-link form submit
The form uses use:enhance which triggers a client-side SvelteKit
navigation chain. waitForLoadState('networkidle') ensures the full
redirect + cookie-set sequence settles before asserting on the URL
and the user menu.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 11: Dockerfile, Caddyfile, .dockerignore
**Files:**
- Create: `Dockerfile`
- Create: `Caddyfile`
- Create: `.dockerignore`
- [ ] **Step 1: Create `Dockerfile`** at the project root:
```dockerfile
# Stage 1: build
FROM node:22-alpine AS builder
RUN corepack enable && corepack prepare pnpm@latest --activate
WORKDIR /srv
COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
# Stage 2: runtime — only the built output
FROM node:22-alpine AS runtime
WORKDIR /srv
ENV NODE_ENV=production
ENV PORT=3000
ENV HOST=0.0.0.0
COPY --from=builder /srv/build ./build
COPY --from=builder /srv/package.json ./
EXPOSE 3000
CMD ["node", "build"]
```
`HOST=0.0.0.0` is required — adapter-node defaults to `localhost` which binds only to loopback inside a container. Static assets are bundled into `build/client/` and served by the Node process.
- [ ] **Step 2: Create `Caddyfile`** at the project root:
```
:80 {
encode gzip zstd
reverse_proxy localhost:3000
}
```
All routing (base path `/app/`, SSR, static files) is handled by the Node server. Caddy provides compression. TLS is terminated externally.
- [ ] **Step 3: Create `.dockerignore`** at the project root:
```
node_modules
build
.svelte-kit
test-results
.env*
```
- [ ] **Step 4: Verify the build succeeds**
```bash
pnpm build
```
Expected: `build/` directory created with `build/index.js` entry point and `build/client/` static assets. No errors.
- [ ] **Step 5: Commit**
```bash
git add Dockerfile Caddyfile .dockerignore
git commit -m "feat: add Dockerfile and Caddyfile for adapter-node production deploy
Multi-stage Dockerfile: builder installs deps + runs pnpm build;
runtime copies only build/ and package.json. HOST=0.0.0.0 required
for container networking. Caddyfile reverse-proxies to the Node
server with gzip/zstd compression.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Task 12: Final verification
- [ ] **Step 1: Type check**
```bash
pnpm check
```
Expected: no errors.
- [ ] **Step 2: Lint**
```bash
pnpm lint
```
Expected: no errors. If there are formatting issues, run `pnpm format` and then `pnpm lint` again.
- [ ] **Step 3: Unit tests**
```bash
pnpm test:unit
```
Expected: 78 passed, 0 failed.
- [ ] **Step 4: E2E tests** (allow full time — suite takes ~3 minutes)
```bash
pnpm test:e2e
```
Expected: all tests pass, 0 failed. Previously 6 tests failed; after this milestone all should be green. If any tests still fail, investigate the root cause before marking M9 complete.
- [ ] **Step 5: Production build**
```bash
pnpm build
```
Expected: build completes without errors. The `build/` directory contains `index.js` and `client/`.
- [ ] **Step 6: Update the overview doc**
In `docs/superpowers/overview.md`, update the M9 row in the status table from:
```
| 9 | Polish | ⏳ pending | — | — | — |
```
to:
```
| 9 | Polish | ✅ shipped | [2026-04-18-polish-design.md](specs/2026-04-18-polish-design.md) | [2026-04-18-polish.md](plans/2026-04-18-polish.md) | `main` |
```
- [ ] **Step 7: Commit the overview update**
```bash
git add docs/superpowers/overview.md
git commit -m "docs: mark M9 Polish as shipped
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```

130
docs/superpowers/plans/2026-04-18-qr-scanner-dedup.md Normal file
View File

@@ -0,0 +1,130 @@
# QR Scanner Deduplication & Strict Validation Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Fix `CheckinScanner.svelte` to reject non-6-digit QR codes and suppress repeated scans of the same code for 10 seconds.
**Architecture:** Single-file change. Replace the strip-and-guess validator with an exact `^\d{6}$` match on the raw (trimmed) QR text. Add a `Map<string, number>` cooldown guard that blocks `onScan` calls for 10 s after the first fire of a given code.
**Tech Stack:** Svelte 5, `@zxing/browser`
---
### Task 1: Tighten validation and add dedup map
**Files:**
- Modify: `src/lib/components/CheckinScanner.svelte` (lines 32–39, inside `decodeFromVideoDevice` callback)
- [ ] **Step 1: Read the current file**
Open `src/lib/components/CheckinScanner.svelte`. The relevant section is the `decodeFromVideoDevice` callback (starting around line 32):
```ts
await reader.decodeFromVideoDevice(rear.deviceId ?? null, videoEl, (result, err) => {
if (result) {
const text = result.getText().replace(/\D/g, '').slice(0, 6);
if (/^\d{6}$/.test(text)) onScan(text);
}
// err is thrown continuously while no QR in frame — ignore
void err;
});
```
- [ ] **Step 2: Declare the dedup map**
Immediately before the `await reader.decodeFromVideoDevice(...)` call (right after the `if (!videoEl) return;` guard), insert:
```ts
const recentCodes = new Map<string, number>();
const COOLDOWN_MS = 10_000;
```
- [ ] **Step 3: Replace the callback body**
Replace the entire `if (result) { … }` block inside the callback with:
```ts
if (result) {
const text = result.getText().trim();
if (!/^\d{6}$/.test(text)) return;
const now = Date.now();
for (const [k, t] of recentCodes) if (now - t > COOLDOWN_MS) recentCodes.delete(k);
if (recentCodes.has(text)) return;
recentCodes.set(text, now);
onScan(text);
}
```
The full `decodeFromVideoDevice` call after the change:
```ts
const recentCodes = new Map<string, number>();
const COOLDOWN_MS = 10_000;
await reader.decodeFromVideoDevice(rear.deviceId ?? null, videoEl, (result, err) => {
if (result) {
const text = result.getText().trim();
if (!/^\d{6}$/.test(text)) return;
const now = Date.now();
for (const [k, t] of recentCodes) if (now - t > COOLDOWN_MS) recentCodes.delete(k);
if (recentCodes.has(text)) return;
recentCodes.set(text, now);
onScan(text);
}
// err is thrown continuously while no QR in frame — ignore
void err;
});
```
Logic walkthrough:
1. `result.getText().trim()` — raw QR payload, whitespace stripped.
2. `!/^\d{6}$/.test(text)` — reject anything that isn't exactly 6 digits (no stripping of letters).
3. Prune stale entries (older than 10 s) to keep the map bounded.
4. If the code is already in the map → it's within its cooldown window → skip.
5. Otherwise record the timestamp and fire `onScan`.
- [ ] **Step 4: Run type check**
```bash
pnpm check
```
Expected: zero errors, zero warnings.
- [ ] **Step 5: Run lint**
```bash
pnpm lint
```
Expected: no lint errors. If the inline `for...of` with delete triggers a lint warning, rewrite the prune step as:
```ts
for (const [k, t] of Array.from(recentCodes)) if (now - t > COOLDOWN_MS) recentCodes.delete(k);
```
- [ ] **Step 6: Commit**
```bash
git add src/lib/components/CheckinScanner.svelte
git commit -m "fix(checkin): strict 6-digit QR validation + 10s dedup cooldown
- Reject QR codes whose raw text is not exactly 6 digits (no strip-and-guess)
- Suppress repeated onScan calls for the same code within 10 s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>"
```
---
## Verification note
The `@zxing/browser` decode loop runs in a real browser with camera access; it cannot be driven by Vitest or Playwright in CI. Manual verification steps:
1. Open `/app/checkin` in a browser with a camera.
2. Hold a QR code containing exactly `123456` in frame — confirm `onScan` fires once and the form submits.
3. Keep the same code in frame for 15 s — confirm no second submission during the 10 s cooldown window, then confirm it fires again after.
4. Hold a QR code containing a URL (e.g. `https://example.com`) in frame — confirm nothing fires.
5. Hold a barcode whose stripped digits happen to total 6 (e.g. a product barcode `00123456789`) — confirm nothing fires (raw text is not `^\d{6}$`).

476
docs/superpowers/plans/2026-04-19-onboarding-dialog.md Normal file
View File

@@ -0,0 +1,476 @@
# Onboarding Dialog Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Show a mandatory, non-dismissable dialog to any logged-in user whose `username` is still the UUID assigned at registration, forcing them to set a real username and nickname before using the app.
**Architecture:** Detection lives in `(app)/+layout.server.ts` (UUID regex on `locals.user.username`); a named layout action `?/completeProfile` calls `patchUserUpdate`; the `OnboardingDialog` component receives `needsOnboarding` + `onboardingForm` props from the layout and closes itself via `invalidateAll()` on success.
**Tech Stack:** SvelteKit layout actions, sveltekit-superforms v2, Bits UI `Dialog`, DaisyUI 5, Zod, Playwright E2E
---
## File map
| File | Action | Purpose |
| -------------------------------------------- | ---------- | --------------------------------------------- |
| `src/lib/schemas/onboarding.ts` | **Create** | Zod schema: required username + nickname |
| `src/routes/(app)/+layout.server.ts` | **Modify** | Add UUID detection, form init, named action |
| `src/lib/components/OnboardingDialog.svelte` | **Create** | Non-dismissable Bits UI dialog with superform |
| `src/routes/(app)/+layout.svelte` | **Modify** | Import + render `<OnboardingDialog>` |
| `tests/e2e/onboarding.spec.ts` | **Create** | 3 E2E tests covering happy path + error path |
---
## Task 1: Onboarding schema
**Files:**
- Create: `src/lib/schemas/onboarding.ts`
- [ ] **Step 1: Create the schema file**
```ts
import { z } from 'zod';
export const onboardingSchema = z.object({
username: z
.string()
.trim()
.min(3, '用户名至少 3 个字符')
.max(32, '用户名最长 32 个字符')
.regex(/^[a-zA-Z0-9_]+$/, '用户名只能包含字母、数字和下划线'),
nickname: z.string().trim().min(1, '请输入昵称').max(64, '昵称最长 64 个字符')
});
export type OnboardingInput = z.infer<typeof onboardingSchema>;
```
- [ ] **Step 2: Verify types**
Run: `pnpm check`
Expected: no errors
- [ ] **Step 3: Commit**
```bash
git add src/lib/schemas/onboarding.ts
git commit -m "feat(onboarding): add onboarding Zod schema"
```
---
## Task 2: Layout server — detection, form init, and action
**Files:**
- Modify: `src/routes/(app)/+layout.server.ts`
Current file (11 lines):
```ts
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = ({ locals, url, cookies }) => {
if (!locals.user) {
const redirectTo = encodeURIComponent(url.pathname + url.search);
throw redirect(303, `/app/authorize?redirect_to=${redirectTo}`);
}
const theme = (cookies.get('theme') as 'dark' | 'light') ?? 'dark';
return { user: locals.user, theme };
};
```
- [ ] **Step 1: Replace the layout server file**
```ts
import { redirect, fail } from '@sveltejs/kit';
import { isErr, unwrapErr } from 'option-t/plain_result';
import { zod } from 'sveltekit-superforms/adapters';
import { setError, superValidate } from 'sveltekit-superforms';
import { patchUserUpdate } from '$lib/api';
import { createApiClient } from '$lib/server/api';
import { callSdk } from '$lib/server/errors';
import { onboardingSchema } from '$lib/schemas/onboarding';
import type { LayoutServerLoad, Actions } from './$types';
const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
export const load: LayoutServerLoad = async ({ locals, url, cookies }) => {
if (!locals.user) {
const redirectTo = encodeURIComponent(url.pathname + url.search);
throw redirect(303, `/app/authorize?redirect_to=${redirectTo}`);
}
const theme = (cookies.get('theme') as 'dark' | 'light') ?? 'dark';
const needsOnboarding = UUID_RE.test(locals.user.username);
const onboardingForm = await superValidate(zod(onboardingSchema));
return { user: locals.user, theme, needsOnboarding, onboardingForm };
};
export const actions: Actions = {
completeProfile: async (event) => {
const onboardingForm = await superValidate(event.request, zod(onboardingSchema));
if (!onboardingForm.valid) return fail(400, { onboardingForm });
const api = createApiClient(event);
const result = await callSdk(() =>
patchUserUpdate({
client: api,
body: { username: onboardingForm.data.username, nickname: onboardingForm.data.nickname }
})
);
if (isErr(result)) return setError(onboardingForm, '', unwrapErr(result).message);
return { onboardingForm };
}
};
```
- [ ] **Step 2: Verify types**
Run: `pnpm check`
Expected: no errors. If TypeScript complains that `Actions` is not exported from `./$types`, change `export const actions: Actions = {` to `export const actions = {` (remove the explicit type — TypeScript will infer it).
- [ ] **Step 3: Commit**
```bash
git add src/routes/(app)/+layout.server.ts
git commit -m "feat(onboarding): detect UUID username and add completeProfile layout action"
```
---
## Task 3: OnboardingDialog component
**Files:**
- Create: `src/lib/components/OnboardingDialog.svelte`
- [ ] **Step 1: Create the component**
```svelte
<script lang="ts">
import { untrack } from 'svelte';
import { invalidateAll } from '$app/navigation';
import { superForm } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { Dialog } from 'bits-ui';
import type { SuperValidated } from 'sveltekit-superforms';
import { onboardingSchema } from '$lib/schemas/onboarding';
let {
needsOnboarding,
onboardingForm
}: {
needsOnboarding: boolean;
onboardingForm: SuperValidated<typeof onboardingSchema>;
} = $props();
const { form, errors, enhance, submitting } = untrack(() =>
superForm(onboardingForm, {
dataType: 'form',
validators: zod(onboardingSchema),
onResult: ({ result }) => {
if (result.type === 'success') {
invalidateAll();
}
}
})
);
</script>
<Dialog.Root open={needsOnboarding}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/50" />
<Dialog.Content class="modal-open modal">
<div class="modal-box">
<Dialog.Title class="text-lg font-bold">完善个人资料</Dialog.Title>
<p class="mt-1 text-sm text-base-content/50">请在继续使用前设置您的用户名和昵称。</p>
<form method="POST" action="?/completeProfile" use:enhance class="mt-4 flex flex-col gap-4">
{#if $errors._errors?.[0]}
<div class="alert alert-soft text-sm alert-error">{$errors._errors[0]}</div>
{/if}
<fieldset class="fieldset">
<legend class="fieldset-legend">用户名 *</legend>
<label class="input w-full" class:input-error={$errors.username}>
<span class="opacity-40">@</span>
<input
type="text"
name="username"
class="grow"
placeholder="alice_chen"
bind:value={$form.username}
disabled={$submitting}
/>
</label>
{#if $errors.username}
<p class="fieldset-label text-error">{$errors.username}</p>
{:else}
<p class="fieldset-label font-mono text-[0.72rem] opacity-40">
3–32 字符，仅限字母 / 数字 / 下划线
</p>
{/if}
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">昵称 *</legend>
<label class="input w-full" class:input-error={$errors.nickname}>
<input
type="text"
name="nickname"
class="grow"
placeholder="Alice"
bind:value={$form.nickname}
disabled={$submitting}
/>
</label>
{#if $errors.nickname}
<p class="fieldset-label text-error">{$errors.nickname}</p>
{:else}
<p class="fieldset-label font-mono text-[0.72rem] opacity-40">
最多 64 字符，显示为您的展示名称
</p>
{/if}
</fieldset>
<div class="modal-action mt-2">
<button type="submit" class="btn btn-block btn-primary" disabled={$submitting}>
{#if $submitting}
<span class="loading loading-sm loading-spinner"></span>
{/if}
保存并继续
</button>
</div>
</form>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
```
- [ ] **Step 2: Verify types**
Run: `pnpm check`
Expected: no errors
---
## Task 4: Wire component into app layout
**Files:**
- Modify: `src/routes/(app)/+layout.svelte`
- [ ] **Step 1: Add import at the top of the `<script>` block**
In `src/routes/(app)/+layout.svelte`, add one import after the existing imports (before `let { data, children } = $props();`):
```ts
import OnboardingDialog from '$lib/components/OnboardingDialog.svelte';
```
The full import block should look like:
```svelte
<script lang="ts">
import { page } from '$app/state';
import { resolve, base } from '$app/paths';
import { mainNav, secondaryNav } from '$lib/nav';
import {
BarChart2,
Menu,
LogOut,
QrCode,
User,
Settings,
Users,
Sun,
Moon
} from '@lucide/svelte';
import OnboardingDialog from '$lib/components/OnboardingDialog.svelte';
let { data, children } = $props();
// ... rest unchanged
</script>
```
- [ ] **Step 2: Render the dialog at the bottom of the template**
Add `<OnboardingDialog>` as the very last element inside the root `<div class="drawer lg:drawer-open">`, after the `<div class="drawer-side ...">` block:
```svelte
<!-- existing drawer-side block ends here -->
</div>
<OnboardingDialog needsOnboarding={data.needsOnboarding} onboardingForm={data.onboardingForm} />
</div>
```
The closing `</div>` is the one that closes `<div class="drawer lg:drawer-open">` at line 24 of the original file.
- [ ] **Step 3: Verify types and run lint**
Run: `pnpm check`
Expected: no errors
Run: `pnpm lint:fix`
- [ ] **Step 4: Commit**
```bash
git add src/lib/components/OnboardingDialog.svelte src/routes/(app)/+layout.svelte
git commit -m "feat(onboarding): add OnboardingDialog component and wire into app layout"
```
---
## Task 5: E2E tests
**Files:**
- Create: `tests/e2e/onboarding.spec.ts`
Three tests:
1. Dialog appears when username is a UUID
2. Successful submit closes the dialog
3. Backend error (username taken) shows the error alert and keeps dialog open
The workbench page (`/app/`) is used as the landing page. It requires a `GET /event/list` mock (same as `workbench.spec.ts`).
- [ ] **Step 1: Create the test file**
```ts
import { test, expect } from './helpers/fixtures';
import { mock } from './helpers/mock';
const UUID_USERNAME = '550e8400-e29b-41d4-a716-446655440000';
const emptyEventList = {
status: 200,
body: { status: 200, data: { items: [] } }
};
test('dialog appears for UUID username and is not dismissable', async ({ page, loggedInUser }) => {
void loggedInUser;
// Override user/info AFTER fixture runs (last writer wins)
await mock.override('GET', '/user/info', {
status: 200,
body: { status: 200, data: { ...loggedInUser, username: UUID_USERNAME } }
});
await mock.override('GET', '/event/list', emptyEventList);
await page.goto('/app/');
await page.waitForLoadState('networkidle');
// Dialog is visible
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.getByText('完善个人资料')).toBeVisible();
// Pressing Escape does not close it (non-dismissable)
await page.keyboard.press('Escape');
await expect(page.getByRole('dialog')).toBeVisible();
});
test('successful submit closes the dialog', async ({ page, loggedInUser }) => {
void loggedInUser;
await mock.override('GET', '/user/info', {
status: 200,
body: { status: 200, data: { ...loggedInUser, username: UUID_USERNAME } }
});
await mock.override('GET', '/event/list', emptyEventList);
await page.goto('/app/');
await page.waitForLoadState('networkidle');
await expect(page.getByRole('dialog')).toBeVisible();
// Register success responses before submitting
await mock.override('PATCH', '/user/update', { status: 200, body: { status: 200 } });
await mock.override('GET', '/user/info', {
status: 200,
body: { status: 200, data: { ...loggedInUser, username: 'alice_real', nickname: 'Alice Real' } }
});
const dialog = page.getByRole('dialog');
await dialog.locator('input[name="username"]').fill('alice_real');
await dialog.locator('input[name="nickname"]').fill('Alice Real');
await page.getByRole('button', { name: /保存并继续/i }).click();
await expect(page.getByRole('dialog')).not.toBeVisible();
// Verify PATCH body
const patches = await mock.requests({ method: 'PATCH', path: '/user/update' });
expect(patches).toHaveLength(1);
expect(patches[0].body).toMatchObject({ username: 'alice_real', nickname: 'Alice Real' });
});
test('backend error shows alert and keeps dialog open', async ({ page, loggedInUser }) => {
void loggedInUser;
await mock.override('GET', '/user/info', {
status: 200,
body: { status: 200, data: { ...loggedInUser, username: UUID_USERNAME } }
});
await mock.override('GET', '/event/list', emptyEventList);
await page.goto('/app/');
await page.waitForLoadState('networkidle');
await expect(page.getByRole('dialog')).toBeVisible();
await mock.override('PATCH', '/user/update', {
status: 409,
body: { status: 409, msg: '用户名已被使用' }
});
const dialog = page.getByRole('dialog');
await dialog.locator('input[name="username"]').fill('taken_name');
await dialog.locator('input[name="nickname"]').fill('Alice');
await page.getByRole('button', { name: /保存并继续/i }).click();
// Error alert is shown
await expect(page.getByText('用户名已被使用')).toBeVisible();
// Dialog remains open
await expect(page.getByRole('dialog')).toBeVisible();
});
```
- [ ] **Step 2: Run the E2E tests**
Run: `pnpm test:e2e --grep onboarding`
Expected: 3 tests pass
Inputs are located via `dialog.locator('input[name="..."]')` — scoped to the dialog to avoid any conflicts with other forms on the page.
- [ ] **Step 3: Commit**
```bash
git add tests/e2e/onboarding.spec.ts
git commit -m "test(onboarding): add E2E tests for UUID-username onboarding dialog"
```
---
## Task 6: Final lint, check, build, and commit
- [ ] **Step 1: Lint**
Run: `pnpm lint:fix`
Expected: no unfixable errors (formatting corrections are fine)
- [ ] **Step 2: Type check**
Run: `pnpm check`
Expected: no errors
- [ ] **Step 3: Build**
Run: `pnpm build`
Expected: build succeeds with no TypeScript errors
- [ ] **Step 4: Commit if lint/format made changes**
Only needed if `pnpm lint:fix` changed any files:
```bash
git add -p # stage only formatting changes
git commit -m "chore: lint fixes for onboarding dialog"
```

388
docs/superpowers/specs/2026-04-14-events-design.md Normal file
View File

@@ -0,0 +1,388 @@
# M3 — Events (Design Spec)
Status: **Draft** — 2026-04-14. Third feature milestone (after M1 Foundation, M1.5 Test Infrastructure, M2 Profile). Adds the user-facing events surface: list with tab filter, event detail, and the join flow (simple + KYC).
## Goal
Ship the user-facing events feature: browse all events at `/events` (with an "已加入" tab filter), view event details at `/events/[eventId]`, and join events — either directly (confirm dialog + server action) or via the KYC identity-verification state machine (`prompt → methodSelection → pending → success/failed`).
## Non-goals
- **`/joined-events` route.** The React reference redirects it to `/events`. We skip the route entirely — the "已加入" tab on `/events` covers the use case.
- **Agenda sections.** 活动日程 (public schedule) and 我的议程 (personal agenda / submission dialog) are deferred to M4, when admin-side agenda management also lands.
- **Check-in QR flow.** The "签到" button renders with its correct enabled/disabled state (M3), but the QR dialog is M6. A tooltip or disabled state communicates this to users.
- **Event pagination.** Load `limit=50, offset=0` — sufficient for the foreseeable future. Add URL-param pagination later if the list actually grows.
- **NicknameNeeded dialog.** Present in the React reference's events list but not in scope for M3.
- **Admin event CRUD.** M4.
## Architecture
### Routes
```
src/routes/(app)/
├── events/
│ ├── +page.server.ts # load: getEventList(offset=0, limit=50)
│ ├── +page.svelte # tab switcher + EventCard grid
│ └── [eventId]/
│ ├── +page.server.ts # load: getEventInfo + optional getEventGuide
│ │ # actions: join, kycSession
│ └── +page.svelte # event detail + join/KYC dialog
└── kyc-status/
└── +server.ts # POST: proxies postKycQuery → {status}
```
The `(app)` group's `+layout.server.ts` already gates anonymous access — no per-route auth check needed.
### Event list load
```ts
// (app)/events/+page.server.ts
export const load = async (event) => {
const api = createApiClient(event);
const result = await loadSdk(() =>
getEventList({ client: api, query: { offset: 0, limit: 50 } })
);
return { events: result.data?.items ?? [] };
};
```
### Event detail load
```ts
// (app)/events/[eventId]/+page.server.ts
export const load = async (event) => {
const api = createApiClient(event);
const eventData = await loadSdk(() =>
getEventInfo({ client: api, query: { event_id: event.params.eventId } })
);
const ev = eventData.data!;
const descriptionHtml = ev.description
? marked.parse(Buffer.from(ev.description, 'base64').toString('utf-8'))
: null;
let attendanceGuideHtml: string | null = null;
if (ev.is_joined) {
const guide = await callSdk(() =>
getEventGuide({ client: api, query: { event_id: event.params.eventId } })
);
if (isOk(guide)) {
const raw = unwrapOk(guide).data?.attendance_guide;
attendanceGuideHtml = raw ? marked.parse(Buffer.from(raw, 'base64').toString('utf-8')) : null;
}
// guide failure is non-fatal — page still renders without the card
}
return { ev, descriptionHtml, attendanceGuideHtml };
};
```
404 on event detail → `loadSdk` throws SvelteKit `error(404, '该活动不存在或已被删除。')`.
### Event detail actions
```ts
export const actions = {
// Simple join (no KYC)
join: async (event) => {
const fd = await event.request.formData();
const event_id = fd.get('event_id') as string;
const kyc_id = (fd.get('kyc_id') as string) || undefined;
const api = createApiClient(event);
const result = await callSdk(() => postEventJoin({ client: api, body: { event_id, kyc_id } }));
if (isErr(result)) return fail(400, { message: unwrapErr(result).message });
return {};
},
// KYC session creation
kycSession: async (event) => {
const fd = await event.request.formData();
const method = fd.get('method') as 'cnrid' | 'passport';
const identity =
method === 'cnrid'
? { type: 'cnrid', name: fd.get('name'), cnrid: fd.get('cnrid') }
: { type: 'passport', passportId: fd.get('passportId') };
const api = createApiClient(event);
const result = await callSdk(() =>
postKycSession({
client: api,
body: {
type: method,
identity: btoa(JSON.stringify(identity))
}
})
);
if (isErr(result)) return fail(400, { message: unwrapErr(result).message });
const { status, kyc_id, redirect_uri } = unwrapOk(result).data!;
return { status, kycId: kyc_id, redirectUri: redirect_uri };
}
};
```
### KYC status endpoint
```ts
// (app)/kyc-status/+server.ts
export const POST: RequestHandler = async (event) => {
const fd = await event.request.formData();
const kyc_id = fd.get('kyc_id') as string;
const api = createApiClient(event);
const result = await callSdk(() => postKycQuery({ client: api, body: { kyc_id } }));
if (isErr(result)) return json({ status: 'failed' });
return json({ status: unwrapOk(result).data?.status ?? 'failed' });
};
```
Client polls this with `POST /app/kyc-status` (FormData, `kyc_id` field). Auth stays server-side throughout.
### KYC state machine
`src/lib/stores/kyc.svelte.ts` — a Svelte 5 factory function replacing Zustand. Uses a closure over `$state` variables and exposes getters; no class, no `this`. The polling `$effect` lives inside the factory so the component needs no `$effect` block of its own — Svelte ties the effect to the lifecycle of the component that calls `createKycState`.
```ts
import { base } from '$app/paths';
import { deserialize } from '$app/forms';
import { invalidateAll } from '$app/navigation';
type KycStage = 'prompt' | 'methodSelection' | 'pending' | 'success' | 'failed';
export function createKycState(eventId: string) {
let stage = $state<KycStage>('prompt');
let kycId = $state<string | null>(null);
let open = $state(false);
async function joinWithKyc() {
const fd = new FormData();
fd.set('event_id', eventId);
fd.set('kyc_id', kycId!);
const res = await fetch(`${base}/events/${eventId}?/join`, { method: 'POST', body: fd });
const result = deserialize(await res.text());
stage = result.type === 'success' ? 'success' : 'failed';
if (result.type === 'success') await invalidateAll();
}
$effect(() => {
if (stage !== 'pending') return;
let stopped = false;
(async () => {
while (!stopped && stage === 'pending') {
await new Promise((r) => setTimeout(r, 1000));
if (stopped) return;
try {
const fd = new FormData();
fd.set('kyc_id', kycId!);
const res = await fetch(`${base}/kyc-status`, { method: 'POST', body: fd });
const { status } = await res.json();
if (status === 'success') {
await joinWithKyc();
return;
}
if (status === 'failed') {
stage = 'failed';
return;
}
// 'pending' → continue loop
} catch {
stage = 'failed';
return;
}
}
})();
return () => {
stopped = true;
};
});
return {
get stage() {
return stage;
},
set stage(v: KycStage) {
stage = v;
},
get kycId() {
return kycId;
},
set kycId(v: string | null) {
kycId = v;
},
get open() {
return open;
},
setOpen(v: boolean) {
open = v;
if (v) {
stage = 'prompt';
kycId = null;
}
},
joinWithKyc
};
}
```
Component usage — `eventId` is baked in at creation time, `joinWithKyc` takes no arguments:
```svelte
<script>
const { event } = $props();
const kyc = createKycState(event.event_id);
</script>
```
One instance per component that renders a join dialog (`EventCard` on the list, the detail page). Not a singleton — each mount is isolated. The `use:enhance` kycSession callback calls `await kyc.joinWithKyc()` directly; so does the polling loop inside `createKycState`.
## Schemas
`src/lib/schemas/kyc.ts`:
```ts
export const cnridSchema = z.object({
method: z.literal('cnrid'),
name: z.string().trim().min(2, '姓名应至少 2 个字符').max(10, '姓名应不超过 10 个字符'),
cnrid: z.string().length(18, '身份证号应为 18 位')
});
export const passportSchema = z.object({
method: z.literal('passport'),
passportId: z.string().length(9, '护照号应为 9 个字符')
});
export const kycSchema = z.discriminatedUnion('method', [cnridSchema, passportSchema]);
```
Client-side validation only (Zod in `<script>`) — the server action trusts the encoded identity blob, which the backend validates.
## UI components
### `EventCard.svelte`
Props: `event: ServiceEventEventListItems`. Located at `src/lib/components/EventCard.svelte`.
**Visual structure** — three zones separated by a dashed divider before the action row:
1. **Cover image zone** (`aspect-video`, `overflow-hidden`) — image with a `linear-gradient(to top, …/0.96 0%, …/0.3 55%, transparent)` overlay. Text overlaid at the bottom: event name (`font-sans font-semibold text-[0.9375rem] tracking-tight text-white`), date range in mono (`font-mono text-[0.575rem] tracking-widest text-white/55`). Type badge (`Official` / `Party`) pinned `top-2.5 right-2.5` — mono uppercase, `0.575rem`, `border rounded-[--radius-field]`, colored with `--secondary` / `--error` palette. Empty `thumbnail` → gradient placeholder div.
2. **Body zone** (`p-3 flex flex-col gap-2`) — subtitle (`text-[0.75rem] text-base-content/50 line-clamp-2`); status badge row (mono uppercase `0.575rem`, border-only pill, `gap-1.5`): `需要 KYC` (ShieldCheck, warning palette), `已报名` (Ticket, success palette), `进行中` (primary palette).
3. **Action zone** — `border-t border-dashed border-base-300/90 pt-2 flex gap-2`. Two equal-width buttons:
- Not joined → `btn btn-primary` "加入活动" + `btn btn-ghost` "活动详情" link.
- Joined, can check in → `btn btn-primary` "签到" (disabled, M6) + "活动详情".
- Joined, outside date range → disabled "未到签到时间" + "活动详情".
- Joined, checked in → disabled "已签到" + "活动详情".
### Events list page header
```
活动 ← font-sans font-semibold text-[1.75rem] tracking-tight
EVENTS · BROWSE ← font-mono text-[0.6rem] tracking-[0.2em] uppercase opacity-35
```
Separated from the tabs by a `border-b border-base-300/70`.
Tab switcher: `tabs` with underline style — `border-b border-base-300/70`. Active tab: `border-b-2 border-primary text-base-content`. Inactive: `text-base-content/40`. The "已加入" tab carries a mono pill counter (`font-mono text-[0.58rem] bg-primary/12 text-primary border border-primary/28 rounded-full px-1.5`).
### Event detail page layout
Two-column on `lg` (`grid-cols-[1fr_290px]`), single column on mobile. Sidebar card is `sticky top-5`.
**Hero:** `rounded-[--radius-box] overflow-hidden`, `aspect-[16/7]`. Gradient: `linear-gradient(to top, oklch(20% 0.015 253 / 0.97) 0%, oklch(20% 0.015 253 / 0.52) 42%, transparent 100%)`. Title `font-sans font-semibold text-[1.875rem] tracking-tight text-white`, subtitle `text-[0.8125rem] text-white/65`. Badges (same mono pill style as EventCard) shown before the title in the overlay.
Markdown cards (`活动介绍`, `参会指南`) use `prose prose-sm dark:prose-invert max-w-none` — `@tailwindcss/typography` is already installed.
### KYC dialog panels (bits-ui `Dialog.Content max-w-md`)
Mapping from reference to DaisyUI/bits-ui — content identical to React reference:
**`prompt`** — Title "需要身份认证". Body: privacy policy paragraphs + three-item `<ul>` (AES-256 加密 / 仅用于本次活动 / 30 天内销毁). Footer: "下一步" `btn btn-primary`.
**`methodSelection`** — Title "选择身份认证模式". Two option cards (`grid-cols-2 gap-3`): 身份证 (`CreditCard` icon) and 护照 (`BookOpen` icon). Selected card: `border-primary bg-primary/5`. Selecting reveals the relevant form inline. Submit: "开始认证" `btn btn-primary`, disabled until valid and not pristine. The form `action` must be an **absolute path** — `{base}/events/{eventId}?/kycSession` — so it works from both the list page and the detail page. On `use:enhance` return: if `status === 'processing'` → `window.open(redirectUri, '_blank')` + set `kyc.stage = 'pending'`; if `status === 'success'` → call join directly.
**`pending`** — Title "等待身份认证结果". Body "认证页面已打开。正在等待认证服务器回传数据..." + large centered `span.loading.loading-spinner.loading-lg` (replacing React's `HashLoader`). No footer.
**`success`** — Title "成功". Body "已完成身份认证。" + large centered `<Check size={100} />`. Footer: "完成" `btn btn-primary` → close + `invalidateAll()`.
**`failed`** — Title "失败". Body "提交身份认证失败，请重试。" + large centered `<X size={100} />`. No footer — closing dialog resets stage to `prompt`.
### Simple join dialog
Title "加入活动". Body "是否确认要加入活动 {ev.name}？". Footer: `取消` (close, `btn btn-ghost`) + `加入` (`btn btn-primary`, shows `loading-spinner` while submitting). Form `method="POST" action="{base}/events/{eventId}?/join"` (absolute path — works from both list and detail page) with hidden `event_id` input.
## Error handling
- **Event list 500 / network** → `loadSdk` throws; root `+error.svelte` renders generic error.
- **Event detail 404** → `error(404, '该活动不存在或已被删除。')`.
- **Attendance guide failure** → `callSdk` (not `loadSdk`) — failure returns `null`; 参会指南 card simply doesn't render. Non-fatal.
- **`?/join` failure** → `fail(400, { message })` → inline `alert alert-error alert-soft` in join dialog.
- **`?/kycSession` failure** → same; error shown in method-selection form, stage stays at `methodSelection`.
- **`/app/kyc-status` error / network** → polling catch block sets `kyc.stage = 'failed'`.
- **Dialog closed mid-flow** → `$effect` cleanup sets `stopped = true`, loop exits. `setOpen(false)` resets stage to `prompt` for next open.
## Testing
### Unit (Vitest)
- `src/lib/stores/kyc.svelte.test.ts` — state transitions: `prompt → methodSelection`, `methodSelection → pending`, `pending → success`, `pending → failed`; `setOpen(false)` resets stage; `setOpen(true)` always starts at `prompt`.
- `src/lib/schemas/kyc.test.ts` — `cnridSchema` accepts valid / rejects short cnrid / rejects short name; `passportSchema` accepts valid / rejects wrong length; `kycSchema` discriminates correctly.
### E2E (Playwright against mock)
All tests import from `tests/e2e/helpers/fixtures`. Every endpoint overridden inline.
1. **Event list renders** — override `GET /event/list`; assert event names and tab labels visible.
2. **"已加入" tab filter** — list with one joined + one unjoined event; switch tab; assert only joined event visible.
3. **Event detail renders (joined)** — override `GET /event/info` (is_joined: true) + `GET /event/guide`; assert title, badges, attendance guide card.
4. **Simple join success** — detail page (not joined, enable_kyc: false); override `POST /event/join` 200; click "立即加入" → dialog → "加入"; assert "已报名" badge appears.
5. **Simple join error** — override `POST /event/join` 400 `{msg: '活动已满'}`; assert error alert in dialog.
6. **KYC prompt → method selection** — detail page (enable_kyc: true); click "立即加入"; assert "需要身份认证" title; click "下一步"; assert method cards visible.
7. **KYC success path (cnrid)** — fill 身份证 form; override `POST /kyc/session` returning `{status: 'success', kyc_id: 'k1'}`; override `POST /event/join` 200; submit; assert "成功" stage and "已报名" badge after dismiss.
8. **KYC processing → success via polling** — override `POST /kyc/session` returning `{status: 'processing', kyc_id: 'k1', redirect_uri: 'http://example.com'}`; override `POST /kyc/query` returning `{status: 'success'}` (the mock intercepts the backend call that `+server.ts` makes, not the SvelteKit route itself); override `POST /event/join` 200; assert "等待身份认证结果" stage then "成功".
9. **KYC failed** — override `POST /kyc/query` returning `{status: 'failed'}`; assert "失败" stage.
## New packages
- `dayjs` — date formatting in `EventCard` and event detail.
- `marked` + `@types/marked` — server-side base64 markdown → HTML.
`@tailwindcss/typography` is already installed (confirmed in `package.json`).
## Deliverables
1. `pnpm add dayjs marked` + `pnpm add -D @types/marked`.
2. `src/lib/schemas/kyc.ts` + `src/lib/schemas/kyc.test.ts`.
3. `src/lib/stores/kyc.svelte.ts` (`createKycState` factory function) + `src/lib/stores/kyc.svelte.test.ts`.
4. `src/lib/components/EventCard.svelte`.
5. `src/routes/(app)/events/+page.server.ts` + `+page.svelte`.
6. `src/routes/(app)/events/[eventId]/+page.server.ts` (load + `join` + `kycSession` actions) + `+page.svelte` (detail layout + both dialogs).
7. `src/routes/(app)/kyc-status/+server.ts` (POST proxy for `postKycQuery`).
8. `tests/e2e/events.spec.ts` — nine E2E tests.
9. `docs/superpowers/overview.md` — flip M3 status to ✅ shipped, link spec + plan.
## Attention points
- **`marked.parse()` returns `string | Promise<string>`** in marked v5+. Call with `{ async: false }` option or use `marked.parseInline` for inline-only content to get a synchronous string. Alternatively pin to marked v4 API (`marked(src)` is synchronous). Check the installed version and adapt accordingly.
- **base64 decode on the server** uses `Buffer.from(raw, 'base64').toString('utf-8')` (Node.js built-in). Do not use `atob` — it's browser-only and not available in SvelteKit server code.
- **`btoa` for KYC identity encoding** in `?/kycSession` action: Node 16+ has `btoa` globally, but prefer `Buffer.from(JSON.stringify(identity)).toString('base64')` for consistency with the decode side.
- **KYC polling cleanup is critical.** If the user closes the dialog mid-poll, the `$effect` cleanup must stop the loop. Verify the `stopped` flag is checked after every `await` in the loop.
- **`invalidateAll()` after successful join** re-runs the event detail load, which calls `getEventInfo` again and may also call `getEventGuide` (since `is_joined` is now true). Register both overrides in the relevant E2E tests.
- **`window.open` in KYC processing** may be blocked by popup blockers. The reference opens it unconditionally; we mirror that. No fallback needed for M3.
- **`?/join` is called both from the simple join dialog and programmatically from `joinWithKyc`** in the KYC flow. The hidden `event_id` input must be present in both call paths. In the programmatic path, append `event_id` to the FormData manually.
- **Join/KYC dialog appears on both the list and detail pages.** `EventCard` on `/events` also has "加入活动" — so form actions must use absolute paths (`{base}/events/{eventId}?/join`, `{base}/events/{eventId}?/kycSession`) rather than relative `?/action` syntax, which would resolve to the current page's actions. The `?/join` and `?/kycSession` actions live on `events/[eventId]/+page.server.ts`; absolute paths make them reachable from `/events` too. `invalidateAll()` after a list-page join re-fetches `getEventList` and the card updates in place.
- **Tab filter is client-only `$state`** — `is_joined` comes from the server-loaded list. If the user joins an event (action → `invalidateAll()`), the fresh load re-fetches the list and the filter state resets to `'all'`. This is expected behavior.
- **`prose dark:prose-invert`** requires `@tailwindcss/typography` to be wired into the Tailwind config. Verify it's listed in the `plugins` array in `tailwind.config.ts` (or equivalent DaisyUI 5 config location) — it's in `package.json` but may not be activated.
- **Event type badge** — the React reference uses `'official'` / `'party'` strings from `event.type`. Map: `official` → DaisyUI `badge-secondary`-equivalent; `party` → `badge-error`-equivalent (matching the React `destructive` variant).
## Design rationale
**Why tab filter instead of a separate `/joined-events` route?** The React reference redirects `joined-events` to `/events` — the join status is a view filter, not a fundamentally different page. A tab on `/events` is simpler (one route, one load) and matches user mental models better (the joined events are a subset of all events, not a separate list).
**Why server actions for `join` and `kycSession`, `+server.ts` for polling?** Server actions fit user-initiated form submissions — `use:enhance` integrates cleanly, SvelteKit handles invalidation. The polling loop is a background programmatic operation: it runs silently, is not triggered by a form submit, and needs plain JSON back (not SvelteKit's ActionResult format). A `+server.ts` endpoint returns clean JSON and avoids the `deserialize` dance in a tight loop.
**Why non-fatal attendance guide failure?** The guide requires `is_joined: true` and a separate API call. A transient failure shouldn't block the whole event detail page — the cover, description, and join action are the primary content. Silently omitting the guide card on failure is the right UX.
**Why no pagination?** Offset pagination adds URL param complexity and a second server load for little gain. A community events platform at this scale will not exceed 50 events meaningfully. Re-evaluate when it becomes a real constraint.

308
docs/superpowers/specs/2026-04-14-foundation-design.md Normal file
View File

@@ -0,0 +1,308 @@
# Foundation — Design
**Date:** 2026-04-14
**Milestone:** #1 of the cms-client → SvelteKit rewrite
**Status:** Approved
## Context
The existing `~/Projects/cms-client` is a React 19 SPA using TanStack Router + Query + Form, shadcn/UI, Radix, Zustand, and an OpenAPI-generated axios client. It is being rewritten (not ported 1:1) into this SvelteKit project.
The rewrite is decomposed into seven sequential milestones, each with its own spec → plan → implementation cycle:
1. **Foundation** (this spec) — app shell, API client, auth, workbench layout
2. Profile
3. Events (user-facing)
4. Admin events
5. Admin users & stats
6. Check-in / QR scanner
7. Polish (Storybook-equivalent, container/Caddy updates, etc.)
## Goal
Ship a login-gated SvelteKit app that later milestones can slot features into. Foundation delivers: working auth (magic link + httpOnly cookies + auto-refresh), the workbench shell (DaisyUI drawer sidebar + navbar), the generated API client wired for server-side use, and basic testing rails. No feature routes yet — just the frame.
## Stack
- **SvelteKit 2** on **Svelte 5** (runes), `adapter-node`, `paths.base = '/app'`
- **DaisyUI 5** with the existing custom dark theme in `src/routes/layout.css`; dark-only, no toggle
- **API**: `@hey-api/openapi-ts` generating a plain fetch SDK (no TanStack Query equivalent); called from `+page.server.ts` loads and form actions
- **Auth**: httpOnly cookies for access + refresh tokens, read in `hooks.server.ts`, auto-refresh server-side (access token is short-lived — ~15s)
- **Forms**: `sveltekit-superforms` + Zod
- **UI primitives**: `bits-ui` for behavior, DaisyUI classes for style
- **Icons**: `@lucide/svelte`
- **CAPTCHA**: `svelte-turnstile` for Cloudflare Turnstile
- **Result types**: `option-t` (`Result<T, E>` via `plain_result`) for unified SDK error handling
- **Testing**: Vitest + Playwright. Storybook-equivalent not considered.
## Directory Layout
```
src/
├── app.d.ts # App.Locals: user, accessToken
├── app.html
├── hooks.server.ts # Session read + proactive refresh + guard
├── lib/
│ ├── api/ # Generated SDK (pnpm gen target — DO NOT EDIT; prettier + eslint ignored)
│ │ ├── client.gen.ts
│ │ ├── sdk.gen.ts
│ │ ├── types.gen.ts
│ │ └── zod.gen.ts
│ ├── server/
│ │ ├── api.ts # createApiClient(event) — SDK + 401 interceptor + refresh/retry
│ │ ├── session.ts # cookie helpers + single-flight refresh
│ │ └── errors.ts # SDK error → SvelteKit error() / fail() mapper
│ ├── components/
│ │ └── ui/ # Bits UI + DaisyUI wrappers (added as feature milestones need them)
│ ├── nav.ts # Sidebar nav items (mirrors React navData.ts)
│ ├── stores/ # Svelte 5 runes classes (replaces Zustand; empty in Foundation)
│ └── utils/ # cn(), formatters (empty/minimal in Foundation)
├── routes/
│ ├── +layout.svelte # <html data-theme="dark">, Toaster slot
│ ├── +layout.server.ts # surfaces locals.user to all pages
│ ├── +error.svelte # global error page
│ ├── authorize/
│ │ ├── +page.server.ts # superforms load + magic-link action
│ │ └── +page.svelte # email + Turnstile form
│ ├── token/
│ │ └── +page.server.ts # code exchange → set cookies → redirect
│ ├── magic-link-sent/
│ │ └── +page.svelte # "check your email"
│ ├── logout/
│ │ └── +page.server.ts # POST action: clear cookies → redirect
│ └── (app)/
│ ├── +layout.server.ts # requireUser(); returns user + nav
│ ├── +layout.svelte # DaisyUI drawer shell (navbar + sidebar)
│ └── +page.svelte # placeholder dashboard
├── static/
└── openapi-ts.config.ts # adapted from React project
```
## Request Lifecycle
```
Browser → SvelteKit node server
hooks.server.ts
1. Read access_token cookie → event.locals.accessToken
2. If token present: api.getUserInfo() (interceptor refreshes+retries on 401)
3. Set event.locals.user from result (or null on failure)
+layout.server.ts (root)
return { user: locals.user }
(app)/+layout.server.ts
if (!locals.user) throw redirect(303, '/app/authorize?redirect_to=…')
+page.server.ts (per route)
const api = createApiClient(event) // injects Authorization + event.fetch
return { data: await loadSdk(() => someEndpoint({ client: api })) }
+page.svelte
renders server-provided data; zero client fetching in the golden path
```
Form submissions: `+page.server.ts` `actions` → superforms validates → SDK call → `redirect(303)` or typed `fail()` back to the form.
## Auth Flow
### Magic-link OAuth (preserved from React app)
1. **`/authorize`** — login form.
- `load`: if `locals.user` exists, `redirect(303, '/')`. Else build OAuth params (`client_id='org_client'`, `response_type='code'`, `redirect_uri=${origin}/app/token`, freshly-generated `state`), store `state` in an httpOnly `oauth_state` cookie (CSRF pin), and return a superforms instance seeded with a Zod email schema.
- Form action: validates `{ email, turnstile_token }`, calls `api.postAuthMagicLink({ email, turnstile_token, client_id, redirect_uri, state })`, redirects to `/app/magic-link-sent?email=…`.
- Turnstile widget on the client via `svelte-turnstile`; token posted as a hidden form field. In dev, short-circuits to the literal string `turnstile_token` (matching React behavior).
2. **`/magic-link-sent`** — static screen. If `email` search param missing, redirect to `/authorize`.
3. **`/token?code=…`** — magic-link callback.
- `load`: validates `code`, reads `oauth_state` cookie (backend validates `state` on its side too), calls `api.postAuthToken({ code })`. On success: `setSessionCookies(cookies, { access_token, refresh_token })` then `redirect(303, validatedRedirectTo ?? '/')`. On failure: `redirect(303, '/app/authorize?error=invalid_code')`.
4. **`/logout`** — POST-only form action: clear cookies → `redirect(303, '/app/authorize')`.
### Cookies
| Name | Attributes | Purpose |
| --------------- | ------------------------------------------------------- | ---------------------------- |
| `access_token` | httpOnly, secure, sameSite=lax, path=/app | short-lived bearer (~15s) |
| `refresh_token` | httpOnly, secure, sameSite=lax, path=/app | long-lived refresh |
| `oauth_state` | httpOnly, secure, sameSite=lax, path=/app, maxAge=10min | CSRF pin for magic-link flow |
### Auto-refresh (15-second access tokens)
**Reactive-only.** Refresh happens inside `createApiClient(event)`'s response interceptor: on 401, single-flight refresh, update cookies + `event.locals.accessToken`, retry the request once. `hooks.server.ts` stays minimal and does not decode the JWT — the backend's 401 is the single source of truth for token validity.
```ts
// hooks.server.ts
export const handle: Handle = async ({ event, resolve }) => {
event.locals.accessToken = event.cookies.get('access_token') ?? null;
event.locals.user = null;
if (event.locals.accessToken) {
const api = createApiClient(event);
// This call itself triggers refresh+retry via the interceptor if the token is stale.
event.locals.user = await api
.getUserInfo()
.then((r) => r.data?.data ?? null)
.catch(() => null);
}
return resolve(event);
};
```
```ts
// lib/server/api.ts — relevant interceptor
client.interceptors.response.use(async (response, request, options) => {
if (response.status !== 401 || request.url.includes('/auth/refresh')) return response;
const refresh = event.cookies.get('refresh_token');
if (!refresh) return response;
const fresh = await refreshSingleFlight(refresh, event.fetch);
if (!fresh) {
clearSessionCookies(event.cookies);
return response;
}
setSessionCookies(event.cookies, fresh);
event.locals.accessToken = fresh.access_token;
const headers = new Headers(request.headers);
headers.set('Authorization', `Bearer ${fresh.access_token}`);
return event.fetch(request.url, {
method: request.method,
headers,
body: options.serializedBody ?? options.body,
signal: request.signal
});
});
```
**Single-flight refresh** — an in-memory `Map<refresh_token, Promise<TokenPair>>` in `lib/server/session.ts` collapses concurrent refreshes within a single Node process to one backend call. Fine for `adapter-node` single-process deployment. Entries are deleted on settle.
**No JWT decoding.** Cookie-vs-JWT desync bugs are impossible because we never attempt to predict validity — we just try, and react to the backend's verdict.
**Backend assumption** — refresh-token rotation must tolerate at least one grace use of an old refresh token to avoid racing two near-simultaneous tabs into a deadlock. Documented here as an integration requirement.
## Workbench Shell
The `(app)/+layout.svelte` renders the DaisyUI drawer pattern the user specified — responsive, icon-only when collapsed, full-width when open, `lg:drawer-open` so it's persistent on desktop and toggleable on mobile:
```svelte
<script lang="ts">
import { page } from '$app/state';
import { base } from '$app/paths';
import { mainNav, secondaryNav } from '$lib/nav';
let { data, children } = $props();
</script>
<div class="drawer lg:drawer-open">
<input id="app-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<nav class="navbar w-full bg-base-300">
<label for="app-drawer" class="btn btn-square btn-ghost lg:hidden" aria-label="open sidebar">
<!-- hamburger -->
</label>
<div class="px-4">NixCN CMS</div>
<div class="ml-auto">
<!-- user avatar menu (bits-ui DropdownMenu with logout form) -->
</div>
</nav>
<main class="p-4">{@render children()}</main>
</div>
<div class="drawer-side is-drawer-close:overflow-visible">
<label for="app-drawer" class="drawer-overlay" aria-label="close sidebar"></label>
<div class="flex min-h-full flex-col bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64">
<ul class="menu w-full grow">
{#each mainNav as item (item.url)}
<li>
<a
href="{base}{item.url}"
class="is-drawer-close:tooltip is-drawer-close:tooltip-right"
class:menu-active={page.url.pathname === base + item.url}
data-tip={item.title}
>
<item.icon class="size-4" />
<span class="is-drawer-close:hidden">{item.title}</span>
</a>
</li>
{/each}
</ul>
<div class="m-2 is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Toggle">
<label for="app-drawer" class="btn btn-circle btn-ghost is-drawer-open:rotate-y-180">
<!-- toggle icon -->
</label>
</div>
</div>
</div>
</div>
```
`src/lib/nav.ts` mirrors the React `navData.ts` (main: 工作台, 活动列表; secondary: 个人资料). Admin nav items are permission-gated and added in milestone 4.
## Error Handling
All hey-api SDK calls go through helpers in `lib/server/errors.ts` so error normalization is a single code path.
**Primitives**:
- `normalizeSdkError(err)` → `{ status, message }`. Handles three cases: transport errors (fetch threw) are prefixed `网络错误: …`; backend envelopes `{ status, msg?, message? }` are unwrapped as-is; unknown shapes fall back to `status=500`.
- `callSdk(() => sdkFn(...))` → `Promise<Result<T, NormalizedError>>` using `option-t`'s `plain_result`. Collapses the SDK's `{ data?, error? }` shape + transport `try/catch` into one tagged value.
- `loadSdk(() => sdkFn(...))` → `Promise<T>`. Convenience for load functions: throws SvelteKit `error(status, message)` on failure.
**Usage**:
```ts
// In a form action — keep user input, surface inline
const result = await callSdk(() => postAuthMagic({ client: api, body }));
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
const data = unwrapOk(result);
// In a load function — trigger the +error.svelte boundary
const data = await loadSdk(() => getEvents({ client: api }));
```
**Rule**: never read `result.error` / `result.data` directly from an SDK call, and never hand-roll `try/catch` around one. Always go through `callSdk` / `loadSdk`.
- `+error.svelte` at the root renders a DaisyUI-styled error page.
- Client runtime errors caught by the nearest `+error.svelte` boundary.
## Tooling
- **`src/lib/api/`** is generated code. Add to `.prettierignore` and `eslint.config.js` ignore patterns so regeneration doesn't produce lint noise or formatting churn.
## Testing
- **Vitest** — unit tests for `lib/server/session.ts` (cookie helpers, single-flight semantics).
- **Playwright** — one smoke test: anonymous visit to `/app/` redirects to `/app/authorize`, submitting an email (with mocked backend) lands on `/app/magic-link-sent`.
- Storybook / component-story tooling deferred to milestone 7.
## Deployment
- `adapter-node` builds to `build/`, runs via `node build` on port 3000.
- Containerfile + Caddy config updates are out of scope for Foundation; kept in a later polish milestone once feature parity is closer.
## Verification (what "done" looks like)
- `pnpm dev` serves `/app/`; anonymous visit redirects to `/app/authorize`.
- `/app/authorize` renders email form + Turnstile; submit (against real or mocked backend) lands on `/app/magic-link-sent?email=…`.
- `/app/token?code=…` exchanges the code, sets cookies, redirects into the app.
- Authenticated `/app/` renders the DaisyUI drawer shell; sidebar persistent on ≥lg, hamburger-toggleable below; icon-only collapsed state with tooltips; expanded state shows labels; active route highlighted.
- Reload while logged in: still logged in, no flash.
- Access token expiring mid-session triggers transparent server-side refresh; no user-visible loading.
- Logout clears cookies; back button does not restore a session.
- `pnpm gen` regenerates `src/lib/api/` from the backend OpenAPI spec.
- `pnpm check` passes (svelte-check + tsc).
- One Vitest test and one Playwright smoke test pass.
- Dark theme renders; no FOUC on reload.
## Out of Scope (deferred to later milestones)
- Feature routes: events, profile, admin, check-in
- Light theme / theme toggle
- Admin-gated nav items
- Storybook-equivalent component workbench
- Charts, markdown editor, QR scanner, DnD (evaluated per feature milestone)
- Container / Caddy config updates
- Acting as an OAuth provider for external clients
- Password or social login
- Session revocation UI
- Horizontal scaling of the Node server (single-flight refresh is per-process)
## API Base URL
The backend is always reachable via the SvelteKit app's own origin — the Vite dev proxy (`vite.config.ts`) and Caddy in production both route `/app/api/*` to the upstream. So `createApiClient` hardcodes `baseUrl = ${event.url.origin}/app/api/v1`; there is no `API_BASE_URL` env variable. If the backend ever needs to be hit from a different origin without a reverse proxy, reintroduce an env override then.
## Integration Assumptions (backend)
- `/auth/magic`, `/auth/token`, `/auth/refresh`, `/user/info` exist and match the current React client's expectations.
- Access token is a JWT with an `exp` claim (confirmed).
- Refresh-token rotation tolerates one grace use of the previous refresh_token to handle concurrent-tab races.

552
docs/superpowers/specs/2026-04-14-profile-design.md Normal file
View File

@@ -0,0 +1,552 @@
# M2 — Profile (Design Spec)
Status: **Draft** — 2026-04-14. Second feature milestone (after M1 Foundation + M1.5 Test Infrastructure). Adds the `/profile` (own) and `/profile/[userId]` (other) routes — the first user-facing CRUD surface in the rewrite.
## Goal
Ship the user profile feature: view + edit own profile at `/profile`, view (only) any other user's profile at `/profile/[userId]`. Everyone — including admins — uses the same view-only mode for other users; admin profile-editing is explicitly out of scope for the entire rewrite (the React reference's `patchUserUpdateByUserId` is not being ported).
## Non-goals
- **Admin cross-edit.** No route or component calls `patchUserUpdateByUserId`. M5's admin scope is limited to permission-level changes via a different endpoint.
- **Bio editing.** The `bio` field exists on the SDK type but is markdown-encoded; deferred to **M4** along with the markdown editor library decision (`bytemd` / `marked` candidates).
- **Avatar upload.** URL input only — backend has no upload endpoint, the React reference also uses URL input.
- **DiceBear / generated avatar fallback.** Initial-letter `avatar-placeholder` (matching the M1 navbar) is sufficient.
- **Permission badge color encoding.** A single `badge-soft badge-primary` for everyone; we don't tier the badge color per level.
- **Social links.** Backend doesn't expose them.
## Architecture
### Routes
```
src/routes/(app)/profile/
├── +page.server.ts # redirect-only: /profile → /profile/<own_user_id>
├── [userId]/
│ ├── +page.server.ts # the real profile page — load + update action
│ └── +page.svelte # renders ProfileCard; edit surface gated by isSelf
```
`/profile/[userId]` is the single canonical URL for every profile — own and other. The bare `/profile` route only exists as a convenience redirect so the nav entry can stay short and id-free. Matches the copy-link output (clicking your own copy-link opens the same URL you already see in the address bar when viewing your profile).
The `(app)` route group already gates anonymous access (M1 redirects to `/authorize`). `secondaryNav` in `src/lib/nav.ts` keeps `/profile` as its target — the entry stays stable regardless of who's logged in; the redirect handles the per-user resolution.
### Shared component
`src/lib/components/ProfileCard.svelte` takes `{ user, editable, form? }`:
- Renders the avatar, name block, permission badge.
- View mode: meta rows (email / username / public-flag) + edit button when `editable`.
- Edit mode (only when `editable`): superforms-bound form with field inputs, cancel + save.
Internal `$state mode: 'view' | 'edit'`. Cancel is client-only — flips `mode` back, no server roundtrip. When `editable` is false (viewing another user's id), the component never renders the edit button and the `form` prop is not passed.
### Schema + helpers
`src/lib/schemas/profile.ts`:
```ts
export const profileSchema = z.object({
username: z
.string()
.trim()
.min(3, '用户名至少 3 个字符')
.max(32, '用户名最长 32 个字符')
.regex(/^[a-zA-Z0-9_]+$/, '用户名只能包含字母、数字和下划线'),
nickname: z.string().trim().max(64).optional(),
subtitle: z.string().trim().max(128).optional(),
avatar: z
.string()
.trim()
.max(512)
.regex(/^(https?:\/\/|$)/, '头像必须是 http(s) 链接')
.optional(),
allowPublic: z.boolean().default(false)
});
```
`username` is required (always present on the user record) — client-side rules are reasonable defaults; the backend's actual constraints (real min/max, allowed chars, reserved names) override at submit time and surface as field-level errors.
camelCase on the client; the action layer maps `allowPublic` → `allow_public` when calling `patchUserUpdate`. The backend's `ServiceUserUserInfoUpdateData` is fully snake_case with all fields optional (verified at `src/lib/api/types.gen.ts:301`).
`src/lib/permissions.ts` exports `permissionLabel(level: number): string` with the mapping ported from `~/Projects/cms-client/src/lib/permissions.ts`:
| Level | Label |
| ----- | ------------ |
| 0 | 封禁 |
| 5 | 受限 |
| 10 | 普通用户 |
| 15 | 开发者 |
| 20 | 签到管理员 |
| 30 | 社区活动主办 |
| 40 | 官方管理员 |
| 50 | 系统管理员 |
Unknown levels fall back to `Lv{n}`.
### Data flow
**Bare redirect `/profile/+page.server.ts`:**
```ts
import { redirect } from '@sveltejs/kit';
import { resolve } from '$app/paths';
export const load = (event) => {
const userId = event.locals.user?.user_id;
if (!userId) redirect(302, resolve('/authorize')); // belt-and-suspenders; the (app) guard handles this first
redirect(302, resolve('/profile/[userId]', { userId }));
};
```
No `+page.svelte` for this route — the load function always redirects.
**Canonical route `/profile/[userId]/+page.server.ts`:**
```ts
const isSelf = params.userId === event.locals.user?.user_id;
const api = createApiClient(event);
const sdkCall = isSelf
? () => getUserInfo({ client: api })
: () => getUserInfoByUserId({ client: api, path: { userId: params.userId } });
const res = await loadSdk(sdkCall);
const user = res.data;
const form = isSelf
? await superValidate(
{
username: user.username,
nickname: user.nickname,
subtitle: user.subtitle,
avatar: user.avatar,
allowPublic: user.allow_public
},
zod(profileSchema)
)
: undefined;
return { user, isSelf, form };
```
**`update` action (same file — only self can edit):**
```ts
export const actions = {
update: async (event) => {
const { params, request, locals } = event;
if (params.userId !== locals.user?.user_id) {
error(403, '无权修改他人资料');
}
const form = await superValidate(request, zod(profileSchema));
if (!form.valid) return fail(400, { form });
const api = createApiClient(event);
const result = await callSdk(() =>
patchUserUpdate({
client: api,
body: {
username: form.data.username,
nickname: form.data.nickname,
subtitle: form.data.subtitle,
avatar: form.data.avatar,
allow_public: form.data.allowPublic
}
})
);
if (isErr(result)) {
const msg = unwrapErr(result).message;
const field = /用户名|username/i.test(msg) ? 'username' : '';
return setError(form, field, msg);
}
return { form };
}
};
```
Superforms auto-invalidates → `load` re-runs → fresh user data renders in view mode.
The `isSelf` server-side check on `update` is the only authorization gate — the action URL (`?/update`) is the same regardless of which profile is being viewed, so an attacker on `/profile/<someone_else>` attempting to POST to `?/update` gets a 403 server-side. The client-side edit button is also gated on `isSelf` (from the page data).
### Typography system (introduced in M2, adopted app-wide)
M1 shipped with system sans + DaisyUI defaults. M2 introduces a three-face type system and retrofits it across the two M1 auth pages so consistency holds from M2 onward.
**Faces:**
- **`Fraunces`** (variable, italic cuts) — display serif. Page titles, section labels, meta-row labels, permission-badge level numeral. Installed via `@fontsource-variable/fraunces`.
- **`IBM Plex Sans`** — body sans. Default for all prose, form inputs, button labels. Replaces the system font fallback. Installed via `@fontsource/ibm-plex-sans`.
- **`IBM Plex Mono`** — identifiers. Email addresses, usernames, user IDs, timestamps, permission-badge text prefix. Installed via `@fontsource/ibm-plex-mono`.
- **Chinese fallback chain:** `Noto Sans SC` / `Noto Serif SC` so the mixed-script weight stays even. Installed via `@fontsource/noto-sans-sc` and `@fontsource/noto-serif-sc`.
**Wiring:** fonts imported at `src/app.html` head (self-hosted via `@fontsource*` imports from `src/routes/+layout.svelte` or a CSS `@import` in `src/routes/layout.css` — implementation decides). Tailwind gets three font-family utilities via the DaisyUI 5 custom theme extension (`--font-display`, `--font-sans`, `--font-mono`) mapped to the three faces.
**Retrofit scope:** `src/routes/authorize/+page.svelte` and `src/routes/magic-link-sent/+page.svelte` — their `card-title`s get the display serif; no other structural changes. The navbar (`src/routes/(app)/+layout.svelte`) keeps its current DaisyUI avatar idiom; only the brand wordmark picks up the display face.
### UI (DaisyUI 5 idioms + M2 type system)
Polished from context7-fetched DaisyUI docs in the brainstorm, with distinctive moves from the `/tmp/profile-mockup.html` study that landed as approved. The card uses the project's standard `card card-border bg-base-100 shadow-xl` shell with `card-body gap-6`.
**Distinctive treatments** (documented here so implementation doesn't drift back to DaisyUI defaults):
- **Page title** (`个人资料`) — display serif, italic, `text-2xl`, low letter-spacing. Accompanied by a mono uppercase subtitle (`PROFILE · VIEW` or `PROFILE · EDIT`) at `text-xs opacity-60 tracking-widest`.
- **Permission badge** — custom bordered pill (NOT `badge-soft`). Structure: `<span>` container with `inline-flex items-baseline gap-1 border border-primary/40 text-primary rounded-[--radius-field] px-2 py-1`. Inside, the level numeral (`Lv30`) in display-serif italic at `text-sm`, followed by the label (`社区活动主办`) in mono-uppercase at `text-xs tracking-widest`. This is the **one distinctive accent** used nowhere else in M2.
- **Meta-row labels** (`邮箱`, `用户名`, `公开资料`) — display serif italic at `text-sm opacity-60`. Values stay in body sans; `email` and `username` values use mono.
- **Copy-profile-link affordance (view mode only)** — replaces the instinct to display the raw `user_id` UUID. A mono uppercase button (`复制主页链接`) with a small link icon, `border border-dashed border-base-300`, anchored in the `card-actions` row opposite the Edit button. On click, writes `${origin}/app/profile/${user_id}` to the clipboard via `navigator.clipboard.writeText(...)`; label swaps to `已复制` for 1.5s and the border flips to `solid border-success/50 text-success`, then reverts. Edit mode shows a mono `未保存的更改` caption in the same slot instead (no copy action while editing).
- **Field labels in edit mode** — display serif italic at `text-sm opacity-60`. Overrides the default DaisyUI `label` text.
- **Toggle caption** (for `allow_public`) — mono `text-xs opacity-60` `ALLOW_PUBLIC` tag anchored right-aligned in the toggle row. Identifier-style tag reinforces "this flag has a backend key".
- **Section divider** (`基本资料`) — label in display serif italic at `text-sm opacity-60`, followed by a full-width `1px` hairline (`border-b border-base-300`) extending to the right edge of the card body. Used once per card; no standalone `<hr />` elsewhere.
- **Avatar ring (when avatar URL set)** — double ring: `ring-2 ring-primary ring-offset-2 ring-offset-base-100`. Placeholder avatar (initial letter) uses the display serif.
- **Grain overlay (optional, deferred)** — the mockup uses a 4% SVG noise overlay for atmosphere. Nice-to-have; implement in M7 polish if we miss it, not blocking for M2.
The card shell, `card-actions`, `btn btn-primary`/`btn btn-ghost`, `alert alert-error alert-soft`, `fieldset` + `<label class="input">` composite inputs, and `toggle toggle-primary` remain standard DaisyUI per the project's conventions.
**Full markup reference:** the approved mockup at `/tmp/profile-mockup.html` is the canonical visual reference. Svelte markup sketch below captures the key structure with Tailwind utilities pointing at the M2 type system. Classes prefixed `font-display` / `font-sans` / `font-mono` map to Fraunces / IBM Plex Sans / IBM Plex Mono via the Tailwind theme extension.
**Header row:**
```svelte
<div class="grid grid-cols-[auto_1fr] items-start gap-6">
{#if user.avatar}
<div class="avatar">
<div class="w-24 rounded-full ring-2 ring-primary ring-offset-2 ring-offset-base-100">
<img src={user.avatar} alt={user.nickname ?? user.email} />
</div>
</div>
{:else}
<div class="avatar avatar-placeholder">
<div class="w-24 rounded-full bg-base-300 text-base-content ring-1 ring-base-300/60">
<span class="font-display text-4xl">{initial}</span>
</div>
</div>
{/if}
<div class="flex min-w-0 flex-col gap-1.5 pt-2">
<div class="flex flex-wrap items-baseline gap-3">
<h2 class="truncate font-display text-3xl tracking-tight">
{user.nickname || user.username || user.email}
</h2>
<span
class="inline-flex items-baseline gap-1.5 rounded-[--radius-field] border border-primary/40 px-2 py-1 text-primary"
>
<span class="font-display text-sm italic">Lv{user.permission_level}</span>
<span class="font-mono text-xs tracking-widest uppercase"
>{permissionLabel(user.permission_level)}</span
>
</span>
</div>
{#if user.subtitle}
<p class="font-sans text-sm text-base-content/60 italic">{user.subtitle}</p>
{/if}
</div>
</div>
```
**Section divider + view-mode meta:**
```svelte
<p class="flex items-center gap-3 font-display text-sm text-base-content/60 italic">
基本资料
<span class="h-px flex-1 bg-base-300"></span>
</p>
<dl class="grid grid-cols-[auto_1fr] gap-x-10 gap-y-4">
<dt class="pt-0.5 font-display text-sm text-base-content/60 italic">邮箱</dt>
<dd class="font-mono text-sm break-all">{user.email}</dd>
<dt class="pt-0.5 font-display text-sm text-base-content/60 italic">用户名</dt>
<dd class="font-mono text-sm">{user.username}</dd>
<dt class="pt-0.5 font-display text-sm text-base-content/60 italic">公开资料</dt>
<dd>
<span class="badge badge-soft {user.allow_public ? 'badge-success' : 'badge-ghost'}">
{user.allow_public ? '已公开' : '未公开'}
</span>
</dd>
</dl>
```
**Copy-link + actions row (view mode):**
```svelte
<script lang="ts">
let copied = $state(false);
const profileUrl = $derived(
`${page.url.origin}${resolve('/profile/[userId]', { userId: user.user_id })}`
);
async function copyProfileLink() {
await navigator.clipboard.writeText(profileUrl);
copied = true;
setTimeout(() => (copied = false), 1500);
}
</script>
<div class="flex items-center justify-between gap-4 border-t border-base-300 pt-5">
<button
type="button"
onclick={copyProfileLink}
class="inline-flex items-center gap-1.5 rounded-[--radius-field] border border-dashed border-base-300 px-2.5 py-1.5 font-mono text-xs tracking-widest text-base-content/60 uppercase transition hover:border-solid hover:text-base-content"
class:border-solid={copied}
class:border-success={copied}
class:text-success={copied}
>
<Link class="size-3" />
{copied ? '已复制' : '复制主页链接'}
</button>
{#if editable}
<button class="btn btn-primary" onclick={() => (mode = 'edit')}>
<Pencil class="size-4" />编辑
</button>
{/if}
</div>
```
The resolved URL format is `${origin}/app/profile/<uuid>` — shareable with anyone; target users hit the 403/public gating on `/profile/[userId]`. `user_id` is a UUID string (per `src/lib/api/types.gen.ts:297`), so the raw value is never displayed — the copy action is the only surface for it.
**Edit mode** (same header as view mode, then form; cancel flips `mode` back):
```svelte
<form method="POST" action="?/update" use:enhance class="flex flex-col gap-5">
{#if $errors._errors?.length}
<div class="alert alert-soft alert-error">{$errors._errors.join('; ')}</div>
{/if}
<p class="flex items-center gap-3 font-display text-sm text-base-content/60 italic">
基本资料
<span class="h-px flex-1 bg-base-300"></span>
</p>
<div class="flex flex-col gap-1.5">
<label for="username" class="font-display text-sm text-base-content/60 italic">用户名</label>
<label class="input w-full" class:input-error={$errors.username}>
<span class="opacity-60">@</span>
<input
id="username"
class="grow"
name="username"
bind:value={$form.username}
minlength="3"
maxlength="32"
/>
</label>
{#if $errors.username}
<p class="font-mono text-xs tracking-wider text-error">{$errors.username}</p>
{:else}
<p class="font-mono text-xs tracking-wider text-base-content/60">
3–32 字符，仅字母数字下划线
</p>
{/if}
</div>
<!-- nickname, subtitle, avatar follow the same pattern:
display-serif label + composite label.input + mono helper/error line. -->
<div class="flex items-center gap-3 border-y border-dashed border-base-300 py-3">
<input
type="checkbox"
class="toggle toggle-primary"
id="allowPublic"
name="allowPublic"
bind:checked={$form.allowPublic}
/>
<label for="allowPublic" class="cursor-pointer font-sans text-sm">允许其他人查看我的资料</label>
<span class="ml-auto font-mono text-xs tracking-widest text-base-content/60">ALLOW_PUBLIC</span>
</div>
<div class="flex items-center justify-between gap-4 border-t border-base-300 pt-3">
<span class="font-mono text-xs tracking-widest text-base-content/60 uppercase"
>未保存的更改</span
>
<div class="flex gap-2">
<button type="button" class="btn btn-ghost" onclick={() => (mode = 'view')}>取消</button>
<button type="submit" class="btn btn-primary" disabled={$submitting}>
{#if $submitting}<span class="loading loading-sm loading-spinner"></span>{/if}
保存
</button>
</div>
</div>
</form>
```
The avatar URL field includes a small live-preview `<img>` inline (e.g., as the composite input's leading element when the URL is set) that falls back to the initial-letter placeholder on parse failure or empty.
## Error handling
- **`load` failures** — `loadSdk` throws SvelteKit `error()`. Surfaces in the existing app-root `+error.svelte` (`src/routes/+error.svelte`).
- 403 on `/profile/[userId]` (private profile) — surface "该用户未公开个人资料". The `loadSdk` catches the SDK error envelope; for the `[userId]` route we wrap with a try around `loadSdk` to detect 403 specifically and re-throw with the friendlier copy. All other statuses use `normalizeSdkError`'s message.
- 404 — "用户不存在".
- **`update` action failures** — `callSdk` returns `Result`. On `Err`, `setError(form, '', msg)` puts the message into `$errors._errors`; the form re-renders in edit mode with the alert visible. Input values preserved by superforms.
- **Validation failures** — `superValidate` returns invalid → `fail(400, { form })`. Field-level errors render inline via `fieldset-label text-error`.
- **Auth failures** — handled by `createApiClient`'s 401 interceptor + `(app)` group guard. Nothing profile-specific.
## Testing
### Unit (Vitest)
- `src/lib/permissions.test.ts` — table test for every documented level mapping; fallback to `Lv{n}` for unknown.
- `src/lib/schemas/profile.test.ts` — `profileSchema` accepts a valid payload, rejects `data:` URI in `avatar`, rejects oversized `nickname`/`subtitle`, accepts empty optional fields.
### E2E (Playwright against M1.5 mock)
All tests `import { test, expect } from './helpers/fixtures'` so the auto-`mock.clear()` and `loggedInUser` fixture are available. Per the M1.5 convention, every endpoint a test hits is overridden inline.
```ts
// View mode renders correctly
test('own profile renders in view mode', async ({ page, loggedInUser }) => {
await page.goto('/app/profile');
await expect(page.getByText(loggedInUser.email)).toBeVisible();
await expect(page.getByText('普通用户')).toBeVisible();
await expect(page.getByRole('button', { name: /编辑/ })).toBeVisible();
});
// Validation: username collision error maps to the username field
test('username-taken error renders on the username field', async ({ page, loggedInUser }) => {
await page.goto('/app/profile');
await page.getByRole('button', { name: /编辑/ }).click();
await page.getByLabel('用户名').fill('alice2');
await mock.override('PATCH', '/user/update', {
status: 409,
body: { status: 409, msg: '用户名已被使用' }
});
await page.getByRole('button', { name: /保存/ }).click();
// Field-level error, not a top-level alert
await expect(page.getByText('用户名已被使用')).toBeVisible();
// Form stays in edit mode
await expect(page.getByLabel('用户名')).toBeVisible();
});
// Validation surfaces inline error
test('rejects non-http avatar', async ({ page, loggedInUser }) => {
await page.goto('/app/profile');
await page.getByRole('button', { name: /编辑/ }).click();
await page.getByLabel('头像 URL').fill('data:image/png;base64,xxx');
await page.getByRole('button', { name: /保存/ }).click();
await expect(page.getByText('头像必须是 http(s) 链接')).toBeVisible();
});
// Mutation: chain overrides + assert PATCH body
test('editing nickname re-renders + sends correct PATCH body', async ({ page, loggedInUser }) => {
await page.goto('/app/profile');
await page.getByRole('button', { name: /编辑/ }).click();
await page.getByLabel('昵称').fill('Bob');
await mock.override('PATCH', '/user/update', { status: 200, body: { status: 200 } });
await mock.override('GET', '/user/info', {
status: 200,
body: { status: 200, data: { ...loggedInUser, nickname: 'Bob' } }
});
await page.getByRole('button', { name: /保存/ }).click();
await expect(page.getByText('Bob')).toBeVisible();
const patches = await mock.requests({ method: 'PATCH', path: '/user/update' });
expect(patches).toHaveLength(1);
expect(patches[0].body).toMatchObject({ nickname: 'Bob' });
});
// /profile → /profile/<own_id> convenience redirect
test('visiting /profile redirects to canonical /profile/<own_id>', async ({
page,
loggedInUser
}) => {
await page.goto('/app/profile');
await expect(page).toHaveURL(new RegExp(`/app/profile/${loggedInUser.user_id}$`));
});
// Other public profile renders view-only
test('other public profile renders view-only', async ({ page, loggedInUser }) => {
await mock.override('GET', '/user/info/42', {
status: 200,
body: {
status: 200,
data: {
user_id: '42',
email: 'bob@test.local',
username: 'bob',
nickname: 'Bob',
permission_level: 10,
allow_public: true
}
}
});
await page.goto('/app/profile/42');
await expect(page.getByText('Bob')).toBeVisible();
await expect(page.getByRole('button', { name: /编辑/ })).toHaveCount(0);
});
// Other private profile shows friendly error
test('other private profile shows access-denied error', async ({ page, loggedInUser }) => {
await mock.override('GET', '/user/info/99', {
status: 403,
body: { status: 403, msg: '该用户未公开个人资料' }
});
await page.goto('/app/profile/99');
await expect(page.getByText('该用户未公开个人资料')).toBeVisible();
});
```
No component-level tests for `ProfileCard.svelte` — the E2E suite exercises it end-to-end; isolated component tests would duplicate coverage.
## Deliverables
1. **Typography system** — install `@fontsource-variable/fraunces`, `@fontsource/ibm-plex-sans`, `@fontsource/ibm-plex-mono`, `@fontsource/noto-sans-sc`, `@fontsource/noto-serif-sc`. Import from `src/routes/+layout.svelte` (or `src/routes/layout.css` via `@import`). Extend DaisyUI/Tailwind theme in `src/routes/layout.css` with three font-family utilities: `font-display` → Fraunces, `font-sans` → IBM Plex Sans, `font-mono` → IBM Plex Mono (each with the matching Noto SC fallback in the family declaration).
2. **M1 retrofit** — update `src/routes/authorize/+page.svelte` and `src/routes/magic-link-sent/+page.svelte` so their `card-title`s use `font-display` (Fraunces), and the navbar brand wordmark in `src/routes/(app)/+layout.svelte` does the same. No structural changes; purely a font-class swap.
3. `src/lib/permissions.ts` + `permissions.test.ts` — `permissionLabel(level)` helper + table tests.
4. `src/lib/schemas/profile.ts` + `profile.test.ts` — Zod schema + accept/reject tests.
5. `src/lib/components/ProfileCard.svelte` — shared view/edit component (see markup sketches in §UI).
6. `src/routes/(app)/profile/+page.server.ts` — bare convenience redirect `/profile` → `/profile/<locals.user.user_id>`. No `+page.svelte` file.
7. `src/routes/(app)/profile/[userId]/+page.server.ts` — canonical route: load (branching on `isSelf`: `getUserInfo` vs `getUserInfoByUserId`) + `update` action (403 when `params.userId !== locals.user.user_id`).
8. `src/routes/(app)/profile/[userId]/+page.svelte` — renders `ProfileCard` with `editable={isSelf}`. Page header uses `font-display` italic title + mono uppercase subtitle (`PROFILE · VIEW` or `PROFILE · EDIT`).
9. `tests/e2e/profile.spec.ts` — seven E2E tests above.
10. `docs/superpowers/overview.md` — flip M2 status to ✅ shipped, link spec + plan. Also add a one-line entry to the "Cross-cutting architecture (invariants)" list noting the M2-introduced type system.
11. (Cleanup) Delete `docs/superpowers/notes/2026-04-14-profile-brainstorm-notes.md` — superseded by this spec. Also delete `/tmp/profile-mockup.html` (or migrate to `docs/design-mockups/2026-04-14-profile.html` if worth keeping).
## Verification
- `pnpm check` clean (the existing M1 `authorize/+page.svelte` warning is fine).
- `pnpm lint` clean.
- `pnpm test:unit` — new permissions + schema tests pass alongside existing M1 unit tests.
- `pnpm test:e2e` — six new profile tests pass alongside the M1.5 auth tests, all offline against the mock. (Reminder: kill any standalone `pnpm dev` before running per the M1.5 gotcha.)
- Manual: navigate to `/profile`, verify view → edit → save → view re-renders with new nickname; verify navbar avatar reflects the updated avatar URL after save.
## Design rationale
**Why inline view/edit toggle (not modal, not separate route)?** SSR-idiomatic — one route, one server action, superforms handles client state cleanly. Modals are a React-SPA habit; server-rendered forms don't need them. A separate `/profile/edit` route would double the routing surface for no gain.
**Why no markdown editor for `bio` in M2?** The reference React project encodes bio as base64-wrapped markdown (`@uiw/react-md-editor`). Choosing the markdown editor library for the rewrite is an M4 decision (event body editing surfaces a richer requirement). M2 deliberately keeps `bio` out of scope rather than ship a tactical editor we'd rip out in M4.
**Why `permissionLabel` lives in our project (not imported from React reference)?** The reference's `getRoleLabel` is part of a React project that won't be build-coupled to us. Copying eight lines of zh-CN labels into our repo is cleaner than reaching across project boundaries. Future label changes happen in two places; that cost is small relative to the coupling alternative.
**Why `[userId]` redirects to `/profile` for self?** Avoids "two URLs for the same profile" split-brain. Also frees the non-`/[userId]` route to use `getUserInfo` (no id) which is the SDK's cleaner own-profile path.
**Why store cookies via the standard 401 interceptor (no profile-specific auth handling)?** Profile is a protected route just like every other `(app)` route; no reason it should re-implement auth. The existing M1 single-flight refresh handles staleness.
## Attention points
- **`patchUserUpdate` body is snake_case, all fields optional.** We always send all five fields (mapped from `allowPublic` → `allow_public`), even unchanged ones — tracking dirty state and building a partial body would be premature complexity for five fields. The backend's "undefined = leave unchanged" tolerance is only relevant if/when we move to dirty-tracking.
- **Username-collision error → field-level mapping is heuristic.** Backend errors are an opaque `{status, msg}` envelope; we match the `msg` against `/用户名|username/i` to decide whether to attach the error to `username` vs the top-level alert. If the backend later introduces a structured error code, switch to that — until then the heuristic is good enough and falls back safely (unknown messages still render in the top-level alert).
- **403-specific error copy on `/profile/[userId]`.** `loadSdk` normalizes errors; the route wraps it with a try to catch the 403 specifically and re-throw with "该用户未公开个人资料" instead of whatever the backend's `msg` was. Other statuses use the normalized message.
- **Live avatar preview should not break the layout when the URL is invalid.** Use an `onerror` handler on the preview `<img>` to fall back to the placeholder; or render the placeholder when `$form.avatar` is empty / fails the Zod regex client-side.
- **Permission badge is informational only.** It's never used for gating UI in M2 (admin features don't ship until M4–M5). Reading the badge from `permission_level` is straight rendering.
- **`avatar` field on the SDK type is optional**, so the form-init payload may pass `undefined`; superforms handles this (`avatar: user.avatar` becomes `''` after Zod processing). No special casing needed.
- **`secondaryNav` already contains `/profile`.** Don't re-add the entry; just verify the link is active when on the route (M1's nav-active logic already handles this).
- **`navbar` avatar already auto-updates** (M1 reads `data.user.avatar` from root `+layout.server.ts`). After the profile save, the root layout re-runs and the navbar reflects the new avatar — no profile-specific layout touch needed.
- **Cancel is client-only.** `mode = 'view'` is sufficient; no server action needed. Be careful not to discard unsaved form state if the user wants it back — losing it on Cancel is the expected behavior.
- **Mutation E2E pattern** is exactly what M1.5 was built for: pre/post override chain + `mock.requests` assertion. No new test infrastructure needed.
## Task breakdown (for writing-plans skill)
Rough outline; the implementation plan will decompose with exact code:
1. `permissions.ts` + Vitest table test.
2. `schemas/profile.ts` + Vitest accept/reject tests.
3. `ProfileCard.svelte` view-mode rendering (no edit yet) — visual smoke check via Storybook or a one-off route.
4. `ProfileCard.svelte` edit mode + form bindings.
5. `(app)/profile/+page.server.ts` load + update action.
6. `(app)/profile/+page.svelte` renders ProfileCard editable.
7. `(app)/profile/[userId]/+page.server.ts` load + self-redirect + 403 mapping.
8. `(app)/profile/[userId]/+page.svelte` renders ProfileCard view-only.
9. E2E `profile.spec.ts` — six tests.
10. Update `overview.md`; delete brainstorm notes file.

323
docs/superpowers/specs/2026-04-14-test-infrastructure-design.md Normal file
View File

@@ -0,0 +1,323 @@
# M1.5 — Test Infrastructure (Design Spec)
Status: **Draft** — 2026-04-14. Interstitial milestone inserted between M1 (Foundation) and M2 (Profile) to build the shared test-mock infrastructure every subsequent milestone's E2E suite depends on.
## Goal
Decouple Playwright E2E tests from the real backend at `http://10.0.0.10:8000`. Tests today can only pass on a VPN-connected machine and can only mock at the browser-request layer (`page.route()`), which does not intercept SvelteKit's server-side SDK calls. Starting with M2 (Profile), tests need to exercise full SSR data flow — load functions, form actions, `hooks.server.ts` — against a predictable programmable backend. This milestone delivers that backend and the test-side helpers that drive it.
Tests after M1.5 should:
- Run without VPN access.
- Never mutate state on the real backend.
- Be deterministic and parallel-safe (at least within `workers: 1`).
- Make every backend interaction explicit in the test body — no hidden defaults, no implicit state.
## Non-goals
- **Reimplementing backend semantics.** The mock does not know what a "user" is, what `PATCH /user/update` means, or how resources relate. It is a programmable stub that serves whatever the test tells it to serve.
- **Hand-coded default responses.** Every endpoint a test hits must be explicitly overridden in that test (or in a helper invoked by that test). Unmatched requests are a test failure, not a silent default.
- **Dev-mode mock use.** Achievable trivially (`NODE_ENV=test pnpm dev` plus `pnpm mock` in another shell) and will be documented as a convenience, but no automation around it.
- **Contract testing / spec-drift detection.** The mock is not a validation proxy. Contract drift surfaces via `pnpm gen` regeneration and downstream TypeScript errors.
- **Per-worker mock isolation for parallel Playwright.** `workers: 1` is fine at current scale. Revisit if the E2E suite grows past ~50 tests.
- **Migrating Vitest unit tests.** They already run without a backend.
- **Prism.** Evaluated and rejected (see "Design rationale" below).
## Architecture
```
Playwright browser
└── HTTP → SvelteKit dev server (:5173)
└── SSR fetches for /app/api/* → Vite proxy → mock server (:4010)
└── HTTP → mock server (:4010) for /__test/* control endpoints
```
### Mock server (`scripts/mock-server.ts`)
A single-process Node script (Hono framework, ~150 LOC) listening on `localhost:4010`. It is a strict programmable stub:
1. **Override table.** In-memory `Map<"METHOD pathname" → {status, body, headers?}>`. Path is matched exactly (no `:param` capture — keeps the matcher trivial; tests register concrete paths like `/user/info/42`). When a request matches a registered override, the mock returns it verbatim.
2. **Request log.** Every request is recorded with `{method, path, query, body, headers}`. All inbound headers captured (cookies + authorization are useful for some assertions). Queryable via `GET /__test/requests?method=…&path=…` (query-string filter, both optional). Returns matches newest-first.
3. **Unmatched requests fail loudly.** If no override matches, the mock returns `500` with body `{status: 500, msg: "mock: no override for METHOD /path; register one in your test"}`. This surfaces missing test setup immediately — a test never silently hits a "default" it didn't declare.
4. **Crash-resilience.** Hono's top-level error handler converts any thrown error inside a route handler (e.g., a Zod validation throw on a malformed `POST /__test/override` payload) into a `500` with a diagnostic body. Errors never propagate out of the process — a single bad payload from a test cannot kill the mock and cascade-fail the suite.
5. **Control endpoints (under `/__test/`).**
- `POST /__test/override` — body `{method, pathPattern, response: {status, body?, headers?}}`, validated against a Zod schema. Last writer wins for the same `{method, pathPattern}` key (so a test can replace a previous override mid-flow).
- `DELETE /__test/override` — clears the override table and the request log.
- `GET /__test/requests` — query params `method`, `path` (both optional) → returns recorded requests matching the filter, newest first.
The mock server has **no knowledge of backend semantics**. It does not stash PATCH bodies, does not merge state, does not generate schema-valid defaults. Its sole job is to return registered responses and record what it received. This keeps it transport-agnostic by construction — when the backend migrates to gRPC, only the wire layer changes.
### Vite proxy (mode-driven target)
`vite.config.ts` switches proxy target based on `NODE_ENV`:
```ts
const apiTarget = process.env.NODE_ENV === 'test'
? 'http://localhost:4010'
: 'http://10.0.0.10:8000';
server: {
proxy: { '/app/api': apiTarget }
}
```
`NODE_ENV=test` is set once at the npm-script level (`"test:e2e": "NODE_ENV=test playwright test"`). Everything downstream — Playwright's `webServer` spawning `pnpm dev`, the mock server, CI invocations of `pnpm test:e2e` — inherits it automatically. No env plumbing in `playwright.config.ts`, no CI-specific configuration. Local dev (`pnpm dev` without `NODE_ENV`) continues to hit the real backend over VPN.
Notes:
- `NODE_ENV=test` does not affect `import { dev } from '$app/environment'`, which is true for any `vite dev` run regardless of `NODE_ENV`. The dev-mode Turnstile bypass and magic-link auto-follow stay active during tests (which the migrated auth spec relies on).
- `NODE_ENV=test` during `vite dev` is unusual (Vite/SvelteKit's defaults are `development`/`production`). First implementation step verifies that `NODE_ENV=test pnpm dev` produces a functional dev build identical to `NODE_ENV=development` aside from the proxy target. If a plugin keys off the default pair and breaks, fall back to a bespoke env var (e.g., `USE_MOCK_API=1`) — same wiring shape, different name.
### Playwright configuration
`playwright.config.ts` switches to `webServer` array:
```ts
webServer: [
{
command: 'pnpm mock',
port: 4010,
reuseExistingServer: !process.env.CI
},
{
command: 'pnpm dev',
port: 5173,
reuseExistingServer: !process.env.CI
}
];
```
`workers: 1` explicit (shared mock state).
### Test-side helper API (`tests/e2e/helpers/mock.ts`)
Thin typed wrapper over the HTTP control endpoints:
```ts
export type RecordedRequest = {
method: string;
path: string;
query: Record<string, string>;
body: unknown;
headers: Record<string, string>;
};
const MOCK = 'http://localhost:4010';
const post = (path: string, body: unknown) =>
fetch(`${MOCK}${path}`, {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(body)
});
export const mock = {
/** Register a response for a given (method, pathPattern). Replaces any prior override for the same key. */
override: (
method: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE',
pathPattern: string,
response: { status: number; body?: unknown; headers?: Record<string, string> }
) => post('/__test/override', { method, pathPattern, response }),
/** Return recorded requests matching the filter, newest first. */
requests: (filter: { method?: string; path?: string } = {}) => {
const qs = new URLSearchParams(
Object.entries(filter).filter(([, v]) => v !== undefined) as [string, string][]
);
return fetch(`${MOCK}/__test/requests?${qs}`).then((r) => r.json()) as Promise<
RecordedRequest[]
>;
},
/** Clear override table + request log. Wired to `beforeEach` once in `fixtures.ts`; tests don't call it directly. */
clear: () => fetch(`${MOCK}/__test/override`, { method: 'DELETE' })
};
```
Per-operation typed wrappers are opt-in — tests can call `mock.override(...)` directly with SDK-typed response bodies (via `satisfies GetUserInfoResponses[200]`), or define a small helper in a test file when the same pattern repeats within it. We intentionally do **not** ship an `mock.user.set(...)` convenience layer from M1.5: adding one risks reintroducing the "backend-like semantics" the mock server deliberately avoids. If a convenience helper proves needed in M2+, we add it then with full awareness of the trade-off.
### Login helper (`tests/e2e/helpers/auth.ts`)
Bypasses the magic-link UI by injecting the session cookies `hooks.server.ts` would otherwise have written, then registers the `/user/info` override the SSR boot will read:
```ts
export async function loginAsMockUser(
page: Page,
opts: { user?: Partial<ServiceUserUserInfo> } = {}
) {
const user: ServiceUserUserInfo = {
user_id: '1',
email: 'alice@test.local',
nickname: 'Alice',
permission_level: 10,
allow_public: true,
...opts.user
};
await page.context().addCookies([
{
name: 'access_token',
value: 'test-access',
domain: 'localhost',
path: '/app',
httpOnly: true,
sameSite: 'Lax'
},
{
name: 'refresh_token',
value: 'test-refresh',
domain: 'localhost',
path: '/app',
httpOnly: true,
sameSite: 'Lax'
}
]);
await mock.override('GET', '/user/info', { status: 200, body: { status: 200, data: user } });
return user;
}
```
The full magic-link → token-exchange → cookie-set pipeline is **not** re-run on every test. That pipeline is exercised end-to-end by the dedicated migrated `auth.spec.ts` test, which is the only place it needs to be tested. Other tests start in the authenticated state via cookie injection — orders of magnitude faster and free of any UI-flow brittleness.
Tests can override `GET /user/info` later in the same test (e.g., replace with Bob after a simulated PATCH); last-writer-wins semantics make this natural.
**Notes on cookie injection:**
- The injected cookies omit `secure: true`, while the real `setSessionCookies` (`src/lib/server/session.ts`) sets `secure: true`. Browsers drop `Secure` cookies on the `http://localhost` origin Playwright uses, so production cookie shape would be unusable here. This is intentional divergence — tests verify auth-gated behavior, not cookie flag plumbing (which is already covered by Vitest unit tests around session helpers).
- `addCookies` must run **before** the first `page.goto(...)`. The helper does not navigate; tests call it before any navigation. The `loggedInUser` fixture is built so that `await use(...)` happens before the test body runs, satisfying this ordering.
### Custom `test` fixture (`tests/e2e/helpers/fixtures.ts`)
`fixtures.ts` exports a customised `test` that (a) auto-clears mock state before every test and (b) provides a `loggedInUser` fixture for tests that need to start authenticated:
```ts
import { test as base, expect } from '@playwright/test';
import { mock } from './mock';
import { loginAsMockUser } from './auth';
export const test = base.extend<{ loggedInUser: ServiceUserUserInfo }>({
loggedInUser: async ({ page }, use) => {
const user = await loginAsMockUser(page);
await use(user);
}
});
test.beforeEach(async () => {
await mock.clear();
});
export { expect };
```
All E2E tests `import { test, expect } from './helpers/fixtures'` — clearing happens automatically; tests that don't need auth simply don't request the `loggedInUser` fixture. This is the **single** mechanism for state reset; no per-test `mock.clear()` calls anywhere else.
## Testing convention (project-wide from M1.5 onward)
1. **Auth is the only thing hidden in a fixture.** `loggedInUser` injects session cookies and seeds the `/user/info` response. The full magic-link pipeline is tested once, in `auth.spec.ts`; everything else skips straight to the authenticated state.
2. **Every other endpoint the test hits is explicitly overridden in the test body.** No helpers, no fixtures — write the `mock.override(...)` call inline so readers see exactly what the backend returns for that test.
3. **Mutation tests chain overrides.** Set the initial GET response. Override the mutating endpoint to succeed. Override the follow-up GET to the post-mutation shape. Click through the UI. Assert on UI re-render + on recorded requests to verify the mutation carried the right body.
4. **Unmatched requests are a signal.** If a test fails with `mock: no override for METHOD /path`, the test is incomplete — register the missing override. Never add "safety default" overrides to prevent the failure.
5. **Reset between tests is automatic.** `tests/e2e/helpers/fixtures.ts` registers a `beforeEach` that calls `mock.clear()`. Tests `import { test } from './helpers/fixtures'` and never need to call `mock.clear()` directly.
## M1 auth smoke migration
`tests/e2e/auth.spec.ts` rewritten:
- **Test 1 (anonymous redirect):** drop the `page.route()` call — anonymous hits no backend endpoints (`hooks.server.ts` skips `getUserInfo` when `accessToken` is absent). Test gets simpler and no mock overrides are needed.
- **Test 2 (submit + auto-follow):** replace the fake 303 `page.route()` hack with the real dev-mode flow, registering the three overrides inline (no helper — this is the only test that exercises the full pipeline, so the overrides belong in the test body):
```ts
await mock.override('POST', '/auth/magic', {
status: 200,
body: { status: 200, data: { uri: '/app/token?code=test-code' } }
});
await mock.override('POST', '/auth/token', {
status: 200,
body: { status: 200, data: { access_token: 'test-access', refresh_token: 'test-refresh' } }
});
await mock.override('GET', '/user/info', {
status: 200,
body: {
status: 200,
data: {
user_id: '1',
email: 'edolstra@gmail.com',
nickname: 'E',
permission_level: 10,
allow_public: true
}
}
});
await page.goto('/app/authorize');
await page.getByPlaceholder('edolstra@gmail.com').fill('edolstra@gmail.com');
await page.getByRole('button', { name: /发送登录链接/ }).click();
await expect(page).toHaveURL(/\/app\/?$/);
await expect(page.getByText('edolstra@gmail.com')).toBeVisible();
```
This test exercises the entire SSR auth pipeline against the mock — a much stronger guarantee than the browser-level 303 stub it replaces, and the only place the full flow is verified.
## Deliverables
1. `scripts/mock-server.ts` — Hono app with override table, request log, control endpoints, unmatched-request 500. Logs each request to stderr in a single-line format (`[mock] METHOD /path → status`); no structured logger. ~150 LOC.
2. `vite.config.ts` — proxy target driven by `NODE_ENV === 'test'`.
3. `package.json` — new `mock` script (`tsx scripts/mock-server.ts`); `test:e2e` updated to `NODE_ENV=test playwright test`. Adds `tsx`, `hono`, and `@playwright/test`-compatible Hono runtime as direct devDependencies.
4. `playwright.config.ts` — `webServer` array + `workers: 1`.
5. `tests/e2e/helpers/mock.ts` — typed control-API wrapper (`override`, `requests`, `clear`).
6. `tests/e2e/helpers/auth.ts` — `loginAsMockUser` declaring the full auth-flow overrides.
7. `tests/e2e/helpers/fixtures.ts` — `loggedInUser` Playwright fixture (with auto-clear in `beforeEach`).
8. `tests/e2e/auth.spec.ts` — migrated to mock.
9. `README.md` / `CLAUDE.md` addition — "Writing E2E tests" section documenting the convention, the helper API, and the "unmatched request = test failure" rule.
10. `docs/superpowers/overview.md` — add M1.5 row to status table; mention mock infrastructure in the cross-cutting architecture section.
## Verification
- **NODE_ENV smoke check (first task).** `NODE_ENV=test pnpm dev` produces a functional dev build identical to `NODE_ENV=development pnpm dev` aside from the proxy target. If a plugin breaks, switch to `USE_MOCK_API=1` everywhere.
- **Mock-server round-trip.** `pnpm mock` starts on :4010; `curl -X POST http://localhost:4010/__test/override -d '{"method":"GET","pathPattern":"/user/info","response":{"status":200,"body":{}}}'` then `curl http://localhost:4010/user/info` returns `{}`. `curl http://localhost:4010/anything-else` returns `500 mock: no override for GET /anything-else`. Malformed override payload returns `500` with a diagnostic body, mock keeps running.
- **Reset works.** `curl -X DELETE http://localhost:4010/__test/override` then `curl http://localhost:4010/user/info` again returns the unmatched-request 500 (override gone). `curl 'http://localhost:4010/__test/requests'` returns `[]` (log empty).
- **Suite runs offline.** `pnpm test:e2e` passes with VPN disconnected — both migrated auth tests green.
- `pnpm check` passes. `pnpm lint` passes.
## Design rationale
**Why not Prism?** Considered and rejected. Prism's value is schema-driven default responses — but since this project's tests need known-value assertions, we'd override almost every endpoint anyway. Prism's net contribution reduces to serving a handful of endpoints with schema-valid stubs in helpers, which a test-side override does just as well. Meanwhile Prism is a runtime dependency, a second process, and is OpenAPI-specific — meaningful overhead given the backend may migrate to gRPC.
**Why no default responses or backend-like state?** Every default we add is a judgment call about backend semantics the mock doesn't actually know. PATCH handlers that mutate a GET response feel natural for one endpoint but require decisions (merge vs. replace? validate?) that duplicate backend logic. Across seven milestones those decisions pile up into "we rewrote the backend in Node". The override-only model sidesteps all of it: tests declare exactly what the backend returns at each step. Tests get more verbose; the mock stays ~150 LOC forever.
**Why unmatched-request-as-error (not silent default)?** A silent default is a trap — a test passes because the mock returned "something plausible" for a call the test didn't know was happening. When the test later breaks due to real backend shape changes, the cause is hidden. Failing loud on unmatched requests surfaces the undeclared-dependency immediately, while writing the test, when the fix is cheap.
**Why `workers: 1`?** Shared mock state. Per-worker mock instances (different ports, `worker.info()`-driven env vars) are feasible but premature — the E2E suite is <10 tests today and will be <50 at M7. Adding parallelism later is mechanical if it becomes a bottleneck.
## Attention points
- **`mock.clear()` must wipe both overrides and request log.** A bug where only one is cleared causes non-deterministic tests that pass in isolation and fail in suite. Cover both in an early manual verification step.
- **Last-writer-wins override semantics.** A later `mock.override('GET', '/user/info', ...)` replaces an earlier one. Tests rely on this for mutation flows (pre-state override → post-state override). Document this clearly in the helper JSDoc.
- **Request-log query returns newest-first.** Common case: "did my last PATCH carry the right body?" `mock.requests({method: 'PATCH', path: '/user/update'})[0]` is the freshest. Document this too.
- **Typed response bodies lean on SDK types.** Tests should write `mock.override('GET', '/user/info', { status: 200, body: {...} satisfies GetUserInfoResponses[200] })` so backend spec changes break tests at compile time. Lint rule unlikely to enforce this — convention in README.
- **Convenience helper temptation.** It will feel tempting in M2 to add `mock.user.set(...)`. Resist unless the same pattern genuinely repeats in 3+ places and the helper is a pure override-composition wrapper (not a hidden state machine).
- **`workers: 1` is a temporary constraint**, not a forever one. When revisited, migrate to per-worker mock instances rather than locking workers to 1.
- **Dev-mode auto-follow & Turnstile bypass stay in play.** Playwright runs `pnpm dev`, so both are active — the migrated auth test exercises the real dev-mode code paths (consistent with M1's attention points about Turnstile).
- **Migration to gRPC later.** The wire layer of the mock server changes; override model, request log, and test-side API do not. Plan the gRPC migration to include "rewrite mock-server.ts wire handling"; test files should not need to change.
- **401-triggered refresh requires its own override.** Any test that overrides an SDK call with `status: 401` will trigger `createApiClient`'s 401 interceptor, which calls `POST /auth/refresh`. Tests for that path must register a `/auth/refresh` override too — otherwise the request hits the unmatched-request 500 and the test fails for the wrong reason. M1.5 doesn't add tests for this path; M2+ will if needed.
- **`/auth/token` route bypasses `createApiClient`.** `src/routes/token/+page.server.ts` uses `event.fetch` directly (not the SDK), so its `/auth/token` request still flows through Vite's proxy to the mock. The auth.spec.ts override list reflects this.
- **Multi-request log assertions.** When chaining overrides for the pre-/post-mutation flow, `mock.requests({path: '/user/info'})` returns _all_ recorded GETs (newest first). For "did the UI re-fetch?" assertions, check `length === 2`, not just `[0]`.
- **`tsx` for running the mock server.** Add `tsx` as a direct devDependency rather than relying on transitive presence. CI without watch mode (`tsx scripts/mock-server.ts`); developers iterating on the mock can switch to `tsx watch` locally.
## Task breakdown (for writing-plans skill)
Rough outline; the implementation plan will decompose further with exact code:
1. `scripts/mock-server.ts` — Hono app with override table, request log, control endpoints, unmatched-request 500. Zod validation of override payloads.
2. `pnpm mock` script (tsx).
3. `vite.config.ts` — proxy target driven by `NODE_ENV === 'test'`.
4. `playwright.config.ts` — webServer array, `workers: 1`. `package.json` `test:e2e` script sets `NODE_ENV=test`.
5. `tests/e2e/helpers/mock.ts` — typed `override` / `requests` / `clear`.
6. `tests/e2e/helpers/auth.ts` — `loginAsMockUser` with full auth-flow overrides.
7. `tests/e2e/helpers/fixtures.ts` — `loggedInUser` fixture + auto `mock.clear()` in `beforeEach`.
8. Migrate `auth.spec.ts`; verify `pnpm test:e2e` passes without VPN.
9. Docs: README E2E section, `CLAUDE.md` pointer, `overview.md` M1.5 row.

510
docs/superpowers/specs/2026-04-15-admin-events-design.md Normal file
View File

@@ -0,0 +1,510 @@
# M4 — Admin Events (Design Spec)
Status: **Draft** — 2026-04-15. Fourth feature milestone (after M1 Foundation, M1.5 Test Infrastructure, M2 Profile, M3 Events). Adds the admin-facing events surface: list, create/edit/delete, and the event-detail subpages (agenda CRUD + DnD, attendance table, stats cards).
## Goal
Ship the admin events feature for users at permission level Lv30 (`PARTY_EVENT_HOLDER`) and above. Admins manage their own events (Lv30) or all events (Lv40 `OFFICIAL_ADMIN`) at `/admin/events`. Each event gets four subpages — edit, agenda, attendance, stats — navigated by a hybrid tab bar (DaisyUI tabs visually, real sub-routes under the hood). Introduces `bytemd` as a markdown editor for event descriptions and `svelte-dnd-action` for agenda reordering.
## Non-goals
- **Check-in QR flow.** The attendance subpage lists attendees but does not trigger check-in. That is M6.
- **Agenda public schedule (user-facing).** The `/events/[eventId]` detail page's agenda display is deferred — M4 ships the admin-side agenda management only.
- **User / permissions admin.** `/admin/users` and permission-level editing are M5.
- **Global stats dashboard.** `/admin/stats` with charts is M5. M4 ships per-event stat cards only — no charting library yet.
- **Avatar upload.** Out of scope project-wide for now.
- **Pagination on the admin event list.** The same `limit=50, offset=0` strategy from M3 applies. Add pagination if the list actually grows.
- **Soft-delete / archive.** Delete is permanent (`deleteEventDelete`). No recovery UI.
## Architecture
### Route group structure
```
src/routes/(app)/
├── (admin)/ ← new route group
│ ├── +layout.server.ts ← Lv30+ permission gate
│ └── events/
│ ├── +page.server.ts ← load: getEventList (own or all)
│ ├── +page.svelte ← admin event list
│ ├── new/
│ │ ├── +page.server.ts ← action: ?/create → postEventCreate
│ │ └── +page.svelte ← event form (create mode)
│ └── [eventId]/
│ ├── +layout.server.ts ← load: getEventInfo (shared)
│ ├── +layout.svelte ← tab bar: 编辑 / 议程 / 出席 / 统计
│ ├── +page.server.ts ← actions: ?/update, ?/delete
│ ├── +page.svelte ← edit tab (event form, edit mode)
│ ├── agenda/
│ │ ├── +page.server.ts ← load: getAgendaList; actions: ?/create, ?/update, ?/delete, ?/reorder
│ │ └── +page.svelte ← DnD list + inline edit dialogs
│ ├── attendance/
│ │ ├── +page.server.ts ← load: getEventAttendance
│ │ └── +page.svelte ← attendee table (read-only)
│ └── stats/
│ ├── +page.server.ts ← load: getEventStats
│ └── +page.svelte ← four stat cards (read-only)
└── events/ ... ← user-facing (unchanged)
```
The outer `(app)/+layout.server.ts` already gates unauthenticated access. The `(admin)` layout adds a second layer — Lv30+ only.
### Permission gate
```ts
// (app)/(admin)/+layout.server.ts
import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => {
if (!locals.user || locals.user.permission_level < 30) {
error(403, '权限不足');
}
};
```
All routes under `(admin)/` inherit this check. No per-route duplication.
### Admin event list load
```ts
// (app)/(admin)/events/+page.server.ts
export const load: PageServerLoad = async (event) => {
const api = createApiClient(event);
const result = await loadSdk(() =>
getEventList({ client: api, query: { offset: 0, limit: 50 } })
);
// Lv30 sees only own events; Lv40 sees all.
// Ownership filtering is done by the backend based on the access token —
// no client-side filtering needed.
return { events: result.data?.items ?? [] };
};
```
The backend returns only the caller's own events for Lv30 holders. Lv40 admins receive the full list. The client renders whatever the server returns.
### Event detail shared load
```ts
// (app)/(admin)/events/[eventId]/+layout.server.ts
export const load: LayoutServerLoad = async (event) => {
const api = createApiClient(event);
const result = await loadSdk(() =>
getEventInfo({ client: api, query: { event_id: event.params.eventId } })
);
// Decode markdown fields for the edit form
const ev = result.data!;
const description = ev.description ? Buffer.from(ev.description, 'base64').toString('utf-8') : '';
const attendanceGuide = ev.attendance_guide
? Buffer.from(ev.attendance_guide, 'base64').toString('utf-8')
: '';
return { ev, description, attendanceGuide };
};
```
All four subpages receive `ev`, `description`, and `attendanceGuide` from the layout load. The edit tab uses `description`/`attendanceGuide` to seed bytemd; the other tabs ignore them.
### Event create/update actions
```ts
// new/+page.server.ts — create action
export const actions = {
create: async (event) => {
const form = await superValidate(event.request, zod(eventSchema));
if (!form.valid) return fail(400, { form });
const api = createApiClient(event);
const body = encodeEventBody(form.data);
// Lv30 cannot set type='official'; enforce server-side
if (event.locals.user!.permission_level < 40) {
body.type = 'party';
}
const result = await callSdk(() => postEventCreate({ client: api, body }));
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
const newId = unwrapOk(result).data!.event_id;
redirect(303, `/app/admin/events/${newId}`);
}
};
// [eventId]/+page.server.ts — update + delete actions
export const actions = {
update: async (event) => {
const form = await superValidate(event.request, zod(eventSchema));
if (!form.valid) return fail(400, { form });
const api = createApiClient(event);
const encoded = encodeEventBody(form.data);
const body = {
event_id: event.params.eventId,
...encoded,
// Lv30 cannot change event type — strip the field entirely
...(event.locals.user!.permission_level < 40 ? { type: undefined } : {})
};
const result = await callSdk(() => patchEventUpdate({ client: api, body }));
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
return { form };
},
delete: async (event) => {
const api = createApiClient(event);
const result = await callSdk(() =>
deleteEventDelete({ client: api, body: { event_id: event.params.eventId } })
);
if (isErr(result)) return fail(400, { message: unwrapErr(result).message });
redirect(303, '/app/admin/events');
}
};
```
`encodeEventBody` is a small helper that maps the Zod camelCase schema to the API's snake_case fields and base64-encodes markdown content:
```ts
function encodeEventBody(data: EventFormData) {
return {
name: data.name,
subtitle: data.subtitle,
start_time: data.start_time,
end_time: data.end_time,
quota: data.quota,
type: data.type,
enable_kyc: data.enable_kyc,
is_agenda_published: data.is_agenda_published,
thumbnail: data.thumbnail || undefined,
description: data.description ? Buffer.from(data.description).toString('base64') : undefined,
attendance_guide: data.attendanceGuide
? Buffer.from(data.attendanceGuide).toString('base64')
: undefined
};
}
```
### Agenda actions
```ts
// agenda/+page.server.ts
export const load: PageServerLoad = async (event) => {
const api = createApiClient(event);
const result = await loadSdk(() =>
getAgendaList({ client: api, query: { event_id: event.params.eventId } })
);
return { items: result.data?.items ?? [] };
};
export const actions = {
// Create: validate agendaItemSchema → postAgendaSubmit({ event_id, ...fields })
// On error: setError(form, '', message). On success: return { form } (page invalidates).
create: async (event) => {
const form = await superValidate(event.request, zod(agendaItemSchema));
if (!form.valid) return fail(400, { form });
const api = createApiClient(event);
const result = await callSdk(() =>
postAgendaSubmit({ client: api, body: { event_id: event.params.eventId, ...form.data } })
);
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
return { form };
},
// Update: validate agendaItemSchema → patchAgendaUpdate({ agenda_id, ...fields })
// agenda_id comes from a hidden input in the edit dialog form.
update: async (event) => {
const fd = await event.request.formData();
const agenda_id = fd.get('agenda_id') as string;
const form = await superValidate(fd, zod(agendaItemSchema));
if (!form.valid) return fail(400, { form });
const api = createApiClient(event);
const result = await callSdk(() =>
patchAgendaUpdate({ client: api, body: { agenda_id, ...form.data } })
);
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
return { form };
},
// Delete: read agenda_id from formData → see attention point re: delete endpoint.
delete: async (event) => {
const fd = await event.request.formData();
const agenda_id = fd.get('agenda_id') as string;
const api = createApiClient(event);
// If no deleteAgendaItem endpoint exists, use patchAgendaUpdate with a deletion flag.
// Verify against SDK types at implementation time.
const result = await callSdk(() =>
patchAgendaUpdate({ client: api, body: { agenda_id, deleted: true } })
);
if (isErr(result)) return fail(400, { message: unwrapErr(result).message });
},
reorder: async (event) => {
// read JSON ids array from formData → patchAgendaSchedule
const fd = await event.request.formData();
const items = JSON.parse(fd.get('items') as string);
const api = createApiClient(event);
const result = await callSdk(() =>
patchAgendaSchedule({ client: api, body: { event_id: event.params.eventId, items } })
);
if (isErr(result)) return fail(400, { message: unwrapErr(result).message });
}
};
```
DnD drop on the client triggers `?/reorder` immediately. The `$state` array is updated optimistically; on error the page invalidates and reverts.
## Schemas
`src/lib/schemas/events.ts`:
```ts
export const eventSchema = z
.object({
name: z.string().min(1, '请填写活动名称'),
subtitle: z.string().min(1, '请填写副标题'),
start_time: z.string().datetime('请选择有效的开始时间'),
end_time: z.string().datetime('请选择有效的结束时间'),
quota: z.coerce.number().int().positive().optional(),
type: z.enum(['official', 'party']),
enable_kyc: z.boolean().default(false),
is_agenda_published: z.boolean().default(false),
thumbnail: z.string().url('请输入有效的图片 URL').optional().or(z.literal('')),
description: z.string().optional(),
attendanceGuide: z.string().optional()
})
.refine((d) => new Date(d.end_time) > new Date(d.start_time), {
message: '结束时间必须晚于开始时间',
path: ['end_time']
});
export type EventFormData = z.infer<typeof eventSchema>;
```
`src/lib/schemas/agenda.ts`:
```ts
export const agendaItemSchema = z.object({
title: z.string().min(1, '请填写议程标题'),
description: z.string().optional(),
start_time: z.string().datetime().optional(),
end_time: z.string().datetime().optional(),
is_published: z.boolean().default(false)
});
```
## UI components
### Sidebar nav addition
`(app)/+layout.svelte` renders the admin nav item conditionally:
```svelte
{#if data.user.permission_level >= 30}
<li>
<a href="{base}/admin/events" class="...">
<Settings class="size-4" />
<span class="is-drawer-close:hidden is-drawer-open:inline">管理活动</span>
</a>
</li>
{/if}
```
Placed below a `<li class="divider">` after the user-facing nav items.
### Event form component (`src/lib/components/EventForm.svelte`)
Shared between new and edit. Props: `form` (superforms data), `isEdit: boolean`, `userLevel: number`.
Visual sections:
**基本信息**: name, subtitle (DaisyUI `<label class="input">` pattern), start/end time (side by side), quota + type radio (side by side). `type` radio is disabled when `userLevel < 40`.
**设置**: enable_kyc checkbox, is_agenda_published checkbox, thumbnail URL input.
**内容**: two bytemd editors — 描述 and 参会指南. Each bound to a `$state` string; a hidden `<input type="hidden">` syncs the value into superforms.
**Action row**: "保存" `btn btn-primary btn-block` (shows `loading-spinner` while submitting). In edit mode: "删除活动" `btn btn-error btn-outline` at right, opens a bits-ui confirm dialog before firing `?/delete`.
### MarkdownEditor component
`src/lib/components/MarkdownEditor.svelte` — a plain textarea with an edit/preview tab switcher. `marked` (already installed from M3) renders the preview. The textarea always renders in the DOM (CSS-hidden on preview tab) so the form field is always present on submit. Uses `$bindable` for two-way binding.
```svelte
<script lang="ts">
import { marked } from 'marked';
let { value = $bindable(''), name, placeholder = '支持 Markdown 格式' } = $props();
let tab = $state<'edit' | 'preview'>('edit');
const preview = $derived(marked.parse(value, { async: false }) as string);
</script>
<!-- tab switcher, textarea (always in DOM), preview div -->
```
Parent usage in EventForm: `<MarkdownEditor name="description" bind:value={description} />`
### Admin event list page
Header matches M3 events list style:
```
管理活动 ← font-sans font-semibold text-[1.75rem]
ADMIN · EVENTS ← font-mono text-[0.6rem] tracking-[0.2em] uppercase opacity-35
```
Event rows as `card card-border` with: thumbnail thumbnail, name, subtitle, date range, type badge, join_count / quota. Action buttons: "编辑" (links to edit tab) and a delete shortcut (confirm dialog before firing). "新建活动" `btn btn-primary` in the header area.
### Event detail tab bar (`[eventId]/+layout.svelte`)
```svelte
<div role="tablist" class="tabs-border tabs">
<a
href="{base}/admin/events/{eventId}"
role="tab"
class="tab {isActive('edit') ? 'tab-active' : ''}">编辑</a
>
<a
href="{base}/admin/events/{eventId}/agenda"
role="tab"
class="tab {isActive('agenda') ? 'tab-active' : ''}">议程</a
>
<a
href="{base}/admin/events/{eventId}/attendance"
role="tab"
class="tab {isActive('attendance') ? 'tab-active' : ''}">出席</a
>
<a
href="{base}/admin/events/{eventId}/stats"
role="tab"
class="tab {isActive('stats') ? 'tab-active' : ''}">统计</a
>
</div>
<slot />
```
`isActive` compares `$page.url.pathname` to the tab's route segment.
### Agenda page
DnD list powered by `svelte-dnd-action`:
```svelte
<script>
import { dndzone } from 'svelte-dnd-action';
let items = $state(data.items);
function handleDnd(e: CustomEvent) {
items = e.detail.items;
}
async function handleDrop(e: CustomEvent) {
items = e.detail.items;
// POST ?/reorder with new order
const fd = new FormData();
fd.set('items', JSON.stringify(items.map((i) => i.agenda_id)));
await fetch('?/reorder', { method: 'POST', body: fd });
}
</script>
<ul use:dndzone={{ items }} on:consider={handleDnd} on:finalize={handleDrop}>
{#each items as item (item.agenda_id)}
<li>...</li>
{/each}
</ul>
```
Each row shows: drag handle, title, time slot, status badge (已发布 / 待审核), edit icon, delete icon. Edit and create use bits-ui Dialog + `agendaItemSchema` superforms — same pattern as M3's KYC dialog.
### Attendance page
Plain `<table>` with columns: 用户名 (monospace), 报名时间, KYC (✓/✗), 签到 (✓/—). Header shows count summary badge. No pagination, no actions — read-only.
### Stats page
Four `stat` DaisyUI cards in a `grid-cols-2` grid: 已报名 (blue), KYC 通过率 (teal), 已签到 (orange), 议程提交 (purple). Each card: large number, label below. A small footer note: "最后更新：加载时 · 刷新页面获取最新数据".
## Error handling
- **Lv29 user hits any `/admin/...` route** → `(admin)/+layout.server.ts` throws `error(403)`; root `+error.svelte` renders.
- **Event not found** → `loadSdk` in layout throws `error(404, '该活动不存在或已被删除。')`.
- **Create/update failure** → `setError(form, '', message)` → inline `alert alert-error alert-soft` at form top.
- **Delete failure** → `fail(400, { message })` → inline alert in confirm dialog.
- **Agenda action failure** → `fail(400, { message })` → alert in the agenda dialog.
- **DnD reorder failure** → `invalidateAll()` after fetch error reverts to server state.
- **Attendance / stats load failure** → `loadSdk` throws; error page renders for that subpage only (tab bar stays visible via layout).
## Testing
### Unit (Vitest)
- `src/lib/schemas/events.test.ts` — valid payload passes; `end_time ≤ start_time` fails with path `['end_time']`; empty name fails; `thumbnail` accepts empty string and valid URL, rejects garbage.
- `src/lib/schemas/agenda.test.ts` — title required; optional fields pass when absent.
### E2E (Playwright against mock)
All tests use the `loggedInUser` fixture (Lv30 by default) unless noted. A `superAdminUser` fixture (Lv40) is added in `tests/e2e/helpers/fixtures.ts`.
1. **Permission gate (Lv29)** — `GET /user/info` returns `permission_level: 29`; navigate to `/admin/events`; assert 403 error page.
2. **Admin list (Lv30, own events)** — `GET /event/list` returns two events owned by current user; assert both visible, "新建活动" button visible.
3. **Admin list (Lv40, all events)** — superAdminUser; `GET /event/list` returns events from multiple owners; assert all visible.
4. **Create event** — `POST /event/create` returns `{ event_id: 'new1' }`; fill form, submit; assert redirect to edit tab.
5. **Edit event** — `GET /event/info`, `PATCH /event/update` 200; mutate name, save; assert success (no error alert, form repopulates).
6. **Delete event** — `DELETE /event/delete` 200; click delete, confirm dialog, confirm; assert redirect to list.
7. **Agenda list renders** — `GET /agenda/list` returns three items; assert all visible with drag handles.
8. **Agenda create item** — `POST /agenda/submit` 200; open create dialog, fill title, save; assert new item in list.
9. **Agenda edit item** — `PATCH /agenda/update` 200; click edit on first item, change title, save; assert updated title.
10. **Agenda reorder** — `PATCH /agenda/schedule` 200; simulate drag (trigger finalize event); assert reorder action called with new order.
11. **Attendance tab** — `GET /event/attendance` returns 3 rows; assert table rows visible, check-in indicators correct.
12. **Stats tab** — `GET /event/stats` returns counts; assert four stat cards show correct numbers.
## New packages
- `svelte-dnd-action` — flip-based drag-and-drop for Svelte.
- `marked` — already installed from M3; no new install needed for markdown preview.
No charting library (deferred to M5).
## Deliverables
1. `pnpm add svelte-dnd-action` (`marked` already installed).
2. `src/lib/schemas/events.ts` + `events.test.ts`.
3. `src/lib/schemas/agenda.ts` + `agenda.test.ts`.
4. `src/routes/(app)/(admin)/+layout.server.ts` (Lv30+ gate).
5. `src/routes/(app)/(admin)/events/+page.server.ts` + `+page.svelte` (admin list).
6. `src/routes/(app)/(admin)/events/new/+page.server.ts` + `+page.svelte` (create form).
7. `src/routes/(app)/(admin)/events/[eventId]/+layout.server.ts` + `+layout.svelte` (shared load + tab bar).
8. `src/routes/(app)/(admin)/events/[eventId]/+page.server.ts` + `+page.svelte` (edit tab).
9. `src/routes/(app)/(admin)/events/[eventId]/agenda/+page.server.ts` + `+page.svelte`.
10. `src/routes/(app)/(admin)/events/[eventId]/attendance/+page.server.ts` + `+page.svelte`.
11. `src/routes/(app)/(admin)/events/[eventId]/stats/+page.server.ts` + `+page.svelte`.
12. `src/lib/components/EventForm.svelte` (shared form component).
13. Update `(app)/+layout.svelte` — add admin nav item (Lv30+ conditional).
14. `tests/e2e/admin-events.spec.ts` — 12 E2E tests.
15. Update `tests/e2e/helpers/fixtures.ts` — add `superAdminUser` fixture (Lv40).
16. `docs/superpowers/overview.md` — flip M4 status to ✅ shipped, link spec + plan.
## Attention points
- **`marked.parse` return type.** In marked v5+, `marked.parse(src, { async: false })` returns `string` synchronously. Cast with `as string` to satisfy TypeScript. Do not call without the `{ async: false }` option or the return type becomes `string | Promise<string>`.
- **`patchAgendaSchedule` body shape.** The SDK types are the authoritative source. Check whether the endpoint expects `{ event_id, items: [{ agenda_id, start_time?, end_time? }] }` or a flat ordered array. Adapt `?/reorder` accordingly.
- **Agenda delete endpoint.** There is no `deleteAgendaItem` in the generated SDK. Verify whether `patchAgendaUpdate` accepts a `deleted: true` flag or whether there is an unlisted delete endpoint. If neither exists, hide the delete UI in the UI and note it as a backend gap.
- **`encodeEventBody` helper location.** Place it in `src/lib/server/events.ts` (server-only, uses `Buffer`) — not in a `.svelte` file or shared lib. Import from both `new/+page.server.ts` and `[eventId]/+page.server.ts`.
- **Lv30 `type` enforcement is server-side only.** The `type` radio is disabled in the UI for Lv30 users, but the server action must also strip or override `type` — UI-only guards are not security controls.
- **Tab active state detection.** `$page.url.pathname` for the edit tab is `/app/admin/events/[id]` (no trailing segment), while the other tabs have `/agenda`, `/attendance`, `/stats` suffixes. Use `endsWith` or an exact match helper — don't use `includes` (it would match the edit tab for all sub-routes).
- **Shared layout load re-runs on subpage navigation.** `getEventInfo` fires on every tab switch unless the layout is above the tab-level URL changes. SvelteKit only re-runs layout loads when their URL segment changes — so the `[eventId]` layout load runs once per eventId, not per tab. This is the intended behavior.
- **`svelte-dnd-action` Svelte 5.** Check the package's changelog for Svelte 5 support. If not yet compatible, use the `consider`/`finalize` event API on a plain `<ul>` with pointer-event listeners as a fallback.
- **`is_agenda_published` toggle.** When the admin publishes the agenda (`is_agenda_published: true`), the user-facing `/events/[eventId]` should reflect the change. M3's detail page already reads `is_agenda_published` from `getEventInfo` — the user just needs to reload. No real-time update needed.
- **`attendanceGuide` casing.** The API field is `attendance_guide` (snake_case); the Zod schema key uses camelCase `attendanceGuide` for superforms compatibility. The `encodeEventBody` helper maps `attendanceGuide → attendance_guide` before the API call.
- **`base` in admin tab links.** Use `base` from `$app/paths` in all `href` attributes — the app is mounted at `/app/`. Direct string concatenation is fine in server-side `redirect()` calls.
## Design rationale
**Why a nested `(admin)` route group instead of per-route guards?** A single permission check in `(admin)/+layout.server.ts` covers every admin route with one line of code. Per-route checks multiply with every new admin page and are easy to forget. The SvelteKit route group mechanism is the right abstraction here.
**Why hybrid tabs (real sub-routes) instead of query-param tabs?** Sub-routes give each tab a bookmarkable, shareable URL. They also let SvelteKit load only the data each tab needs — the attendance table doesn't load when the admin is on the stats tab. Query-param tabs load all data upfront or require client-side conditional fetching, both of which are worse.
**Why shared load in `[eventId]/+layout.server.ts` instead of each tab loading its own event info?** The edit tab and all read-only tabs need the event name (for the page title and breadcrumb). Loading it once in the layout and passing it down avoids duplicate `getEventInfo` calls on every tab switch. Each tab's `+page.server.ts` only loads the data specific to that tab.
**Why bytemd over a simple textarea + preview toggle?** Admins writing event descriptions need formatting confidence — a split-pane editor with live preview reduces errors and back-and-forth. The textarea + toggle approach was the conservative option, but given that description quality matters for user-facing events, the better editor is worth one dependency.
**Why no charting on the stats page?** `getEventStats` returns four scalars. Bar or donut charts would add a charting library (`layerchart`, `d3`, etc.) for four numbers. The same library will be needed for M5's global dashboard — deferring to M5 keeps M4 focused and lets the charting decision be made with more context about what M5 actually needs.
**Why `encodeEventBody` as a server-side helper?** Base64 encoding with `Buffer` is Node-only. Keeping the encode/decode logic in `$lib/server/` prevents accidental use in client code and makes it easy to test in isolation.

297
docs/superpowers/specs/2026-04-15-admin-users-stats-design.md Normal file
View File

@@ -0,0 +1,297 @@
# M5 — Admin Users & Stats (Design Spec)
Status: **Draft** — 2026-04-15. Fifth feature milestone (after M1 Foundation, M1.5 Test Infrastructure, M2 Profile, M3 Events, M4 Admin Events). Adds the admin-facing user management surface (`/admin/users`) and a global statistics page (`/admin/stats`), both gated at `OFFICIAL_ADMIN` (Lv40).
## Goal
Give Lv40+ administrators a paginated, sortable, filterable user list where they can edit permission levels inline, and a stats page showing total user count and per-event join/check-in numbers.
## Non-goals
- **User profile editing (beyond permission level).** Admins never edit another user's username, avatar, bio, etc. — only `permission_level`. Self-profile editing stays in M2's `/profile` route.
- **Charts / visualisations.** Stats are plain numbers and tables, no chart library.
- **Permission level distribution stat.** Dropped as meaningless at this stage.
- **Avatar upload.** Out of scope project-wide.
- **Bulk permission edits.** One user at a time via inline row editing.
- **User search by name / email.** The API only supports `permission_level` filter; no free-text search.
- **Check-in QR flow.** That is M6.
## Architecture
### Route group structure
```
src/routes/(app)/
├── (admin)/ ← existing, Lv30+
│ ├── +layout.server.ts ← existing Lv30 gate
│ └── admin/events/ ... ← existing
└── (admin-lv40)/ ← NEW
├── +layout.server.ts ← Lv40+ gate
└── admin/
├── users/
│ ├── +page.server.ts ← load: getUserList; action: ?/updatePermission
│ └── +page.svelte ← user list, inline row editing
└── stats/
├── +page.server.ts ← load: getStatsGlobal
└── +page.svelte ← total users card + event table
```
The outer `(app)/+layout.server.ts` already gates unauthenticated access. `(admin-lv40)` adds a second independent layer — `OFFICIAL_ADMIN` (Lv40) and above only. The existing `(admin)` group (Lv30) is untouched.
### Permission gate
```ts
// (app)/(admin-lv40)/+layout.server.ts
import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals }) => {
if (!locals.user || locals.user.permission_level < 40) {
error(403, '权限不足');
}
};
```
### Sidebar navigation
Two new entries added to the app shell sidebar, rendered only when `locals.user.permission_level >= 40`. They sit below the existing Lv30 admin links:
| Label | Route | Icon |
| -------- | -------------- | ----------- |
| 用户管理 | `/admin/users` | `Users` |
| 全局统计 | `/admin/stats` | `BarChart2` |
Since the sidebar is rendered in `(app)/+layout.svelte` with `data.user` from the layout load, the level check is a simple `{#if data.user.permission_level >= 40}` block.
---
## `/admin/users`
### URL shape
```
/admin/users?page=1&sort_by=permission_level&sort_order=desc&level=30
```
All params are optional with sensible defaults (page 1, sort by id ascending, no level filter). Page size is fixed at 20.
### Schema
```ts
// src/lib/schemas/admin-users.ts
import { z } from 'zod';
export const userListParamsSchema = z.object({
page: z.coerce.number().int().min(1).default(1),
sort_by: z.enum(['id', 'permission_level']).default('id'),
sort_order: z.enum(['asc', 'desc']).default('asc'),
level: z.coerce.number().int().optional()
});
export const updatePermissionSchema = z.object({
user_id: z.string().min(1),
permission_level: z.coerce.number().int()
});
```
### Load function
```ts
// (app)/(admin-lv40)/admin/users/+page.server.ts
import { superValidate } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { userListParamsSchema, updatePermissionSchema } from '$lib/schemas/admin-users';
export const load: PageServerLoad = async (event) => {
const url = event.url;
const params = userListParamsSchema.parse({
page: url.searchParams.get('page') ?? undefined,
sort_by: url.searchParams.get('sort_by') ?? undefined,
sort_order: url.searchParams.get('sort_order') ?? undefined,
level: url.searchParams.get('level') ?? undefined
});
const PAGE_SIZE = 20;
const api = createApiClient(event);
const result = await loadSdk(() =>
getUserList({
client: api,
query: {
offset: String((params.page - 1) * PAGE_SIZE),
limit: String(PAGE_SIZE),
sort_by: params.sort_by,
sort_order: params.sort_order,
...(params.level !== undefined ? { permission_level: params.level } : {})
}
})
);
const form = await superValidate(zod(updatePermissionSchema));
return {
users: result.data?.items ?? [],
total: result.data?.total ?? 0,
params,
pageSize: PAGE_SIZE,
form
};
};
```
### `?/updatePermission` action
```ts
export const actions = {
updatePermission: async (event) => {
const form = await superValidate(event.request, zod(updatePermissionSchema));
if (!form.valid) return fail(400, { form });
const api = createApiClient(event);
const result = await callSdk(() =>
patchUserUpdateByUserId({
client: api,
path: { user_id: form.data.user_id },
body: { permission_level: form.data.permission_level }
})
);
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
return { form };
}
};
```
On success the superforms `onResult` callback calls `invalidateAll()` and resets `editingUserId` to `null`, refreshing the list in place and collapsing the inline edit row. Pattern:
```ts
const { form, enhance } = superForm(data.form, {
onResult({ result }) {
if (result.type === 'success') {
editingUserId = null;
invalidateAll();
}
}
});
```
### Assignable levels
Computed server-side and passed to the page so the client never makes policy decisions:
```ts
// src/lib/permissions.ts (addition)
export function getAssignableLevels(editorLevel: number): number[] {
if (editorLevel >= 50) return [0, 5, 10, 15, 20, 30, 40, 50];
if (editorLevel >= 40) return [0, 5, 10, 15, 20, 30];
return [];
}
```
`load` calls `getAssignableLevels(locals.user.permission_level)` and returns the array. The client renders only those options in the inline `<select>`.
A user cannot edit their own row — the Edit button is hidden when `row.user_id === data.user.user_id`.
### User list UI
DaisyUI `table table-zebra` with these columns:
| Column | Notes |
| --------------- | ------------------------------------------------------------- |
| Avatar + 用户名 | `<img>` (or avatar placeholder) + `font-mono` username |
| 昵称 | `font-sans` |
| 邮箱 | `font-mono text-sm` |
| 权限等级 | `badge` — view mode; `<select>` + confirm/cancel in edit mode |
| 操作 | Edit button (hidden for self); Confirm/Cancel in edit mode |
**Sort**: column headers for 用户名 (sort_by=id) and 权限等级 (sort_by=permission_level) are `<a>` links that toggle `sort_order` in the URL. Active sort column shows ↑ / ↓.
**Level filter**: `<select>` above the table with options 全部 | 封禁 | 受限 | 普通用户 | 开发者 | 签到管理员 | 社区活动主办. Navigates on change (no submit button).
**Pagination**: Prev / Next links. Prev hidden on page 1; Next hidden when `(page - 1) * pageSize + users.length >= total`.
**Inline edit state**: `let editingUserId = $state<string | null>(null)` and `let editingLevel = $state<number>(0)` in the component. Clicking Edit sets both; clicking Cancel resets to `null`. The `<form>` for confirm has `method="POST" action="?/updatePermission"` with hidden `user_id` input and a `<select name="permission_level">` showing `assignableLevels`. If `assignableLevels` is empty for a row (shouldn't happen given the Lv40 gate, but defensive), the Edit button is absent.
Error from the action displayed as a `alert alert-error alert-soft` below the table (via superforms `$message`).
---
## `/admin/stats`
### Load function
```ts
// (app)/(admin-lv40)/admin/stats/+page.server.ts
export const load: PageServerLoad = async (event) => {
const api = createApiClient(event);
const result = await loadSdk(() => getStatsGlobal({ client: api }));
const stats = result.data!;
return {
totalUsers: stats.total_users ?? 0,
eventJoinCheckin: stats.event_join_checkin ?? []
};
};
```
### Stats page UI
Two blocks:
**总用户数** — DaisyUI `stat` component inside a `stats` container:
```html
<div class="stats shadow">
<div class="stat">
<div class="stat-title">总用户数</div>
<div class="stat-value">{data.totalUsers.toLocaleString()}</div>
</div>
</div>
```
**活动报名与签到** — DaisyUI `table`:
| 活动名称 | 报名人数 | 签到人数 |
| ------------ | ----------------------- | -------------------------- |
| {event.name} | {event.join_count ?? 0} | {event.checkin_count ?? 0} |
Empty state: `<p class="text-base-content/50">暂无活动数据</p>` when `eventJoinCheckin` is empty.
---
## Schemas
New file: `src/lib/schemas/admin-users.ts` (see above). New export added to `src/lib/permissions.ts`: `getAssignableLevels`.
---
## E2E tests
File: `tests/e2e/admin-users.spec.ts` and `tests/e2e/admin-stats.spec.ts`.
**admin-users.spec.ts:**
1. Users list renders with correct rows from mock data
2. Pagination: next page loads with incremented `page` param, prev page link hidden on page 1
3. Sort by permission level: clicking the column header flips `sort_order` in URL
4. Level filter: selecting a level navigates with `level=` param, clears on 全部
5. Inline edit happy path: click Edit → confirm new level → mock returns 200 → row shows updated badge
6. Permission-matrix violation: mock returns 403 on `PATCH /user/update/{id}` → inline error shown
7. Own row: Edit button absent for the logged-in user's own row
**admin-stats.spec.ts:**
1. Stats page renders total users number
2. Event table renders rows from mock `getStatsGlobal` response
3. Empty state shown when `event_join_checkin` is `[]`
**Permission gate tests (in both files):**
- Lv30 user fixture → GET `/admin/users` returns 403 page with "权限不足"
---
## Attention points
- **`getUserList` query params are strings.** The generated SDK types for `GetUserListData.query` have `offset` and `limit` as `string`, not `number`. Always `String(n)` before passing.
- **`patchUserUpdateByUserId` body accepts the full `ServiceUserUserInfoUpdateData`.** Only send `{ permission_level }` — do not inadvertently overwrite other fields.
- **`sort_order` vs `sort_dir`.** The React source used `sort_dir`; the generated SDK type uses `sort_order`. Use the SDK's name.
- **Inline edit and form action coexistence.** The page has one superform instance for `updatePermissionSchema`. Because multiple rows could theoretically be in edit mode (guarded by `editingUserId` state), only one form submission at a time is expected. The `user_id` hidden input must be updated reactively when `editingUserId` changes.
- **Sidebar visibility guard.** The `(admin-lv40)` layout only fires on navigation to those routes — it does not affect the sidebar render. The sidebar's `{#if data.user.permission_level >= 40}` guard must mirror the layout gate independently.

278
docs/superpowers/specs/2026-04-16-agenda-admin-redesign.md Normal file
View File

@@ -0,0 +1,278 @@
# Admin Agenda Page Redesign (Design Spec)
Status: **Draft** — 2026-04-16. Fixes two bugs in the admin agenda page and redesigns the list structure to support a proper approve → schedule workflow.
## Problem
Two issues in `/admin/events/[eventId]/agenda/`:
1. **Missing approve action.** `patchAgendaReview` exists in the SDK with `status: 'approved' | 'rejected'`, but only the rejected path was wired up (via the "delete" button). There was no way to approve a submission.
2. **Go zero-time displayed.** The backend returns Go's zero value (`"0001-01-01T…"`) for `start_time`/`end_time` on unscheduled items. The existing `{#if item.start_time}` guard treats a non-empty string as "scheduled," showing `0001-01-01 08:05 — 0001-01-01 08:05` on every pending item.
## Goal
Redesign the admin agenda page with three tab-separated lists and a full approve/reject/edit/reschedule workflow. The backend API is fixed — no new SDK endpoints needed.
## Non-goals
- User-facing agenda submission or schedule display (already shipped in M7).
- A real DELETE endpoint — the backend has none; rejection is the terminal action.
- Bulk approve/reject operations.
- Drag-and-drop reordering — dropped entirely. Items are time-ordered by the server; admins control order by editing times.
- Reordering within any list.
## Architecture
**Files changed:**
```
src/routes/(app)/(admin)/admin/events/[eventId]/agenda/
├── +page.server.ts ← add ?/approve action; rename ?/delete → ?/reject
└── +page.svelte ← three sub-tabs; status-aware item rows; approve dialog
src/lib/schemas/agenda.ts
└── agendaApproveSchema ← new: required start_time + end_time (datetime-local)
```
No new routes. No new SDK calls beyond what already exists. `svelte-dnd-action` is no longer used on this page — the `DndAgendaItem` type alias and all `dndzone` / `onconsider` / `onfinalize` code are removed.
## UI structure
### Sub-tabs
Three `tabs-border` sub-tabs inside the agenda page (client-side `$state`, no URL routing), rendered above the item list. Match the existing outer tab bar style (`font-mono text-[0.78rem] tracking-wide tab-active`):
```
待审核 (N) 已安排 (N) 已拒绝 (N)
```
Counts are derived reactively from `data.items` filtered by status. All three tabs are plain static lists — no DnD on any of them.
### 待审核 tab
Per-item row (no time shown, no grip):
```
[card bg-base-100 card-border]
[item-body]
name (font-medium)
提交者：[nickname → /profile/userId] (text-xs text-base-content/50)
[badge badge-sm badge-ghost] 待审核
[btn btn-ghost btn-xs text-success] ✓ 通过 ← opens approve dialog
[btn btn-ghost btn-xs] ✏ edit icon
[btn btn-ghost btn-xs text-error] ✗ reject icon
```
**Approve button** opens a Bits UI dialog (`?/approve` action):
- Title: "审核通过"; subtitle shows item name
- `start_time` datetime-local input (required)
- `end_time` datetime-local input (required)
- Cancel (`btn btn-ghost`) / 确认通过 (`btn btn-primary`)
**Reject button** — inline `confirm('确认拒绝此议程？')` prompt → `?/reject` action → item moves to 已拒绝 tab.
**Edit button** — opens the existing edit dialog (unchanged).
### 已安排 tab
Static list, no DnD, sorted by `start_time` ascending (server-side). Per-item row:
```
[card bg-base-100 card-border]
[item-body]
name (font-medium)
提交者：[nickname → /profile/userId] (text-xs text-base-content/50)
HH:mm — HH:mm (font-mono text-xs text-base-content/40, only if start_time set)
[badge badge-sm badge-success badge-soft] 已通过
[btn btn-ghost btn-xs] ⏱ clock icon (reschedule)
[btn btn-ghost btn-xs] ✏ edit icon
[btn btn-ghost btn-xs text-error] ✗ remove icon
```
Time display is gated on `item.status === 'approved' && item.start_time` — this eliminates the Go zero-time bug without any date string inspection.
Reschedule opens the existing schedule dialog (`?/schedule` action, unchanged).
Remove button — `confirm('确认移除此议程？（状态将置为已拒绝）')` → `?/reject`. Same action, different confirm message from the pending tab's reject button.
### 已拒绝 tab
Read-only. No actions. No DnD.
```
[card bg-base-100 card-border]
[item-body]
name (font-medium)
提交者：[nickname → /profile/userId] (text-xs text-base-content/50)
[badge badge-sm badge-error badge-soft] 已拒绝
```
## Schema changes (`src/lib/schemas/agenda.ts`)
```ts
// New — used by the approve dialog
export const agendaApproveSchema = z.object({
start_time: z.string().min(1, '请填写开始时间'),
end_time: z.string().min(1, '请填写结束时间')
});
export type AgendaApproveFormData = z.infer<typeof agendaApproveSchema>;
```
`agendaItemSchema` and `agendaScheduleSchema` are unchanged.
## Server changes (`+page.server.ts`)
### `load`
Add `approveForm` alongside the existing `updateForm` and `scheduleForm`. Follow the existing `ZodObjectType` cast alias pattern:
```ts
// Same cast pattern as itemSchema / schedSchema already in this file
const apprvSchema = agendaApproveSchema as unknown as ZodObjectType;
const approveForm = await superValidate(zod(apprvSchema));
return { items, updateForm, scheduleForm, approveForm };
```
Submitter nickname is already available in `ServiceAgendaAgendaListItem` via `user_profile?: { user_id, username, nickname }` — no extra API call needed.
### `?/approve` (new)
```ts
approve: async (event) => {
const raw = await event.request.formData();
const agenda_id = raw.get('agenda_id') as string;
const form = await superValidate(raw, zod(apprvSchema));
if (!form.valid) return fail(400, { form });
const fd = form.data as unknown as AgendaApproveFormData;
const api = createApiClient(event);
// Step 1: approve
const reviewResult = await callSdk(() =>
patchAgendaReview({
client: api,
body: { agenda_id, event_id: event.params.eventId, status: 'approved' }
})
);
if (isErr(reviewResult)) return setError(form, '', unwrapErr(reviewResult).message);
// Step 2: schedule
const schedResult = await callSdk(() =>
patchAgendaSchedule({
client: api,
body: {
agenda_id,
start_time: new Date(fd.start_time).toISOString(),
end_time: new Date(fd.end_time).toISOString()
}
})
);
if (isErr(schedResult)) return setError(form, '', unwrapErr(schedResult).message);
return { form };
};
```
### `?/reject` (renamed from `?/delete`)
Body is identical — `patchAgendaReview({ status: 'rejected' })`. Only the action name changes.
### `?/update`, `?/schedule`
Unchanged.
## Client changes (`+page.svelte`)
### State
```ts
let activeTab = $state<'pending' | 'approved' | 'rejected'>('pending');
// Derived filtered lists — no DnD state needed
const pendingItems = $derived(data.items.filter((i) => i.status === 'pending'));
const approvedItems = $derived(data.items.filter((i) => i.status === 'approved'));
const rejectedItems = $derived(data.items.filter((i) => i.status === 'rejected'));
```
`editingItem` and `approveOpen` / `editOpen` / `scheduleOpen` follow the same `$state` pattern as existing dialogs. The `DndAgendaItem` type alias and all `dndzone` / `onconsider` / `onfinalize` handlers are removed.
### Approve dialog superform
```ts
const {
form: approveForm,
errors: approveErrors,
enhance: approveEnhance,
submitting: approveSubmitting
} = superForm(data.approveForm, {
dataType: 'form',
onResult: ({ result }) => {
if (result.type === 'success') {
approveOpen = false;
invalidateAll();
}
}
});
```
`openApprove(item)` pre-clears the time fields (no existing time on pending items).
### Submitter link
```svelte
{#if item.user_profile}
<p class="text-xs text-base-content/50">
提交者：<a
href="{base}/profile/{item.user_profile.user_id}"
class="font-medium hover:text-primary"
>{item.user_profile.nickname ?? item.user_profile.username}</a
>
</p>
{/if}
```
Applied identically in all three tab lists.
### Time display fix
The existing `{#if item.start_time}` guard is in the current single unified list. With the new structure it only applies to the 已安排 tab, so gate it as:
```svelte
{#if item.status === 'approved' && item.start_time}
```
This is the only change needed to fix the Go zero-time display bug — no date string inspection required.
## Time range validation
Agenda slots must fall within the event's own time bounds. This applies to both the approve dialog and the reschedule dialog.
**Rules:**
- `start_time >= event.start_time`
- `end_time <= event.end_time`
- `start_time < end_time`
**Client-side:** The approve and schedule dialogs receive `data.ev.start_time` / `data.ev.end_time` from the layout (already loaded — no extra API call). Validate inline before submission and surface errors via superforms `_errors`:
- "开始时间不能早于活动开始时间"
- "结束时间不能晚于活动结束时间"
- "结束时间必须晚于开始时间"
**Server-side:** `?/approve` and `?/schedule` actions re-check the same rules using `event.locals` or a fresh `getEventInfo` call. Return `setError(form, '', message)` on violation. This defends against clock skew and direct POSTs bypassing the client.
`data.ev` is available in the agenda page's `+page.server.ts` via the parent layout's load — no extra fetch needed.
## Blocking rules
The approve action is unavailable after the agenda is published (`patchAgendaReview` returns an error in that case). The backend enforces this; the client does not need a pre-check.
## Out of scope
- Re-approving a previously rejected item (user must resubmit).
- Admin-initiated deletion (no backend DELETE endpoint; rejection is the terminal action).
- Bulk operations.
- Time overlap validation — not checked. Overlapping slots are allowed; the admin is responsible for scheduling. Adding overlap checks would make rescheduling painful (impossible to slide a slot without first creating a gap).
- Sorting within tabs beyond the existing time-ordered server response.

142
docs/superpowers/specs/2026-04-16-checkin-qr-design.md Normal file
View File

@@ -0,0 +1,142 @@
# M6 — Check-in / QR (Design Spec)
Status: **Draft** — 2026-04-16. Sixth feature milestone. Adds the full check-in surface: a staff-facing QR scanner page and an attendee-facing QR display dialog.
## Goal
Ship end-to-end check-in for live events. Staff at Lv20+ (`CHECKIN_MANAGER`) get a `/checkin` page in the sidebar — camera viewfinder (via `@zxing/browser`) with a 6-digit manual fallback — that submits scanned codes to the backend. Attendees get a "签到" button on the event detail page that opens a QR display dialog; the dialog polls for confirmation and shows a calm success state when the staff scans their code.
## Non-goals
- **Attendance list.** Already shipped in M4 (`/admin/events/[eventId]/attendance`). M6 does not touch it.
- **Force-marking users without a code.** No admin user-lookup check-in override.
- **Per-event scanner scoping.** `POST /event/checkin/submit` takes only `{ checkin_code }` — no event ID — so the scanner is universal. No event picker on the scanner page.
- **BarcodeDetector API.** Rejected: staff use iPhones (Safari). `@zxing/browser` only.
- **Scan history / recent check-ins list.** Not in scope.
## Architecture
### Route group and new files
```
src/routes/(app)/
├── (staff-lv20)/
│ ├── +layout.server.ts ← Lv20+ gate: error(403) if permission_level < 20
│ └── checkin/
│ ├── +page.server.ts ← action: ?/submit → postEventCheckinSubmit
│ └── +page.svelte ← scanner UI
├── checkin-code/
│ ├── +server.ts ← GET: proxies getEventCheckin
│ └── query/
│ └── +server.ts ← GET: proxies getEventCheckinQuery
└── (app)/events/[eventId]/
└── +page.svelte ← add CheckinQrDialog button (existing file, modified)
src/lib/components/
├── CheckinScanner.svelte ← @zxing/browser camera component
├── OtpInput.svelte ← 6-box OTP input (scanner manual fallback only)
└── CheckinQrDialog.svelte ← attendee QR display dialog
```
### Permission gate
`(staff-lv20)/+layout.server.ts` mirrors the existing `(admin)` and `(admin-lv40)` pattern exactly:
```ts
import { error } from '@sveltejs/kit';
export const load = async ({ locals }) => {
if (!locals.user || locals.user.permission_level < 20) {
error(403, '权限不足');
}
};
```
The sidebar "扫码签到" entry is conditionally rendered in `(app)/+layout.svelte` based on `data.user.permission_level >= 20`.
### Staff scanner — data flow
1. Staff navigates to `/checkin` (sidebar entry, Lv20+ only).
2. `+page.server.ts` form action `?/submit`:
- Reads `checkin_code` from `formData`
- Calls `postEventCheckinSubmit` via `callSdk`
- Returns `{ success: true }` or `setError(form, '', message)`
3. `+page.svelte` layout — camera top, manual input below:
- `{#if browser}` mounts `<CheckinScanner>` which opens the rear camera via `BrowserMultiFormatReader` from `@zxing/browser`
- On decode: auto-populates and submits a hidden `<form use:enhance>` with the scanned `checkin_code`
- Below the viewfinder: an "或手动输入" divider and an OTP-style input (`OtpInput.svelte`) — 6 individual `<input class="input" maxlength="1" inputmode="numeric">` boxes with auto-advance-on-keystroke and backspace-retreat behaviour. When all 6 digits are filled the form auto-submits; a separate submit button is also provided as fallback.
- Result shown inline: `alert alert-success` on success, `alert alert-error` on failure; auto-clears after 3 s and re-arms the scanner
### Attendee QR dialog — data flow
**Event detail sidebar button progression** (modifies existing `(app)/events/[eventId]/+page.svelte`):
| State | `isJoined` | `isCheckedIn` | In date range | Button |
| --------------------- | ---------- | ------------- | ------------- | ----------------------- |
| Not joined | false | — | — | 立即加入 |
| Joined, before event | true | false | false | 未到签到时间 (disabled) |
| Joined, event ongoing | true | false | true | 签到 → opens dialog |
| Checked in | true | true | — | 已签到 (disabled) |
`isCheckedIn` maps to `is_checked_in` on the event info response (`ServiceEventEventInfoData`) — already loaded by the event detail page's `load` function via `getEventInfo`. No extra API call needed.
**Dialog component `CheckinQrDialog.svelte`** — three states:
1. **Loading**: spinner, "正在获取签到码…"
2. **QR displayed**: `GET /checkin-code?event_id=` returns `{ checkin_code }`. The component:
- Renders a QR image client-side via `qrcode` npm package (encodes the code string)
- Displays the 6-digit code in `font-mono` beneath the QR
- Shows "请将二维码出示给工作人员扫描" in muted body text
- Shows a subtle pulsing dot + "等待签到确认…"
- Starts a 3 s `$effect` polling loop calling `GET /checkin-code/query?event_id=`
3. **Success**: polling detects `checkin_at` is set. Shows a muted checkmark circle + "签到成功". Calls `invalidateAll()` to refresh page data (button updates to "已签到"). Dialog auto-closes after 1.5 s.
**Error state**: if `GET /checkin-code` fails, shows a muted error message and a retry button. Does not auto-close.
### Server proxy routes
Both routes follow the same pattern as the existing `/kyc-status/+server.ts`:
```
GET /checkin-code?event_id=<uuid>
→ createApiClient(event)
→ getEventCheckin({ client: api, query: { event_id } })
→ returns JSON { checkin_code: string }
GET /checkin-code/query?event_id=<uuid>
→ createApiClient(event)
→ getEventCheckinQuery({ client: api, query: { event_id } })
→ returns JSON { checkin_at: string | null }
```
Both require authentication (inside `(app)`). Both return `error(400)` if `event_id` is missing.
## Dependencies
Two new packages:
| Package | Purpose |
| ---------------- | --------------------------------------------------------------- |
| `@zxing/browser` | QR / barcode decoding from camera stream on iOS Safari + others |
| `qrcode` | Client-side QR image generation for the attendee dialog |
## UI conventions
- Scanner viewfinder: full-width within the page content area, capped at a sensible max-height on desktop. Corner brackets as viewfinder guides (CSS only, no SVG overhead).
- Result alerts: `alert alert-success alert-soft` / `alert alert-error alert-soft`, same as the rest of the app.
- QR dialog: Bits UI `Dialog` with DaisyUI classes, consistent with existing KYC and join dialogs in M3.
- Success state: muted — `bg-base-200` circle, `✓` in `text-base-content/60`, "签到成功" in normal weight. No bright greens.
- All copy in zh-CN.
## E2E test coverage
| Scenario | Mock overrides |
| ------------------------------------------ | --------------------------------------------------------------------- |
| Staff scans a valid code → 200 | `POST /event/checkin/submit` → `{ status: 0 }` |
| Staff submits invalid code → error shown | `POST /event/checkin/submit` → 400 |
| Manual input submits correctly | same action, keyboard path |
| Lv10 user hits `/checkin` → 403 | no override needed (layout gate) |
| Attendee dialog: code loads and QR shown | `GET /event/checkin` → `{ checkin_code: '483917' }` |
| Attendee dialog: poll detects check-in | `GET /event/checkin/query` → `{ checkin_at: '2026-04-16T12:00:00Z' }` |
| Attendee dialog: fetch error → error state | `GET /event/checkin` → 500 |
Camera-dependent tests (actual QR scanning via `@zxing/browser`) are not covered by E2E — the scanner component is tested via manual input path only in Playwright. Camera integration is verified manually.

131
docs/superpowers/specs/2026-04-16-consistency-polish-design.md Normal file
View File

@@ -0,0 +1,131 @@
# Design Spec: UI Consistency Polish
**Date:** 2026-04-16
**Scope:** Cross-page consistency pass — cards, buttons, badges, typography, and tab navigation
---
## Context
The app has accumulated four categories of visual inconsistency across its pages and components:
1. **Page title typography** — the workbench uses `font-display font-light italic` while every other page uses `font-sans font-semibold`. Readers perceive two different design systems.
2. **Card backgrounds** — workbench cards use `bg-base-100` (same as the page background, creating no lift), EventCard uses `bg-base-200`, and ProfileCard uses a manually-specified border/radius without the `.card` class. `bg-base-300` is the clearest surface-against-background signal.
3. **CTA link chips** — the WorkbenchWelcome and WorkbenchProfile cards use hand-rolled chip buttons (`border border-base-300 px-4 py-3 …`) instead of DaisyUI `.btn.btn-ghost`. WorkbenchCurrentEvent's "立即签到" trigger also uses custom classes.
4. **Badge/status chips** — EventCard, the workbench event components, the event detail hero, and `AgendaMyList` use custom `inline-flex` chips with manual border/color styling. ProfileCard and the admin users table already use DaisyUI `.badge`. Two systems for the same concept.
5. **Tab navigation** — the events list page uses a hand-rolled tab switcher with manual `border-b-2` active state instead of DaisyUI `.tabs.tabs-border`.
6. **Missed cards** — the event detail page and both agenda components (`AgendaMyList`, `AgendaSchedule`) use `bg-base-200` and were not in the initial card audit.
The fix unifies everything to the DaisyUI primitives already in use on the majority of pages.
---
## Decisions
| Category | Decision |
| -------------- | ------------------------------------------------------------------ |
| Page titles | `font-sans font-semibold tracking-tight` on all pages |
| Card surfaces | `bg-base-300` on all top-level cards |
| CTA buttons | `.btn.btn-ghost` (secondary) / `.btn.btn-primary` (primary action) |
| Status badges | `.badge.badge-soft.badge-{color}` everywhere |
| Tab navigation | `.tabs.tabs-border` with `tab-active` (DaisyUI native) |
---
## Files and Changes
### `src/routes/(app)/+page.svelte`
- `h1` classes: `font-display font-light tracking-tight italic` → `font-sans font-semibold tracking-tight`
- Workbench subtitle span: `text-[0.58rem]` → `text-[0.6rem]` (matches all other pages)
### `src/lib/components/WorkbenchWelcome.svelte`
- Card: `bg-base-100` → `bg-base-300`
- Two CTA `<a>` chips → `<a class="btn btn-ghost">` (keep icon children, remove all manual border/padding/color classes)
### `src/lib/components/WorkbenchCurrentEvent.svelte`
- Card: `bg-base-100` → `bg-base-300`
- "进行中" chip → `<span class="badge badge-soft badge-primary">` (keep the `<span class="size-[5px] animate-pulse …">` dot as a child)
- "待开始" chip → `<span class="badge badge-soft badge-warning">`
- "已签到" chip → `<span class="badge badge-soft badge-success">`
- `Dialog.Trigger` "立即签到": replace custom `bg-primary/10` classes → `class="btn btn-primary w-full"` (keep icon child)
### `src/lib/components/WorkbenchProfile.svelte`
- Card: `bg-base-100` → `bg-base-300`
- Bottom CTA link "完善资料 →": replace custom chip classes → `class="btn btn-ghost w-full mt-auto"`
### `src/lib/components/WorkbenchUpcoming.svelte`
- Card: `bg-base-100` → `bg-base-300`
- Inner event slot cards: `bg-base-200/50` → `bg-base-100/50` (lighter than outer card to maintain hierarchy)
- "待开始" chip → `<span class="badge badge-soft badge-warning badge-sm">`
### `src/lib/components/EventCard.svelte`
- Card: `bg-base-200` → `bg-base-300`
- Image overlay type badge: replace manual border/text classes → `<span class="badge badge-soft uppercase absolute top-2.5 right-2.5 {ev.type === 'party' ? 'badge-error' : 'badge-secondary'}">` (DaisyUI badge does not add `uppercase` by default; keep it explicitly so "Party"/"Official" preserve their label casing)
- "需要 KYC" chip → `<span class="badge badge-soft badge-warning badge-sm"><ShieldCheck class="size-2.5" />需要 KYC</span>`
- "已报名" chip → `<span class="badge badge-soft badge-success badge-sm"><Ticket class="size-2.5" />已报名</span>`
- "进行中" chip → `<span class="badge badge-soft badge-primary badge-sm">进行中</span>`
### `src/lib/components/ProfileCard.svelte`
- Outer wrapper `div`: `overflow-hidden rounded-[--radius-box] border border-base-300/40` → `card overflow-hidden bg-base-300 card-border`
- Inner structure (`p-6` wrapper and two-column layout) is **unchanged**
- `allow_public` badge already uses `badge badge-soft` — no change needed
### `src/routes/(app)/(admin)/admin/events/+page.svelte`
- Per-row type badge: replace manual `rounded-[--radius-field] border px-1.5 py-0.5 …` classes → `badge badge-soft badge-sm {ev.type === 'party' ? 'badge-error' : 'badge-secondary'}`
### `src/routes/(app)/(admin-lv40)/admin/users/+page.svelte`
- Permission badges: `badge {permissionBadgeClass(…)} badge-sm` → `badge badge-soft {permissionBadgeClass(…)} badge-sm` (add `badge-soft` only)
### `src/routes/(app)/events/+page.svelte`
- Tab switcher: replace custom `flex border-b` + manual `border-b-2 border-primary` active state → `<div class="tabs tabs-border mb-6">` with `<button class="tab {tab === 'all' ? 'tab-active' : ''}">` pattern
- Joined count badge in the tab: custom `rounded-full border border-primary/28 bg-primary/12` span → `<span class="badge badge-soft badge-primary badge-sm">`
### `src/routes/(app)/events/[eventId]/+page.svelte`
- Hero badges (3 inline-flex chips): "需要 KYC", "已报名", type badge → `badge badge-soft badge-{warning|success|error|secondary}` with `uppercase` kept on text (same treatment as EventCard type badge)
- 4 content/sidebar cards: `card bg-base-200` → `card bg-base-300` (description, attendance guide, empty state, sidebar)
### `src/lib/components/AgendaMyList.svelte`
- Card: `card bg-base-200` → `card bg-base-300`
- Agenda status badges: `badge badge-sm {badgeClass(…)}` → `badge badge-soft badge-sm {badgeClass(…)}` (add `badge-soft`)
### `src/lib/components/AgendaSchedule.svelte`
- Card: `card bg-base-200` → `card bg-base-300`
---
## Out of Scope
- `WorkbenchWelcome` greeting typography ("你好，X") — content, not a heading
- Admin events table event name style (`font-display italic`) — row-level label, not a page title
- `ProfileCard` copy-link button (dashed border is intentional semantic styling for a copyable URL)
- Form inputs, table layout, spacing scales
- Any animation/transition changes
---
## Verification
1. `pnpm check` — no TypeScript or Svelte errors
2. `pnpm lint` — no lint/formatting errors
3. Visual smoke test at each route:
- `/app/` — workbench: title is semibold, all cards are base-300, chips are DaisyUI ghost buttons, status badges are badge-soft
- `/app/profile/:id` — ProfileCard uses `.card.bg-base-300`, badges unchanged
- `/app/events` — tab switcher uses DaisyUI tabs, count badge is badge-soft, EventCard background is base-300
- `/app/events/:id` — hero badges are badge-soft, all 4 content cards are base-300
- `/app/admin/events` — row type badges render as badge-soft
- `/app/admin/users` — permission badges have the badge-soft fill
- Event detail agenda section — AgendaMyList and AgendaSchedule cards are base-300
4. No regressions: dialog trigger "立即签到" still opens the QR dialog; join/checkin/agenda flows unchanged

296
docs/superpowers/specs/2026-04-16-user-agenda-design.md Normal file
View File

@@ -0,0 +1,296 @@
# M7 — User Agenda Submission (Design Spec)
Status: **Draft** — 2026-04-16. Seventh feature milestone. Lets joined attendees submit agenda proposals for an event, track review status, and view the published schedule once organizers release it.
## Goal
Two surfaces on the existing event detail page (`/events/[eventId]`):
1. **Submission workflow.** A joined attendee can open a dialog to submit a `name` + `description` proposal. Their submissions appear in a "我的议程" sidebar card with compact status rows; pending items can be edited before the event starts.
2. **Published schedule.** Once `is_agenda_published = true`, an "活动议程" card appears in the main content column showing all approved + scheduled items as a timeline (right-aligned time column | name + description). Visible to any user who can view the event, not just joined attendees.
No new routes — everything lives in the existing event detail page.
## Non-goals
- **Admin review / approval / scheduling.** Already shipped in M4 (`/admin/events/[eventId]/agenda`). M7 does not touch that page.
- **Per-event submission limits on the backend.** The 5-pending cap is enforced client-side and re-checked server-side; we do not add backend-level quota changes.
- **Rich markdown editor.** Plain `<textarea>` only — the React reference confirms this is the right fidelity for submission.
- **Description rendering in the list.** Item rows show name + badge only (+ time range for approved). No description snippet.
## Architecture
### Files changed
```
src/routes/(app)/events/[eventId]/
├── +page.server.ts ← load: add getAgendaMyList + getAgendaSchedule; actions: +submitAgenda, +editAgenda
└── +page.svelte ← add AgendaSchedule to main content; AgendaMyList to aside; derive canSubmit
src/lib/components/
├── AgendaDialog.svelte ← new: submit + edit dialog (mode prop)
├── AgendaMyList.svelte ← new: sidebar card with compact item rows
└── AgendaSchedule.svelte ← new: main content timeline card (published schedule)
src/lib/schemas/agenda.ts
└── agendaItemSchema ← fix: description optional → required (min 1)
```
No new routes. No new route groups. No new server endpoints.
### Load (`+page.server.ts`)
The existing `load` fans out `getEventInfo` (fatal via `loadSdk`) and `getEventGuide` (non-fatal via `callSdk`, only when joined). A third non-fatal call is added:
```ts
let myAgendas: DataAgenda[] = [];
if (ev.is_joined) {
const result = await callSdk(() =>
getAgendaMyList({ client: api, query: { event_id: event.params.eventId } })
);
if (isOk(result)) {
myAgendas = (unwrapOk(result).data ?? []).map((a) => ({
...a,
// Decode base64 description server-side so the edit dialog pre-fills
// with readable text. Buffer is Node built-in; atob is browser-only.
description: a.description
? Buffer.from(a.description, 'base64').toString('utf-8')
: undefined
}));
}
// On failure myAgendas stays [] — card renders with empty state, not error.
}
// Fourth call: published schedule — only when agenda is published.
// GET /agenda/schedule returns 403 if not published; guard the call to avoid the error.
let agendaSchedule: Array<DataAgendaDoc & { descriptionHtml: string | null }> = [];
if (ev.is_agenda_published) {
const schedResult = await callSdk(() =>
getAgendaSchedule({ client: api, query: { event_id: event.params.eventId } })
);
if (isOk(schedResult)) {
agendaSchedule = await Promise.all(
(unwrapOk(schedResult).data ?? []).map(async (item) => ({
...item,
descriptionHtml: item.description
? String(await marked.parse(Buffer.from(item.description, 'base64').toString('utf-8')))
: null
}))
);
}
// On failure agendaSchedule stays [] — card does not render.
}
return { ev, descriptionHtml, attendanceGuideHtml, myAgendas, agendaSchedule };
```
Decoding at load time keeps components free of base64 logic. Schedule descriptions are rendered to HTML via `marked` (same pattern as event description) so `AgendaSchedule.svelte` can use `{@html}`.
### Actions (`+page.server.ts`)
Two new actions alongside `join` and `kycSession`:
**`?/submitAgenda`**
1. Parse FormData: `event_id`, `name`, `description`.
2. Validate via `superValidate` + `agendaItemSchema`; return `fail(400, { form })` if invalid.
3. Re-check blocking rules server-side (race-condition defence):
- Fetch `getEventInfo` to get fresh `is_agenda_published` and `start_time`.
- Fetch `getAgendaMyList` to count `status === 'pending'` items.
- Return `setError(form, '', '…')` if any rule fires.
4. Encode: `const encoded = Buffer.from(description).toString('base64')`.
5. Call `postAgendaSubmit({ client: api, body: { event_id, name, description: encoded } })`.
6. On SDK error: `return setError(form, '', unwrapErr(result).message)`.
7. On success: return `{}` — client calls `invalidateAll()` to refresh `myAgendas`.
Blocking messages:
- Agenda published → "议程已发布，无法再提交"
- Event started → "活动已开始，无法再提交议程"
- 5-pending reached → "您已提交 5 个待审核议程，请等待审核后再提交"
**`?/editAgenda`**
1. Parse FormData: `agenda_id`, `name`, `description`.
2. Validate via `superValidate` + `agendaItemSchema`.
3. Encode description.
4. Call `patchAgendaUpdate({ client: api, body: { agenda_id, name, description: encoded } })`.
5. On SDK error: surface via `setError`. Backend returns 403/404 if the agenda doesn't belong to the caller — `normalizeSdkError` unwraps the message.
6. On success: return `{}` — client calls `invalidateAll()`.
No server-side ownership pre-check: the backend is authoritative. We don't need an extra round-trip.
### Schema fix (`src/lib/schemas/agenda.ts`)
```ts
// Before
description: z.string().optional();
// After
description: z.string().min(1, '请填写描述');
```
`ServiceAgendaSubmitData.description` is `string` (required); the schema must match.
## UI components
### `AgendaDialog.svelte`
```
Props:
mode: 'submit' | 'edit'
eventId: string
item?: DataAgenda // edit mode only — pre-fills name + description
children: Snippet // the trigger element
```
Bits UI `Dialog.Root` wrapping a superforms form. Title: "提交议程" (submit) / "编辑议程" (edit). Two fields:
- **名称** — `<label class="input">` pattern, plain text, max 255 chars. Error: "请填写名称" / "名称最多 255 字".
- **描述** — `<textarea>` (4 rows), required. Error: "请填写描述".
Submit button: `btn-primary btn-block`. Loading state: inline `loading-spinner loading-sm`. On `$result` success: close dialog, `invalidateAll()`.
Form action: `?/submitAgenda` or `?/editAgenda` depending on `mode`. The hidden `agenda_id` field is included in edit mode.
`dataType: 'form'` (no JSON encoding needed — superforms default).
### `AgendaMyList.svelte`
```
Props:
myAgendas: DataAgenda[]
eventId: string
canSubmit: boolean
```
DaisyUI card (`card bg-base-200`):
**Header row:**
```
我的议程 (label, mono, muted) [+ 提交] (btn btn-ghost btn-xs, only if canSubmit)
```
The "+ 提交" button is the `AgendaDialog mode="submit"` trigger.
**Empty state** (`myAgendas.length === 0`):
```
暂无议程提交 (text-sm, text-base-content/40, centered)
```
**Item rows** (divided, `divide-y divide-base-300`):
```
[name — font-sans text-sm, truncate] [badge] [编辑? btn-ghost btn-xs]
[time — font-mono text-xs muted, only if approved + start_time set]
```
Badge mapping:
- `pending` → `badge badge-neutral badge-sm` — "待审核"
- `approved` → `badge badge-success badge-sm` — "已通过"
- `rejected` → `badge badge-error badge-sm` — "已拒绝"
"编辑" button: only when `a.status === 'pending' && canSubmit`. Triggers `AgendaDialog mode="edit" item={a}`.
Time format for approved + scheduled: `dayjs(a.start_time).format('MM-DD HH:mm')` + `–` + `dayjs(a.end_time).format('HH:mm')`.
### `AgendaSchedule.svelte`
```
Props:
items: Array<DataAgendaDoc & { descriptionHtml: string | null }>
```
DaisyUI card (`card bg-base-200`) in the main content column. Only rendered when `data.agendaSchedule.length > 0`.
**Layout — timeline with right-aligned time column:**
```
card-body
h2 "活动议程" (card-title font-sans text-base)
divide-y divide-base-300
{#each items}
flex gap-4 py-3
┌── time column (w-16, text-right, flex-shrink-0) ──┐
│ start HH:mm (font-mono text-xs text-primary) │
│ – end HH:mm (font-mono text-xs muted) │
└───────────────────────────────────────────────────┘
┌── content column (flex-1) ────────────────────────┐
│ name (font-sans text-sm font-medium) │
│ {#if descriptionHtml} │
│ prose prose-sm dark:prose-invert {@html ...} │
│ {/if} │
└───────────────────────────────────────────────────┘
{/each}
```
Time format: `dayjs(item.start_time).format('HH:mm')` / `dayjs(item.end_time).format('HH:mm')`. Items arrive pre-sorted by `start_time` ascending from the backend — no client-side sort needed.
### Event detail page changes (`+page.svelte`)
```ts
// Derived — same guard pattern as inRange
const canSubmit = $derived(
browser ? ev.is_joined && !ev.is_agenda_published && new Date() < new Date(ev.start_time) : false
);
```
The main content column gains an "活动议程" card between the existing content cards and the empty-state fallback:
```svelte
{#if data.agendaSchedule.length > 0}
<AgendaSchedule items={data.agendaSchedule} />
{/if}
```
The `<aside>` gains a second card below the existing sticky action card:
```svelte
{#if ev.is_joined}
<AgendaMyList eventId={ev.event_id} myAgendas={data.myAgendas} {canSubmit} />
{/if}
```
The empty-state fallback (`暂无活动介绍`) only triggers when description, attendance guide, **and** schedule are all absent.
The existing action card (join / checkin buttons) is unchanged.
## Blocking rules summary
| Rule | Checked client-side | Checked server-side |
| ---------------- | ------------------------------ | ------------------------------ |
| User not joined | hide card entirely | — (backend returns 403 anyway) |
| Agenda published | hide "+ 提交" + "编辑" buttons | re-check in `?/submitAgenda` |
| Event started | hide "+ 提交" + "编辑" buttons | re-check in `?/submitAgenda` |
| 5 pending items | hide "+ 提交" button | re-check in `?/submitAgenda` |
`?/editAgenda` does not re-check rules — editing an already-pending item is fine even if the submission window has closed, and the backend enforces ownership.
## E2E tests (`tests/e2e/events-agenda.spec.ts`)
Tests use the `loggedInUser` fixture and override `GET /agenda/my-list`, `GET /agenda/schedule`, `POST /agenda/submit`, `PATCH /agenda/update`, and `GET /event/info` as needed.
| # | Scenario | Key assertions |
| --- | ------------------------------------- | ------------------------------------------------------------------------------ |
| 1 | Not joined → no 我的议程 card | card absent from sidebar |
| 2 | Joined, no submissions | card visible, empty state text, "+ 提交" button visible |
| 3 | Joined, agenda published | 我的议程: no "+ 提交" or "编辑" buttons; 活动议程 card visible in main content |
| 4 | Joined, event started | no "+ 提交" or "编辑" buttons |
| 5 | Joined, 5 pending items | "+ 提交" button hidden (count ≥ 5) |
| 6 | Successful submit | dialog closes, list refreshes with new pending item |
| 7 | Submit validation | name-empty → inline error, no network call |
| 8 | Successful edit | "编辑" on pending item, dialog pre-fills, list refreshes |
| 9 | Badge variants | list shows correct badge per status (pending/approved/rejected) |
| 10 | Approved + scheduled item in 我的议程 | time range shows under name; absent for pending/rejected |
| 11 | Published schedule renders | timeline items with time column + name + description HTML |
| 12 | Schedule absent when not published | 活动议程 card absent from main content |
## Out of scope
- Admin review / approval / time scheduling (M4)
- Backend quota changes
- Rich text / markdown preview in the submit dialog
- Description display in the 我的议程 item rows

293
docs/superpowers/specs/2026-04-16-workbench-design.md Normal file
View File

@@ -0,0 +1,293 @@
# M8 — Workbench (Design Spec)
Status: **Draft** — 2026-04-16. Eighth feature milestone. Replaces the Foundation placeholder at `/` with a full four-card dashboard, and adds bio editing to the profile form (missed in M2).
## Goal
Two distinct deliverables in one milestone:
1. **Workbench dashboard.** Replace the `(app)/+page.svelte` placeholder with a bento-grid dashboard giving the user an at-a-glance view of their joined events and profile state.
2. **Bio editing.** Add the `bio` field to the profile edit form (`ProfileCard.svelte`) with a Markdown edit/preview toggle, completing the profile feature originally scoped to M2.
No new routes for either deliverable.
## Non-goals
- **Infinite-scroll / pagination on the event list.** A single `limit: 50` fetch is sufficient for community-scale event counts; pagination adds complexity for negligible benefit.
- **Real-time check-in status updates.** The "已签到" badge is set at page load; it does not poll.
- **Avatar upload.** Still out of scope (would require a file storage integration).
- **Light theme.** Deferred to M9 (Polish).
## Aesthetic direction
The workbench uses a **"Precision Instrument"** aesthetic: dark navy base (`#0b0e17`) with a dot-grid overlay, teal-green accent (`#5bb8a0`, riffing on NixOS's palette), Fraunces italic for the greeting headline, and IBM Plex Mono for all data readouts. Cards are lightly bordered panels, not heavy-shadowed boxes. A NixOS snowflake SVG watermarks the page bottom-right at 4% opacity.
A reference mockup was produced during brainstorming at `.superpowers/brainstorm/*/content/workbench-design-v1.html`.
## Architecture
### Files changed
**Bio (profile fix):**
```
src/lib/schemas/profile.ts
└── add bio: z.string().trim().max(500).optional()
src/routes/(app)/profile/[userId]/+page.server.ts
├── load: decode bio (base64→utf-8), render bioHtml, include bio in form init
└── update action: re-encode bio (utf-8→base64) before patchUserUpdate
src/lib/components/ProfileCard.svelte
├── view mode: replace skeleton with {#if bioHtml}{@html bioHtml}{:else}暂无简介{/if}
└── edit mode: add <MarkdownEditor name="bio" bind:value={bio} /> and let bio = $state(...)
```
**Workbench:**
```
src/routes/(app)/+page.server.ts ← new load; replaces the no-op pass-through
src/routes/(app)/+page.svelte ← replace placeholder with bento layout
src/lib/components/WorkbenchWelcome.svelte ← new
src/lib/components/WorkbenchCurrentEvent.svelte ← new
src/lib/components/WorkbenchUpcoming.svelte ← new
src/lib/components/WorkbenchProfile.svelte ← new
static/nixos.svg ← new: NixOS snowflake asset
```
No new routes. No new route groups. No new server endpoints.
### Load (`+page.server.ts`)
Two data sources:
1. **User** — already available as `event.locals.user` (hydrated by `hooks.server.ts`). No extra SDK call.
2. **Events** — one `loadSdk` call (fatal; throws to `+error.svelte` on failure):
```ts
const result = await loadSdk(() =>
getEventList({
client: api,
query: { offset: 0, limit: 50, sort_by: 'start_time', sort_order: 'asc' }
})
);
const items = result.data?.items ?? [];
```
All derivations are pure server-side functions computed from `items` and `event.locals.user`. No client-side fetch anywhere.
### Event derivation
All logic runs in `load`, using a single `now = new Date()` snapshot:
```ts
const joinedEvents = items.filter((e) => e.is_joined);
const joinedCount = joinedEvents.length;
// Ongoing: started and not yet ended
const ongoingEvent =
joinedEvents.find((e) => new Date(e.start_time) <= now && new Date(e.end_time) >= now) ?? null;
// Nearest upcoming: soonest future start among joined (list is already asc by start_time)
const nextUpcoming = !ongoingEvent
? (joinedEvents.find((e) => new Date(e.start_time) > now) ?? null)
: null;
const currentEvent = ongoingEvent ?? nextUpcoming;
// Upcoming: future joined events, skip currentEvent (to avoid showing it twice), cap at 3
const upcomingEvents = joinedEvents
.filter((e) => new Date(e.start_time) > now && e.event_id !== currentEvent?.event_id)
.slice(0, 3);
```
Profile completeness:
```ts
const profileFields = {
nickname: !!user.nickname,
subtitle: !!user.subtitle,
avatar: !!user.avatar,
bio: !!user.bio // raw base64 — truthy check only, no decode needed
};
const profileScore = Object.values(profileFields).filter(Boolean).length; // 0–4
```
Page return value:
```ts
return { user, joinedCount, currentEvent, upcomingEvents, profileFields, profileScore };
```
## Components
### WorkbenchWelcome
Props: `user: ServiceUserUserInfoData`, `joinedCount: number`
Renders the greeting card (top-left 2/3 column):
- Fraunces italic greeting: `你好，<em>{user.nickname ?? user.username}</em>`
- Subline: `{user.email}` in `font-mono text-xs`
- Two stat cells: **joined-event count** (IBM Plex Mono, teal) and **Lv{permission_level}** (dimmer)
- Two chip links: 浏览活动 → `/events`, 个人资料 → `/profile/{user.user_id}`
### WorkbenchCurrentEvent
Props: `event: ServiceEventEventListItems | null`, `permissionLevel: number`
Renders the current/upcoming event card (bottom-left 2/3 column, below Welcome):
**Empty state** (`event === null`): centred "暂无进行中或即将到来的活动" with a dimmed icon.
**Filled state:**
- Left accent stripe (3 px teal bar at card edge)
- Event name (`font-display`), venue from `event.subtitle` (dimmed)
- Start / End times in `font-mono`, labelled with `开始` / `结束` eyebrows
- Status badge:
- `new Date(event.start_time) <= now` → pulsing dot + "进行中" (green)
- otherwise → "待开始" (amber)
- "已签到" badge when `event.is_checked_in === true`
- "立即签到" button (links to `/checkin`) shown only when `permissionLevel >= 20`
`now` is not available at render time — pass an `isOngoing: boolean` derived prop from the load rather than re-deriving in the component.
### WorkbenchUpcoming
Props: `events: ServiceEventEventListItems[]` (0–3 items)
Renders the full-width upcoming schedule card (bottom row, all 3 columns):
- 3-column grid, always 3 slots rendered
- Filled slots: event name, time range in `font-mono`, status badge ("待开始" / "进行中"), `→` arrow; entire slot is an `<a href="/events/{event.event_id}">`
- Empty slots (when `events.length < 3`): dashed border, "暂无更多活动" centred, muted
### WorkbenchProfile
Props: `fields: { nickname: boolean, subtitle: boolean, avatar: boolean, bio: boolean }`, `score: number`, `userId: string`
Renders the profile completeness sidebar (right column, spans rows 1–2):
- SVG progress ring: `r = 38`, circumference ≈ 238.8 px; `stroke-dashoffset = 238.8 × (1 - score/4)`; rotated −90° so fill starts from top
- 4-item checklist: each row is a filled circle (teal) with checkmark when done, or a dashed circle when missing
- Labels: 昵称, 头像, 个性签名, 个人简介
- "完善资料 →" CTA link to `/profile/{userId}`
### Page layout (`+page.svelte`)
```svelte
<div class="relative mx-auto max-w-5xl px-4 py-6">
<!-- NixOS watermark -->
<img
src="{base}/nixos.svg"
alt=""
aria-hidden="true"
class="pointer-events-none fixed right-0 bottom-0 size-72 opacity-[0.04]"
/>
<!-- Page header -->
<header>…工作台 / WORKBENCH · OVERVIEW…</header>
<!-- Bento grid: 3 columns on lg+, single column on mobile -->
<div class="grid grid-cols-1 gap-2.5 lg:grid-cols-[1fr_1fr_300px]">
<WorkbenchWelcome class="lg:col-span-2" … />
<WorkbenchProfile class="lg:row-span-2" … />
<WorkbenchCurrentEvent class="lg:col-span-2" … />
<WorkbenchUpcoming class="lg:col-span-3" … />
</div>
</div>
```
On mobile all four cards stack in order: Welcome → Profile → Current Event → Upcoming.
## Bio editing
### Schema change
```ts
// src/lib/schemas/profile.ts
bio: z.string().trim().max(500).optional();
```
`ProfileInput` gains the `bio` field.
### Load change
```ts
// Alongside the existing form init object:
bio: user.bio ? Buffer.from(user.bio, 'base64').toString('utf-8') : '';
// New: pass rendered bio to view mode
const bioHtml = user.bio
? String(await marked.parse(Buffer.from(user.bio, 'base64').toString('utf-8')))
: null;
return { user, isSelf, form, bioHtml };
```
### Update action change
```ts
// Added to patchUserUpdate body:
bio: data.bio ? Buffer.from(data.bio).toString('base64') : undefined;
```
### ProfileCard changes
**View mode** — right column (replace skeleton):
```svelte
{#if bioHtml}
<div class="prose prose-sm max-w-none p-5 dark:prose-invert">
{@html bioHtml}
</div>
{:else}
<p class="p-5 text-sm text-base-content/30 italic">暂无简介</p>
{/if}
```
**Edit mode** — after the avatar/allowPublic fields, before the action buttons:
```svelte
<div class="flex flex-col gap-1.5">
<label class="font-display text-sm text-base-content/60">个人简介</label>
<MarkdownEditor name="bio" bind:value={bio} placeholder="支持 Markdown 格式，最多 500 字" />
{#if $errorsStore.bio}
<p class="font-mono text-xs tracking-wider text-error">{$errorsStore.bio}</p>
{/if}
</div>
```
Add `let bio = $state($formStore.bio ?? '')` to the component script alongside the other `$state` locals.
`bioHtml` is a new prop: `bioHtml: string | null`.
## Error handling and edge cases
- **Event list fails** — `loadSdk` throws; SvelteKit renders `+error.svelte`. No partial dashboard.
- **No joined events** — `joinedCount = 0`, `currentEvent = null`, `upcomingEvents = []`; all four cards render with their respective empty states.
- **`currentEvent` is upcoming (not yet started)** — `isOngoing = false` → amber "待开始" badge, no "立即签到" shortcut (checkin only makes sense for started events, regardless of staff level). Update `WorkbenchCurrentEvent` to gate the button on `isOngoing && permissionLevel >= 20`.
- **Profile bio decode fails** — wrap in `try/catch`; fall back to `bioHtml = null` (show "暂无简介"). Don't propagate the error.
## NixOS snowflake SVG
Add `static/nixos.svg` — a geometric 6-arm snowflake matching the NixOS logo shape. The watermark is rendered as `<img src="{base}/nixos.svg">` with `aria-hidden="true"` and `pointer-events-none fixed bottom-0 right-0 size-72 opacity-[0.04]`.
## Testing
E2E tests in `tests/e2e/workbench.spec.ts` (new file), using the `loggedInUser` fixture and `mock.override` per test.
| Test | `GET /event/list` override | Expected |
| ------------------------------ | ---------------------------------------------------- | ----------------------------------------------------------------- |
| No events | `{ items: [] }` | Welcome: 0 joined; Current: empty state; Upcoming: 3 dashed slots |
| Joined ongoing | 1 joined, `start_time` in past, `end_time` in future | Current shows "进行中" badge |
| Joined upcoming | 1 joined, `start_time` in future | Current shows "待开始" badge; not in Upcoming row |
| Full upcoming | 4 joined future events | Current gets nearest; Upcoming shows next 3 |
| Already checked in | `is_checked_in: true` | "已签到" badge visible |
| Staff user | `permission_level: 20`, ongoing event | "立即签到" button visible |
| Non-staff user | `permission_level: 10`, ongoing event | No "立即签到" button |
| Staff + upcoming (not started) | `permission_level: 20`, future event | No "立即签到" button |
| Profile complete | All 4 fields set on `GET /user/info` | Ring 100%, all items checked |
| Profile incomplete (no bio) | bio omitted | Ring 75%, bio row dashed |
Bio E2E: one test added to the existing profile spec — sets `GET /user/info` with a base64-encoded bio, asserts the decoded text appears in the preview pane on tab switch, submits, asserts `PATCH /user/update` body contains the re-encoded base64 string.

85
docs/superpowers/specs/2026-04-18-navigation-progress-design.md Normal file
View File

@@ -0,0 +1,85 @@
# Navigation Progress Bar — Design Spec
**Date:** 2026-04-18
**Status:** Approved
## Problem
When navigating between pages, the app freezes visually while the SvelteKit server load function runs and the API call completes. There is no feedback that anything is happening — the page sits still until the full server response arrives.
## Solution
Add a top-of-viewport indeterminate progress bar that appears after 200ms of navigation latency and disappears when the new page renders. Uses `nprogress` as the underlying primitive.
## Architecture
### Component
`src/lib/components/NavigationProgress.svelte` — a single, zero-prop component mounted once in `src/routes/+layout.svelte` (root layout, wraps all routes).
Lifecycle:
1. Watch SvelteKit's `navigating` store (from `$app/navigation`).
2. On navigation start: schedule `NProgress.start()` after 200ms via `setTimeout`.
3. On navigation end (`navigating` becomes `null`, via `afterNavigate` or reactive watch): cancel any pending timer; call `NProgress.done()`.
4. On navigation change (new navigation before previous finishes): cancel pending timer, call `NProgress.done()`, then restart from step 2.
The component is client-only — all logic lives inside `$effect`, so nothing runs on the server.
### Configuration
Configured once at module init (outside `$effect`):
```ts
NProgress.configure({ showSpinner: false, minimum: 0.1, easing: 'ease', speed: 300 });
```
- `showSpinner: false` — bar only, no circular spinner
- `minimum: 0.1` — starts at 10% width to signal activity immediately
- `easing/speed` — controls the snap-to-100% completion animation
### Styling
Overrides injected in `src/routes/layout.css` (existing global theme file):
```css
#nprogress .bar {
background: var(--color-primary);
height: 2px;
position: fixed;
top: 0;
z-index: 9999;
}
```
- `z-index: 9999` places the bar above the navbar (`z-30`)
- `var(--color-primary)` matches the DaisyUI OKLCH theme accent
- The default nprogress "peg" (glowing right edge) is kept — reinforces motion
## Edge Cases
| Scenario | Behavior |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| Navigation cancelled mid-flight (user clicks another link) | `NProgress.done()` then `NProgress.start()` — nprogress handles stacked calls cleanly |
| Navigation throws to error page | `afterNavigate` still fires; `NProgress.done()` called normally |
| Form submissions (`use:enhance`, native POST) | No bar — `navigating` store is not set for form actions; form feedback is per-form |
| Fast navigation (< 200ms) | Timer cancelled before firing; bar never appears |
## Dependencies
- `nprogress` npm package + `@types/nprogress` — ~2KB gzipped, no transitive deps
## Files Changed
| File | Change |
| ---------------------------------------------- | ------------------------------------ |
| `src/lib/components/NavigationProgress.svelte` | New component |
| `src/routes/+layout.svelte` | Mount `<NavigationProgress />` |
| `src/routes/layout.css` | Add `#nprogress` overrides |
| `package.json` | Add `nprogress` + `@types/nprogress` |
## Out of Scope
- Per-page skeleton/loading states
- Form submission progress feedback
- Route-level streaming (`defer`) or `load` cancellation signals

310
docs/superpowers/specs/2026-04-18-polish-design.md Normal file
View File

@@ -0,0 +1,310 @@
# M9 Polish — Design Spec
> Audience: implementation sub-agents and future maintainers. Covers the three deliverables for the final milestone: light-theme toggle, production container + Caddy, and E2E test fixes.
## Scope
| Deliverable | In scope | Out of scope |
| -------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Light theme + toggle | DaisyUI light theme, SSR cookie, navbar button | Per-user persistence on backend, animate transitions |
| Container + Caddy | `Containerfile` (multi-stage), `Caddyfile` (reverse proxy) | TLS cert management, docker-compose, CI/CD pipeline |
| E2E test fixes | Fix 6 failing tests to match existing code | Adding missing page features (permission label, admin-create-agenda), Storybook, Lighthouse |
---
## Part 1 — Light theme + toggle
### Architecture
Theme preference is stored in a `theme` cookie. The server reads it in `hooks.server.ts` and rewrites the `data-theme` attribute on `<html>` before the page HTML is sent to the browser. No client-side JavaScript, no FOUC.
```
Request → hooks.server.ts
1. read theme cookie (default 'dark')
2. resolve(event, { transformPageChunk({ html }) {
return html.replace('data-theme="dark"', `data-theme="${theme}"`)
}})
→ HTML with correct data-theme arrives at browser on first byte
```
The toggle is a plain `<form method="POST">` pointing at a dedicated endpoint. No `use:enhance`, no client store, no page reload side-effects beyond the intended navigation.
### Files changed
| File | Change |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src/app.html` | Fix `lang="en"` → `lang="zh-CN"` (polish). `data-theme="dark"` already present — used as replacement target by `transformPageChunk`. |
| `src/routes/layout.css` | Add `light` DaisyUI theme block (see palette below). |
| `src/hooks.server.ts` | After session bootstrap, read `theme` cookie and pass `transformPageChunk` option to `resolve()`. |
| `src/routes/+layout.server.ts` | Read `theme` cookie, include in returned data: `{ user: locals.user, theme }`. |
| `src/routes/+layout.svelte` | Remove hardcoded `<meta name="color-scheme" content="dark" />`. DaisyUI theme CSS sets `color-scheme` per active theme — the meta tag is redundant and would be wrong for light mode. |
| `src/routes/theme/+server.ts` | New file. POST handler: read `next_theme` from body, set `theme` cookie, redirect to `Referer \|\| '/app/'`. |
| `src/routes/(app)/+layout.svelte` | Add sun/moon toggle button in `navbar-end` before avatar dropdown. Reads `data.theme`. |
### Theme toggle endpoint
`src/routes/theme/+server.ts`:
- Method: `POST`
- Body field: `next_theme` (`'dark' | 'light'`)
- Cookie: `name: 'theme'`, `path: '/app'`, `sameSite: 'lax'`, `secure` only in production (`!dev`), `maxAge: 60 * 60 * 24 * 365`
- Response: `303` redirect to `request.headers.get('referer') ?? '/app/'`
### Toggle button (in `(app)/+layout.svelte`)
```html
<form method="POST" action="/app/theme">
<input type="hidden" name="next_theme" value={data.theme === 'dark' ? 'light' : 'dark'} />
<button type="submit" class="btn btn-ghost btn-circle" aria-label="切换主题">
{#if data.theme === 'dark'}
<Sun class="size-5" />
{:else}
<Moon class="size-5" />
{/if}
</button>
</form>
```
Place it between the brand link area and the avatar dropdown in `navbar-end`.
### Light theme palette
Added as a second `@plugin 'daisyui/theme'` block in `layout.css`. Hue family matches the existing dark theme (hue ~252–253) for brand continuity.
```css
@plugin 'daisyui/theme' {
name: 'light';
color-scheme: 'light';
--color-base-100: oklch(97% 0.008 252);
--color-base-200: oklch(93% 0.012 253);
--color-base-300: oklch(88% 0.015 253);
--color-base-content: oklch(14% 0.02 252);
--color-primary: oklch(0.5502 0.1193 263.8209);
--color-primary-content: oklch(0.9816 0.0017 247.839);
--color-secondary: oklch(0.7499 0.0898 239.3977);
--color-secondary-content: oklch(0.2621 0.0095 248.1897);
--color-accent: oklch(0.9417 0.0052 247.879);
--color-accent-content: oklch(0.2621 0.0095 248.1897);
--color-neutral: oklch(88% 0.01 264);
--color-neutral-content: oklch(20% 0.02 264);
--color-info: oklch(74% 0.16 232.661);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(76% 0.177 163.223);
--color-success-content: oklch(37% 0.077 168.94);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(71% 0.194 13.428);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
```
### `hooks.server.ts` change
```ts
export const handle: Handle = async ({ event, resolve }) => {
// ... existing session bootstrap unchanged ...
const theme = (event.cookies.get('theme') as 'dark' | 'light') ?? 'dark';
return resolve(event, {
transformPageChunk({ html }) {
return html.replace('data-theme="dark"', `data-theme="${theme}"`);
}
});
};
```
### E2E test coverage
Add a test in a new `tests/e2e/theme.spec.ts` that:
1. Starts unauthenticated, verifies default `data-theme="dark"` on `<html>`.
2. POSTs to `/app/theme` with `next_theme=light`, follows redirect, verifies `data-theme="light"`.
3. Verifies the cookie is set with the correct value.
---
## Part 2 — Container + Caddy
### `Containerfile`
Multi-stage build. The builder stage installs all dependencies and runs `pnpm build`. The runtime stage copies only the built output + `package.json` (needed for `node build` entry point resolution).
```dockerfile
FROM node:22-alpine AS builder
RUN corepack enable && corepack prepare pnpm@latest --activate
WORKDIR /srv
COPY pnpm-lock.yaml pnpm-workspace.yaml package.json ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
FROM node:22-alpine AS runtime
WORKDIR /srv
ENV NODE_ENV=production
ENV PORT=3000
ENV HOST=0.0.0.0
COPY --from=builder /srv/build ./build
COPY --from=builder /srv/package.json ./
EXPOSE 3000
CMD ["node", "build"]
```
`HOST=0.0.0.0` is required — adapter-node defaults to `localhost` which only listens on loopback inside a container. Static assets are included in `build/client/` by adapter-node and served by the Node process.
### `Caddyfile`
Minimal production-ready reverse proxy. TLS termination is handled externally (load balancer or a wrapping Caddy config with a real domain). This file is the inner config.
```
:80 {
encode gzip zstd
reverse_proxy localhost:3000
}
```
Caddy provides compression. All routing — including the `/app/` base path and static assets — is handled by the Node server. No static file serving in Caddy needed.
### `.containerignore`
Create `Containerfile` alongside a `.containerignore` to keep build context lean:
```
node_modules
build
.svelte-kit
test-results
*.md
.env*
```
---
## Part 3 — E2E test fixes
All fixes follow **option b**: tests are updated to match what the code actually does. No new page features are added.
### Fix inventory
#### `tests/e2e/profile.spec.ts:4` — own profile renders in view mode
**Root cause:** test asserts `普通用户` text; `ProfileCard` does not render the permission level label.
**Fix:** Remove the `普通用户` assertion. Replace with an assertion on `loggedInUser.username`, which ProfileCard does render in the `<dd>` for 用户名.
```ts
// before
await expect(page.getByText('普通用户')).toBeVisible();
// after
await expect(page.getByRole('main').getByText(loggedInUser.username)).toBeVisible();
```
---
#### `tests/e2e/auth.spec.ts:12` — full magic-link flow
**Root cause:** times out waiting for the user-menu button after the full dev-mode redirect chain. The `use:enhance` on the authorize form causes a client-side SvelteKit navigation to `/app/token?code=...`, which then redirects to `/app/`. Cookie propagation across this chain may not settle before Playwright proceeds.
**Fix:** Add `await page.waitForLoadState('networkidle')` after the click and before the URL assertion to ensure the full redirect + render chain completes. If the cookie-propagation issue persists (i.e., `data.user` is still null after the chain and the page bounces to `/app/authorize`), scope the test down: remove the workbench assertions and instead assert only that the server redirected to `/app/magic-link-sent` when `dev === false`, or that the URL reaches `/app/` in dev mode without checking the navbar.
Investigate first; minimal targeted fix preferred.
---
#### `tests/e2e/admin-events.spec.ts:131` — agenda tab lists items
**Root cause:** mock data uses `is_published: true/false`; the admin agenda page (`+page.svelte`) filters items by `status: 'pending' | 'approved' | 'rejected'`. Items without a `status` field never match any tab.
**Fix:** Update mock items to include `status: 'pending'` so they appear in the default 待审核 tab.
```ts
// before
{ agenda_id: 'ag1', name: '开幕式', is_published: true },
{ agenda_id: 'ag2', name: '主题演讲', is_published: false }
// after
{ agenda_id: 'ag1', name: '开幕式', status: 'pending', description: '' },
{ agenda_id: 'ag2', name: '主题演讲', status: 'pending', description: '' }
```
---
#### `tests/e2e/admin-events.spec.ts:151` — agenda create submits form
**Root cause:** the admin agenda page has no `新增` button. It only supports review (approve/reject) and edit of user-submitted items.
**Fix:** Replace the test with one that exercises existing admin UI. A good replacement: verify that clicking 通过 on a pending item opens the approve dialog.
```ts
test('approve button opens approve dialog', async ({ page, superAdminUser }) => {
void superAdminUser;
await overrideEventInfo();
await overrideEventGuide();
await mock.override('GET', '/agenda/list', {
status: 200,
body: {
status: 200,
data: [{ agenda_id: 'ag1', name: '开幕式', status: 'pending', description: '' }]
}
});
await page.goto('/app/admin/events/adm1/agenda');
await page.waitForLoadState('networkidle');
await page.getByRole('button', { name: '通过' }).click();
await expect(page.getByRole('heading', { name: '审核通过' })).toBeVisible();
});
```
---
#### `tests/e2e/admin-events.spec.ts:183` — attendance tab shows table rows
**Root cause:** mock returns `data: [array]` but `+page.server.ts` casts the response to `{ data: { items: [...] } }` — the page reads `inner?.items ?? []`, which is `undefined` when `data` is an array.
**Fix:** Update mock response to match the actual backend shape:
```ts
// before
body: { status: 200, data: [ { attendance_id: 'att1', ... }, ... ] }
// after
body: { status: 200, data: { items: [ { attendance_id: 'att1', ... }, ... ] } }
```
---
#### `tests/e2e/workbench.spec.ts:110` — attendee sees 立即签到 button
**Root cause:** test uses `getByRole('link', { name: /立即签到/ })`; the element is a `bits-ui` `Dialog.Trigger` which renders as `<button>`, not `<a>`.
**Fix:**
```ts
// before
await expect(page.getByRole('link', { name: /立即签到/ })).toBeVisible();
// after
await expect(page.getByRole('button', { name: /立即签到/ })).toBeVisible();
```
---
## Verification
After implementation, these commands must all pass:
```bash
pnpm check # type-check
pnpm lint # prettier + eslint
pnpm test:unit # 78 unit tests
pnpm test:e2e # all E2E tests green (currently 6 failing → 0)
pnpm build # Node adapter build succeeds
podman build -t cms-client . # container builds
```

56
docs/superpowers/specs/2026-04-18-qr-scanner-dedup-design.md Normal file
View File

@@ -0,0 +1,56 @@
# QR Scanner Deduplication & Strict Validation Design
**Date:** 2026-04-18
**Scope:** `src/lib/components/CheckinScanner.svelte` only
## Problem
The `@zxing/browser` decode callback fires on every video frame that contains a decodable code. When a QR code stays in frame for even half a second, `onScan` is called dozens of times, submitting the same check-in code repeatedly. The backend consumes the code on first use, so all subsequent requests fail with an error.
There are two related issues:
1. **Loose validation** — the current strip-and-guess logic (`replace(/\D/g,'').slice(0,6)`) can extract a 6-digit substring from an arbitrary QR payload (e.g. an event URL containing digits). This produces false positives.
2. **No deduplication** — there is no cooldown between repeated scans of the same code.
## Design
All changes are confined to `CheckinScanner.svelte`. No changes to the page, server action, or any other file.
### Strict 6-digit validation
Replace the strip-and-guess approach with an exact match:
```ts
const text = result.getText().trim();
if (!/^\d{6}$/.test(text)) return; // QR payload must be exactly 6 digits
```
This rejects any QR code whose text is not a bare 6-digit number. Event URLs, product codes, and other incidental codes that happen to contain digits are ignored.
### Timed deduplication map
Add a module-level (or component-level) `Map<string, number>` that records the timestamp of the last `onScan` call for each code:
```ts
const recentCodes = new Map<string, number>();
const COOLDOWN_MS = 10_000;
```
Before calling `onScan`:
1. Prune entries older than `COOLDOWN_MS` (keeps the map bounded).
2. If the code is present in the map, skip — the cooldown is still active.
3. Otherwise record `code → Date.now()` and call `onScan(code)`.
The map lives inside the component (declared at script-top as a plain `let`), so it resets naturally when the component is remounted. No cleanup is needed on destroy — the map is garbage-collected with the component instance.
### Cooldown duration
10 seconds. Long enough to cover the server round-trip, the result banner display (3 s), and the user moving to the next attendee. Short enough that a genuinely new scan of a different code is never blocked.
## Out of scope
- Deduplication at the server action level (already handled by the backend consuming the code).
- Visual feedback in the scanner while a code is on cooldown (the page already shows a success/error banner).
- Changing the cooldown duration at runtime.
- Any changes outside `CheckinScanner.svelte`.

120
docs/superpowers/specs/2026-04-18-token-refresh-design.md Normal file
View File

@@ -0,0 +1,120 @@
# Token Refresh — Problem, Solution, and Decisions
> Audience: future maintainers. Documents the token rotation race condition discovered in production, the layered client-side fix, and every alternative that was considered and why it was rejected.
---
## Background
Auth uses short-lived JWT access tokens + long-lived single-use rotating refresh tokens, both in `httpOnly` cookies. The backend enforces strict **exactly-once** semantics on refresh tokens: presenting an old refresh token after it has been rotated is treated as a compromise signal and the session is revoked (per OAuth 2.0 Security BCP / RFC 6819).
---
## The Problem
With the original 15-second access token lifetime, nearly every page load triggered a token refresh. The race:
1. Browser sends two concurrent requests (parallel load functions, or two tabs) both carrying the same near-expired `RT_old`
2. Both hit the SvelteKit SSR server; both `hooks.server.ts` executions try to refresh
3. The backend rotates `RT_old → RT_new` for the first request — `RT_old` is now invalid
4. The second request arrives with `RT_old` moments later — backend returns **401**
5. Session is cleared → user is logged out mid-navigation
Confirmed in production via Sentry traces and backend logs: same refresh token presented twice within ~1 second, second use rejected.
---
## The Fix — Four Client-Side Layers
### Layer 1 — Proactive refresh (`hooks.server.ts`)
`hooks.server.ts` decodes the JWT `iat` claim (payload only, no signature verification — never used for authorization) and calls `refreshSingleFlight` when ≤30s remain on the access token, **before any API call is made**. All load functions in that request already see a fresh token.
```
hooks.server.ts
→ isTokenAboutToExpire(accessToken)?
yes → refreshSingleFlight(refreshToken, fetch, origin)
→ setSessionCookies / clearSessionCookies
→ getUserInfo, page load functions (all see fresh token)
```
Constants in `src/lib/server/session.ts`:
```ts
const ACCESS_TOKEN_LIFETIME_S = 300; // must match backend TTL_ACCESS
const PROACTIVE_REFRESH_BUFFER_S = 30; // fire when ≤30s remain
```
### Layer 2 — In-process single-flight (`inFlight` Map)
If two requests arrive at the **same pod simultaneously** with the same refresh token, the second awaits the first's `Promise` instead of making a second HTTP refresh call. The backend sees `RT_old` exactly once.
```ts
// src/lib/server/session.ts
const inFlight = new Map<string, Promise<TokenPair | null>>();
```
### Layer 3 — Rotation result cache (`recentlyRotated` Map)
If a second request arrives at the **same pod sequentially** after the first refresh already completed, a 10-second in-process cache keyed by `RT_old` serves the cached `RT_new` without a second backend call.
```ts
const recentlyRotated = new Map<string, { pair: TokenPair; expiresAt: number }>();
const ROTATION_CACHE_TTL_MS = 10_000;
```
This cache is client-side and does not weaken the backend's reuse detection — `RT_old` is never presented to the backend a second time.
### Layer 4 — Reactive 401 interceptor + redirect (`api.ts`, `errors.ts`)
Safety net for anything that slips through (clock skew, the residual cross-pod race). If an API call returns 401, the interceptor in `createApiClient` retries once with a freshly-refreshed token. If `loadSdk` sees a 401, it redirects to `/app/authorize` — graceful degradation rather than a broken page.
---
## Why Cross-Pod Is Not a Concern
The app is effectively full SSR: one user navigation = one HTTP request to the SvelteKit server = one pod = Layers 1–3 handle everything in-process.
Client-side fetches (`invalidateAll` after mutations, check-in QR polling) are all **manual user interactions** — they do not fire simultaneously with other requests. The browser never fans out concurrent requests to the SSR server autonomously.
---
## The Backend Change
After investigation, the backend team agreed to raise the access token lifetime from **15s → 5 minutes** (`TTL_ACCESS=5m`). This drops refresh frequency by ~20×. The proactive refresh window (30s out of 300s) is rarely hit, and the entire class of race condition becomes negligible in practice.
---
## Alternatives Considered and Rejected
### Backend grace window (Redis cache of `RT_old → RT_new`, 15s TTL)
**Rejected by backend team.** Correctly identified as a security regression: the grace window collapses reuse detection. An attacker who exfiltrates `RT_old` within 15s of the victim's refresh silently obtains `RT_new` without tripping any alarm. The "idempotent re-delivery" framing does not change the threat model — any mechanism that lets `RT_old` be redeemed after rotation, for any duration, breaks the invariant.
### Redis distributed lock on the backend
**Rejected by backend team.** Identified as the same trade-off as the grace window in different clothing — the losing pod still reads `RT_old → RT_new` from Redis, meaning `RT_old` was effectively redeemable twice. Additionally: hard dependency of the refresh path on Redis liveness (Redis blip = mass stall or mass logout), distributed lock footguns under GC pause / network delay (see Kleppmann on Redlock), and new intermediate failure states to reason about.
### Redis on the SvelteKit client (distributed lock + result cache)
**Rejected by us.** Would solve the cross-pod race completely, but:
- Adds a new operational dependency to the frontend tier
- The cross-pod race is already negligible given the full-SSR request model and 5-minute AT
- The in-process Maps (Layers 2–3) handle all realistic scenarios without any infrastructure
### Sticky sessions (`sessionAffinity: ClientIP` on the Kubernetes Service)
Viable zero-code fallback if cross-pod ever becomes an issue. Not implemented — unnecessary at current scale and request model.
---
## Files Changed
| File | Change |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `src/lib/server/session.ts` | Added `getJwtIat`, `isTokenAboutToExpire`, `inFlight` single-flight, `recentlyRotated` cache; constants raised to 300s / 30s |
| `src/lib/server/session.test.ts` | Tests for all new functions; timing values updated to match new constants |
| `src/hooks.server.ts` | Proactive refresh block before `getUserInfo`; imports `isTokenAboutToExpire`, `refreshSingleFlight`, `setSessionCookies`, `clearSessionCookies` |
| `src/lib/server/errors.ts` | `loadSdk` redirects to `/app/authorize` on 401 instead of throwing an error page |
| `src/hooks.client.ts` | `beforeSend` filter drops Cloudflare CDN noise (unrelated Sentry issue fixed at the same time) |

112
docs/superpowers/specs/2026-04-19-onboarding-dialog-design.md Normal file
View File

@@ -0,0 +1,112 @@
# Onboarding Dialog (Design Spec)
Status: **Draft** — 2026-04-19. Adds a mandatory profile-completion gate for newly registered users whose username is still the UUID assigned by the backend at registration time.
## Goal
When a logged-in user's `username` matches the UUID pattern (`/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i`), block interaction with the app via a non-dismissable Bits UI dialog. The user must set a real username (3–32 chars, alphanumeric + underscore) and nickname (1–64 chars) before continuing. On success the dialog closes and the user stays on whatever page they landed on.
## Non-goals
- **No dedicated route.** No `/app/onboarding/...` page — the gate lives entirely in the `(app)` layout layer.
- **No avatar, bio, subtitle, or `allow_public`.** Those remain in the profile edit page.
- **No email/permission changes.**
- **No animation beyond Bits UI defaults.**
## Architecture
### Detection
`(app)/+layout.server.ts` already loads `event.locals.user`. After loading, it evaluates:
```ts
const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
const needsOnboarding = UUID_RE.test(locals.user.username);
```
`needsOnboarding` and a server-initialised superforms `form` are returned alongside the existing `user` from the layout's `load`. The layout action (see below) is also added to the same file.
### Schema
New file `src/lib/schemas/onboarding.ts`:
```ts
export const onboardingSchema = z.object({
username: z
.string()
.min(3)
.max(32)
.regex(/^[a-zA-Z0-9_]+$/, 'Only letters, numbers, and underscores'),
nickname: z.string().min(1).max(64)
});
```
Both fields are required. Username rules are identical to `profileSchema`; nickname is tightened from optional to required.
### Layout action
`(app)/+layout.server.ts` exports a named action `completeProfile`:
```ts
export const actions = {
completeProfile: async (event) => {
const form = await superValidate(event.request, zod(onboardingSchema));
if (!form.valid) return fail(400, { form });
const api = createApiClient(event);
const result = await callSdk(() =>
patchUserUpdate({
client: api,
body: { username: form.data.username, nickname: form.data.nickname }
})
);
if (isErr(result)) return setError(form, '', unwrapErr(result).message);
return { form };
}
};
```
SvelteKit resolves `?/completeProfile` from any child page within the `(app)` group, so the form action works regardless of which page the user landed on.
### Component
New component `src/lib/components/OnboardingDialog.svelte`:
- Props: `needsOnboarding: boolean`, `form: SuperValidated<z.infer<typeof onboardingSchema>>`
- `Dialog.Root` from Bits UI with `open={needsOnboarding}` — no `Dialog.Close` trigger, making it non-dismissable
- Two `fieldset` / `input` pairs (username, nickname) styled with DaisyUI classes
- Global error rendered as `alert alert-soft alert-error` above the fields
- `use:enhance` on submit; on `ActionResult` success, calls `invalidateAll()` — layout `load` re-runs, `needsOnboarding` becomes `false`, dialog's `open` prop flips closed
- Loading state: `$submitting` disables inputs and shows `loading loading-sm loading-spinner` in the button
`(app)/+layout.svelte` renders `<OnboardingDialog {needsOnboarding} {form} />` unconditionally — the component manages open/closed state from the prop.
## UI
Dialog title: **完善个人资料**
Subtitle: 请在继续使用前设置您的用户名和昵称。
Submit button: **保存并继续** (full-width `btn btn-primary`)
Field hints (monospace, muted):
- Username: `3–32 字符，仅限字母 / 数字 / 下划线`
- Nickname: `最多 64 字符，显示为您的展示名称`
No close button, no skip affordance.
## Error handling
| Scenario | Handling |
| -------------------------------------- | --------------------------------------------------------------------------- |
| Client-side validation failure | superforms inline field errors, form stays open |
| Backend 400 (username taken / invalid) | `setError(form, '', message)` → `alert-soft alert-error` above fields |
| Network error | same as backend error — message prefixed `网络错误:` by `normalizeSdkError` |
| Unexpected 500 | same path, generic message |
## Testing
E2E test in `tests/e2e/onboarding.spec.ts`:
- Uses `loggedInUser` fixture, then overrides `GET /user/info` to return a UUID `username` (overrides the fixture's default real-username response)
- Verifies dialog is present and fields are required
- Overrides `PATCH /user/update` → 200; asserts dialog closes and page remains usable
- Overrides `PATCH /user/update` → 400 (username taken); asserts error alert appears and dialog stays open

45
eslint.config.js Normal file
View File

@@ -0,0 +1,45 @@
import prettier from 'eslint-config-prettier';
import path from 'node:path';
import { includeIgnoreFile } from '@eslint/compat';
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import { defineConfig } from 'eslint/config';
import globals from 'globals';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';
const gitignorePath = path.resolve(import.meta.dirname, '.gitignore');
export default defineConfig(
includeIgnoreFile(gitignorePath),
{ ignores: ['build/', '.svelte-kit/', 'dist/', 'src/lib/api/**'] },
js.configs.recommended,
ts.configs.recommended,
svelte.configs.recommended,
prettier,
svelte.configs.prettier,
{
languageOptions: { globals: { ...globals.browser, ...globals.node } },
rules: {
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
'no-undef': 'off'
}
},
{
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
languageOptions: {
parserOptions: {
projectService: true,
extraFileExtensions: ['.svelte'],
parser: ts.parser,
svelteConfig
}
}
},
{
// Override or add rule settings here, such as:
// 'svelte/button-has-type': 'error'
rules: {}
}
);

13
openapi-ts.config.ts Normal file
View File

@@ -0,0 +1,13 @@
import { defineConfig } from '@hey-api/openapi-ts';
export default defineConfig({
input: 'http://10.0.0.10:8000/swagger/doc.json',
output: 'src/lib/api',
plugins: [
'@hey-api/client-fetch',
'@hey-api/typescript',
'zod',
{ name: '@hey-api/transformers', dates: true },
{ name: '@hey-api/sdk', transformer: true }
]
});

75
package.json Normal file
View File

@@ -0,0 +1,75 @@
{
"name": "cms-client-svelte",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"lint:fix": "prettier --write . && eslint --fix .",
"gen": "openapi-ts",
"test": "pnpm test:unit && pnpm test:e2e",
"test:unit": "vitest run",
"test:e2e": "NODE_ENV=test playwright test",
"mock": "tsx scripts/mock-server.ts"
},
"devDependencies": {
"@eslint/compat": "^2.0.4",
"@eslint/js": "^10.0.1",
"@fontsource/ibm-plex-mono": "^5.2.7",
"@fontsource/ibm-plex-sans": "^5.2.8",
"@fontsource/noto-sans-sc": "^5.2.9",
"@hey-api/openapi-ts": "^0.96.0",
"@hono/node-server": "^1.19.14",
"@playwright/test": "^1.59.1",
"@sveltejs/adapter-node": "^5.5.4",
"@sveltejs/kit": "^2.57.0",
"@sveltejs/vite-plugin-svelte": "^7.0.0",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.2.2",
"@types/node": "^22",
"@types/nprogress": "^0.2.3",
"@types/qrcode": "^1.5.6",
"@vitest/ui": "^4.1.4",
"eslint": "^10.2.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-svelte": "^3.17.0",
"globals": "^17.4.0",
"hono": "^4.12.12",
"jsdom": "^29.0.2",
"prettier": "^3.8.1",
"prettier-plugin-svelte": "^3.5.1",
"prettier-plugin-tailwindcss": "^0.7.2",
"svelte": "^5.55.2",
"svelte-check": "^4.4.6",
"tailwindcss": "^4.2.2",
"tsx": "^4.21.0",
"typescript": "^6.0.2",
"typescript-eslint": "^8.58.1",
"vite": "^8.0.7",
"vitest": "^4.1.4"
},
"dependencies": {
"@hey-api/client-fetch": "^0.13.1",
"@lucide/svelte": "^1.8.0",
"@sentry/sveltekit": "^10.49.0",
"@zxing/browser": "^0.1.5",
"bits-ui": "^2.17.3",
"daisyui": "^5.5.19",
"dayjs": "^1.11.20",
"marked": "^18.0.0",
"nprogress": "^0.2.0",
"option-t": "^56.0.0",
"qrcode": "^1.5.4",
"svelte-dnd-action": "^0.9.69",
"svelte-turnstile": "^0.11.0",
"sveltekit-superforms": "^2.30.1",
"zod": "^3.25.76"
},
"packageManager": "pnpm@11.0.3+sha512.10448f2988933787c6699aef683174c741f6472ad91b7e3c8fe3e2bda57be8a0f7caf58949b8bc22e624578b3dc6e57876ba4c631928a1b84cc141e12c79bccd"
}

23
playwright.config.ts Normal file
View File

@@ -0,0 +1,23 @@
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: 'tests/e2e',
workers: 1, // Mock server holds shared state; revisit when suite grows past ~50 tests.
// WARNING: kill any standalone `pnpm dev` running on :5173 before
// `pnpm test:e2e` — `reuseExistingServer` would pick it up and bypass
// NODE_ENV=test, silently routing tests to the real backend.
webServer: [
{
command: 'pnpm mock',
port: 4010,
reuseExistingServer: !process.env.CI
},
{
command: 'pnpm dev',
port: 5173,
reuseExistingServer: !process.env.CI
}
],
use: { baseURL: 'http://localhost:5173' },
projects: [{ name: 'chromium', use: devices['Desktop Chrome'] }]
});

6012
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,6 @@
allowBuilds:
'@sentry/cli': true
esbuild: true
onlyBuiltDependencies:
- '@tailwindcss/oxide'
- esbuild

108
scripts/mock-server.ts Normal file
View File

@@ -0,0 +1,108 @@
import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { z } from 'zod';
type OverrideResponse = { status: number; body?: unknown; headers?: Record<string, string> };
type RecordedRequest = {
method: string;
path: string;
query: Record<string, string>;
body: unknown;
headers: Record<string, string>;
};
const overrides = new Map<string, OverrideResponse>();
const requestLog: RecordedRequest[] = [];
const overrideKey = (method: string, path: string) => `${method.toUpperCase()} ${path}`;
const overrideSchema = z.object({
method: z.enum(['GET', 'POST', 'PATCH', 'PUT', 'DELETE']),
pathPattern: z.string().min(1),
response: z.object({
status: z.number().int().min(100).max(599),
body: z.unknown().optional(),
headers: z.record(z.string()).optional()
})
});
const app = new Hono();
app.onError((err, c) => {
console.error(`[mock] handler error: ${err.message}`);
return c.json({ status: 500, msg: `mock: handler error: ${err.message}` }, 500);
});
app.get('/__test/health', (c) => c.json({ ok: true }));
app.post('/__test/override', async (c) => {
const parsed = overrideSchema.parse(await c.req.json());
overrides.set(overrideKey(parsed.method, parsed.pathPattern), parsed.response);
console.error(
`[mock] override registered: ${parsed.method} ${parsed.pathPattern} → ${parsed.response.status}`
);
return c.json({ ok: true });
});
app.delete('/__test/override', (c) => {
overrides.clear();
requestLog.length = 0;
console.error(`[mock] overrides + request log cleared`);
return c.json({ ok: true });
});
// Returns recorded requests newest-first, optionally filtered by method/path.
app.get('/__test/requests', (c) => {
const method = c.req.query('method')?.toUpperCase();
const path = c.req.query('path');
const filtered = requestLog
.filter((r) => (method ? r.method === method : true))
.filter((r) => (path ? r.path === path : true));
// Newest first — log is appended in arrival order, so reverse for output.
return c.json([...filtered].reverse());
});
// Catch-all: record then serve override or 500 unmatched.
app.all('*', async (c) => {
const method = c.req.method;
const url = new URL(c.req.url);
const path = url.pathname;
// Don't log /__test/* control traffic (would noise up assertions).
if (!path.startsWith('/__test/')) {
const query: Record<string, string> = {};
url.searchParams.forEach((v, k) => (query[k] = v));
const headers: Record<string, string> = {};
c.req.raw.headers.forEach((v, k) => (headers[k] = v));
let body: unknown = undefined;
if (method !== 'GET' && method !== 'HEAD') {
const text = await c.req.text();
if (text) {
try {
body = JSON.parse(text);
} catch {
body = text;
}
}
}
requestLog.push({ method, path, query, body, headers });
}
const override = overrides.get(overrideKey(method, path));
if (override) {
console.error(`[mock] ${method} ${path} → ${override.status}`);
const headers = override.headers ?? {};
return new Response(override.body === undefined ? null : JSON.stringify(override.body), {
status: override.status,
headers: { 'content-type': 'application/json', ...headers }
});
}
const msg = `mock: no override for ${method} ${path}; register one in your test`;
console.error(`[mock] ${method} ${path} → 500 (unmatched)`);
return c.json({ status: 500, msg }, 500);
});
const port = 4010;
serve({ fetch: app.fetch, port }, ({ port }) => {
console.error(`[mock] listening on http://localhost:${port}`);
});

17
src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,17 @@
import type { ServiceUserUserInfoData } from '$lib/api';
declare global {
namespace App {
interface Locals {
user: ServiceUserUserInfoData | null;
accessToken: string | null;
}
interface PageData {
user: ServiceUserUserInfoData | null;
}
// interface Error {}
// interface Platform {}
}
}
export {};

12
src/app.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

28
src/hooks.client.ts Normal file
View File

@@ -0,0 +1,28 @@
import * as Sentry from '@sentry/sveltekit';
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
tunnel: '/app/vitals',
environment: import.meta.env.MODE,
sendDefaultPii: true,
tracesSampleRate: 1.0,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration({ maskAllText: true, blockAllMedia: true }),
Sentry.consoleLoggingIntegration({ levels: ['log', 'warn', 'error'] })
],
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
enableLogs: true,
beforeSend(event) {
// Cloudflare injects /cdn-cgi/ scripts for email obfuscation. These scripts
// occasionally throw when removing themselves from the DOM — pure third-party noise.
const frames = event.exception?.values?.flatMap((v) => v.stacktrace?.frames ?? []) ?? [];
if (frames.length > 0 && frames.every((f) => f.filename?.includes('/cdn-cgi/'))) {
return null;
}
return event;
}
});
export const handleError = Sentry.handleErrorWithSentry();

66
src/hooks.server.ts Normal file
View File

@@ -0,0 +1,66 @@
import * as Sentry from '@sentry/sveltekit';
import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { getUserInfo } from '$lib/api';
import { createApiClient } from '$lib/server/api';
import {
clearSessionCookies,
isTokenAboutToExpire,
refreshSingleFlight,
setSessionCookies
} from '$lib/server/session';
export const handleError = Sentry.handleErrorWithSentry();
const appHandle: Handle = async ({ event, resolve }) => {
event.locals.accessToken = event.cookies.get('access_token') ?? null;
event.locals.user = null;
if (event.locals.accessToken) {
// Proactively rotate the token when it has ≤5s left. Without a backend grace
// window, reactive 401-based refresh races when the browser sends concurrent
// requests with the same about-to-expire token. Refreshing here, before any
// API call, means all parallel load functions in this request already see a
// freshly-issued token. The single-flight in refreshSingleFlight collapses
// simultaneous refreshes from concurrent browser requests on the same pod.
const refreshToken = event.cookies.get('refresh_token');
if (refreshToken && isTokenAboutToExpire(event.locals.accessToken)) {
const fresh = await refreshSingleFlight(refreshToken, fetch, event.url.origin);
if (fresh) {
setSessionCookies(event.cookies, fresh);
event.locals.accessToken = fresh.access_token;
} else {
clearSessionCookies(event.cookies);
event.locals.accessToken = null;
}
}
if (event.locals.accessToken) {
const api = createApiClient(event);
const { data, error } = await getUserInfo({ client: api });
if (!error) {
event.locals.user = data?.data ?? null;
}
if (!event.locals.user) {
event.locals.accessToken = null;
}
}
}
if (event.locals.user) {
Sentry.getIsolationScope().setAttributes({
'user.id': event.locals.user.user_id,
'user.username': event.locals.user.username,
'user.permission_level': event.locals.user.permission_level
});
}
const theme = (event.cookies.get('theme') as 'dark' | 'light') ?? 'dark';
return resolve(event, {
transformPageChunk({ html }) {
return html.replace('data-theme="dark"', `data-theme="${theme}"`);
}
});
};
export const handle = sequence(Sentry.sentryHandle(), appHandle);

10
src/instrumentation.server.ts Normal file
View File

@@ -0,0 +1,10 @@
import * as Sentry from '@sentry/sveltekit';
Sentry.init({
dsn: process.env.SENTRY_DSN,
environment: process.env.NODE_ENV ?? 'production',
sendDefaultPii: true,
tracesSampleRate: 1.0,
enableLogs: true,
integrations: [Sentry.consoleLoggingIntegration({ levels: ['log', 'warn', 'error'] })]
});

16
src/lib/api/client.gen.ts Normal file
View File

@@ -0,0 +1,16 @@
// This file is auto-generated by @hey-api/openapi-ts
import { type ClientOptions, type Config, createClient, createConfig } from './client';
import type { ClientOptions as ClientOptions2 } from './types.gen';
/**
* The `createClientConfig()` function will be called on client initialization
* and the returned object will become the client's initial configuration.
*
* You may want to initialize your client this way instead of calling
* `setConfig()`. This is useful for example if you're using Next.js
* to ensure your client always has the correct values.
*/
export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (override?: Config<ClientOptions & T>) => Config<Required<ClientOptions> & T>;
export const client = createClient(createConfig<ClientOptions2>({ baseUrl: 'http://localhost:8000/app/api/v1' }));

298
src/lib/api/client/client.gen.ts Normal file
View File

@@ -0,0 +1,298 @@
// This file is auto-generated by @hey-api/openapi-ts
import { createSseClient } from '../core/serverSentEvents.gen';
import type { HttpMethod } from '../core/types.gen';
import { getValidRequestBody } from '../core/utils.gen';
import type { Client, Config, RequestOptions, ResolvedRequestOptions } from './types.gen';
import {
buildUrl,
createConfig,
createInterceptors,
getParseAs,
mergeConfigs,
mergeHeaders,
setAuthParams,
} from './utils.gen';
type ReqInit = Omit<RequestInit, 'body' | 'headers'> & {
body?: any;
headers: ReturnType<typeof mergeHeaders>;
};
export const createClient = (config: Config = {}): Client => {
let _config = mergeConfigs(createConfig(), config);
const getConfig = (): Config => ({ ..._config });
const setConfig = (config: Config): Config => {
_config = mergeConfigs(_config, config);
return getConfig();
};
const interceptors = createInterceptors<Request, Response, unknown, ResolvedRequestOptions>();
const beforeRequest = async <
TData = unknown,
TResponseStyle extends 'data' | 'fields' = 'fields',
ThrowOnError extends boolean = boolean,
Url extends string = string,
>(
options: RequestOptions<TData, TResponseStyle, ThrowOnError, Url>,
) => {
const opts = {
..._config,
...options,
fetch: options.fetch ?? _config.fetch ?? globalThis.fetch,
headers: mergeHeaders(_config.headers, options.headers),
serializedBody: undefined as string | undefined,
};
if (opts.security) {
await setAuthParams({
...opts,
security: opts.security,
});
}
if (opts.requestValidator) {
await opts.requestValidator(opts);
}
if (opts.body !== undefined && opts.bodySerializer) {
opts.serializedBody = opts.bodySerializer(opts.body) as string | undefined;
}
// remove Content-Type header if body is empty to avoid sending invalid requests
if (opts.body === undefined || opts.serializedBody === '') {
opts.headers.delete('Content-Type');
}
const resolvedOpts = opts as typeof opts &
ResolvedRequestOptions<TResponseStyle, ThrowOnError, Url>;
const url = buildUrl(resolvedOpts);
return { opts: resolvedOpts, url };
};
const request: Client['request'] = async (options) => {
const { opts, url } = await beforeRequest(options);
const requestInit: ReqInit = {
redirect: 'follow',
...opts,
body: getValidRequestBody(opts),
};
let request = new Request(url, requestInit);
for (const fn of interceptors.request.fns) {
if (fn) {
request = await fn(request, opts);
}
}
// fetch must be assigned here, otherwise it would throw the error:
// TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
const _fetch = opts.fetch!;
let response: Response;
try {
response = await _fetch(request);
} catch (error) {
// Handle fetch exceptions (AbortError, network errors, etc.)
let finalError = error;
for (const fn of interceptors.error.fns) {
if (fn) {
finalError = (await fn(error, undefined as any, request, opts)) as unknown;
}
}
finalError = finalError || ({} as unknown);
if (opts.throwOnError) {
throw finalError;
}
// Return error response
return opts.responseStyle === 'data'
? undefined
: {
error: finalError,
request,
response: undefined as any,
};
}
for (const fn of interceptors.response.fns) {
if (fn) {
response = await fn(response, request, opts);
}
}
const result = {
request,
response,
};
if (response.ok) {
const parseAs =
(opts.parseAs === 'auto'
? getParseAs(response.headers.get('Content-Type'))
: opts.parseAs) ?? 'json';
if (response.status === 204 || response.headers.get('Content-Length') === '0') {
let emptyData: any;
switch (parseAs) {
case 'arrayBuffer':
case 'blob':
case 'text':
emptyData = await response[parseAs]();
break;
case 'formData':
emptyData = new FormData();
break;
case 'stream':
emptyData = response.body;
break;
case 'json':
default:
emptyData = {};
break;
}
return opts.responseStyle === 'data'
? emptyData
: {
data: emptyData,
...result,
};
}
let data: any;
switch (parseAs) {
case 'arrayBuffer':
case 'blob':
case 'formData':
case 'text':
data = await response[parseAs]();
break;
case 'json': {
// Some servers return 200 with no Content-Length and empty body.
// response.json() would throw; read as text and parse if non-empty.
const text = await response.text();
data = text ? JSON.parse(text) : {};
break;
}
case 'stream':
return opts.responseStyle === 'data'
? response.body
: {
data: response.body,
...result,
};
}
if (parseAs === 'json') {
if (opts.responseValidator) {
await opts.responseValidator(data);
}
if (opts.responseTransformer) {
data = await opts.responseTransformer(data);
}
}
return opts.responseStyle === 'data'
? data
: {
data,
...result,
};
}
const textError = await response.text();
let jsonError: unknown;
try {
jsonError = JSON.parse(textError);
} catch {
// noop
}
const error = jsonError ?? textError;
let finalError = error;
for (const fn of interceptors.error.fns) {
if (fn) {
finalError = (await fn(error, response, request, opts)) as string;
}
}
finalError = finalError || ({} as string);
if (opts.throwOnError) {
throw finalError;
}
// TODO: we probably want to return error and improve types
return opts.responseStyle === 'data'
? undefined
: {
error: finalError,
...result,
};
};
const makeMethodFn = (method: Uppercase<HttpMethod>) => (options: RequestOptions) =>
request({ ...options, method });
const makeSseFn = (method: Uppercase<HttpMethod>) => async (options: RequestOptions) => {
const { opts, url } = await beforeRequest(options);
return createSseClient({
...opts,
body: opts.body as BodyInit | null | undefined,
headers: opts.headers as unknown as Record<string, string>,
method,
onRequest: async (url, init) => {
let request = new Request(url, init);
for (const fn of interceptors.request.fns) {
if (fn) {
request = await fn(request, opts);
}
}
return request;
},
serializedBody: getValidRequestBody(opts) as BodyInit | null | undefined,
url,
});
};
const _buildUrl: Client['buildUrl'] = (options) => buildUrl({ ..._config, ...options });
return {
buildUrl: _buildUrl,
connect: makeMethodFn('CONNECT'),
delete: makeMethodFn('DELETE'),
get: makeMethodFn('GET'),
getConfig,
head: makeMethodFn('HEAD'),
interceptors,
options: makeMethodFn('OPTIONS'),
patch: makeMethodFn('PATCH'),
post: makeMethodFn('POST'),
put: makeMethodFn('PUT'),
request,
setConfig,
sse: {
connect: makeSseFn('CONNECT'),
delete: makeSseFn('DELETE'),
get: makeSseFn('GET'),
head: makeSseFn('HEAD'),
options: makeSseFn('OPTIONS'),
patch: makeSseFn('PATCH'),
post: makeSseFn('POST'),
put: makeSseFn('PUT'),
trace: makeSseFn('TRACE'),
},
trace: makeMethodFn('TRACE'),
} as Client;
};

25
src/lib/api/client/index.ts Normal file
View File

@@ -0,0 +1,25 @@
// This file is auto-generated by @hey-api/openapi-ts
export type { Auth } from '../core/auth.gen';
export type { QuerySerializerOptions } from '../core/bodySerializer.gen';
export {
formDataBodySerializer,
jsonBodySerializer,
urlSearchParamsBodySerializer,
} from '../core/bodySerializer.gen';
export { buildClientParams } from '../core/params.gen';
export { serializeQueryKeyValue } from '../core/queryKeySerializer.gen';
export { createClient } from './client.gen';
export type {
Client,
ClientOptions,
Config,
CreateClientConfig,
Options,
RequestOptions,
RequestResult,
ResolvedRequestOptions,
ResponseStyle,
TDataShape,
} from './types.gen';
export { createConfig, mergeHeaders } from './utils.gen';

214
src/lib/api/client/types.gen.ts Normal file
View File

@@ -0,0 +1,214 @@
// This file is auto-generated by @hey-api/openapi-ts
import type { Auth } from '../core/auth.gen';
import type {
ServerSentEventsOptions,
ServerSentEventsResult,
} from '../core/serverSentEvents.gen';
import type { Client as CoreClient, Config as CoreConfig } from '../core/types.gen';
import type { Middleware } from './utils.gen';
export type ResponseStyle = 'data' | 'fields';
export interface Config<T extends ClientOptions = ClientOptions>
extends Omit<RequestInit, 'body' | 'headers' | 'method'>, CoreConfig {
/**
* Base URL for all requests made by this client.
*/
baseUrl?: T['baseUrl'];
/**
* Fetch API implementation. You can use this option to provide a custom
* fetch instance.
*
* @default globalThis.fetch
*/
fetch?: typeof fetch;
/**
* Please don't use the Fetch client for Next.js applications. The `next`
* options won't have any effect.
*
* Install {@link https://www.npmjs.com/package/@hey-api/client-next `@hey-api/client-next`} instead.
*/
next?: never;
/**
* Return the response data parsed in a specified format. By default, `auto`
* will infer the appropriate method from the `Content-Type` response header.
* You can override this behavior with any of the {@link Body} methods.
* Select `stream` if you don't want to parse response data at all.
*
* @default 'auto'
*/
parseAs?: 'arrayBuffer' | 'auto' | 'blob' | 'formData' | 'json' | 'stream' | 'text';
/**
* Should we return only data or multiple fields (data, error, response, etc.)?
*
* @default 'fields'
*/
responseStyle?: ResponseStyle;
/**
* Throw an error instead of returning it in the response?
*
* @default false
*/
throwOnError?: T['throwOnError'];
}
export interface RequestOptions<
TData = unknown,
TResponseStyle extends ResponseStyle = 'fields',
ThrowOnError extends boolean = boolean,
Url extends string = string,
>
extends
Config<{
responseStyle: TResponseStyle;
throwOnError: ThrowOnError;
}>,
Pick<
ServerSentEventsOptions<TData>,
| 'onRequest'
| 'onSseError'
| 'onSseEvent'
| 'sseDefaultRetryDelay'
| 'sseMaxRetryAttempts'
| 'sseMaxRetryDelay'
> {
/**
* Any body that you want to add to your request.
*
* {@link https://developer.mozilla.org/docs/Web/API/fetch#body}
*/
body?: unknown;
path?: Record<string, unknown>;
query?: Record<string, unknown>;
/**
* Security mechanism(s) to use for the request.
*/
security?: ReadonlyArray<Auth>;
url: Url;
}
export interface ResolvedRequestOptions<
TResponseStyle extends ResponseStyle = 'fields',
ThrowOnError extends boolean = boolean,
Url extends string = string,
> extends RequestOptions<unknown, TResponseStyle, ThrowOnError, Url> {
serializedBody?: string;
}
export type RequestResult<
TData = unknown,
TError = unknown,
ThrowOnError extends boolean = boolean,
TResponseStyle extends ResponseStyle = 'fields',
> = ThrowOnError extends true
? Promise<
TResponseStyle extends 'data'
? TData extends Record<string, unknown>
? TData[keyof TData]
: TData
: {
data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
request: Request;
response: Response;
}
>
: Promise<
TResponseStyle extends 'data'
? (TData extends Record<string, unknown> ? TData[keyof TData] : TData) | undefined
: (
| {
data: TData extends Record<string, unknown> ? TData[keyof TData] : TData;
error: undefined;
}
| {
data: undefined;
error: TError extends Record<string, unknown> ? TError[keyof TError] : TError;
}
) & {
request: Request;
response: Response;
}
>;
export interface ClientOptions {
baseUrl?: string;
responseStyle?: ResponseStyle;
throwOnError?: boolean;
}
type MethodFn = <
TData = unknown,
TError = unknown,
ThrowOnError extends boolean = false,
TResponseStyle extends ResponseStyle = 'fields',
>(
options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'>,
) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
type SseFn = <
TData = unknown,
TError = unknown,
ThrowOnError extends boolean = false,
TResponseStyle extends ResponseStyle = 'fields',
>(
options: Omit<RequestOptions<never, TResponseStyle, ThrowOnError>, 'method'>,
) => Promise<ServerSentEventsResult<TData, TError>>;
type RequestFn = <
TData = unknown,
TError = unknown,
ThrowOnError extends boolean = false,
TResponseStyle extends ResponseStyle = 'fields',
>(
options: Omit<RequestOptions<TData, TResponseStyle, ThrowOnError>, 'method'> &
Pick<Required<RequestOptions<TData, TResponseStyle, ThrowOnError>>, 'method'>,
) => RequestResult<TData, TError, ThrowOnError, TResponseStyle>;
type BuildUrlFn = <
TData extends {
body?: unknown;
path?: Record<string, unknown>;
query?: Record<string, unknown>;
url: string;
},
>(
options: TData & Options<TData>,
) => string;
export type Client = CoreClient<RequestFn, Config, MethodFn, BuildUrlFn, SseFn> & {
interceptors: Middleware<Request, Response, unknown, ResolvedRequestOptions>;
};
/**
* The `createClientConfig()` function will be called on client initialization
* and the returned object will become the client's initial configuration.
*
* You may want to initialize your client this way instead of calling
* `setConfig()`. This is useful for example if you're using Next.js
* to ensure your client always has the correct values.
*/
export type CreateClientConfig<T extends ClientOptions = ClientOptions> = (
override?: Config<ClientOptions & T>,
) => Config<Required<ClientOptions> & T>;
export interface TDataShape {
body?: unknown;
headers?: unknown;
path?: unknown;
query?: unknown;
url: string;
}
type OmitKeys<T, K> = Pick<T, Exclude<keyof T, K>>;
export type Options<
TData extends TDataShape = TDataShape,
ThrowOnError extends boolean = boolean,
TResponse = unknown,
TResponseStyle extends ResponseStyle = 'fields',
> = OmitKeys<
RequestOptions<TResponse, TResponseStyle, ThrowOnError>,
'body' | 'path' | 'query' | 'url'
> &
([TData] extends [never] ? unknown : Omit<TData, 'url'>);

316
src/lib/api/client/utils.gen.ts Normal file
View File

@@ -0,0 +1,316 @@
// This file is auto-generated by @hey-api/openapi-ts
import { getAuthToken } from '../core/auth.gen';
import type { QuerySerializerOptions } from '../core/bodySerializer.gen';
import { jsonBodySerializer } from '../core/bodySerializer.gen';
import {
serializeArrayParam,
serializeObjectParam,
serializePrimitiveParam,
} from '../core/pathSerializer.gen';
import { getUrl } from '../core/utils.gen';
import type { Client, ClientOptions, Config, RequestOptions } from './types.gen';
export const createQuerySerializer = <T = unknown>({
parameters = {},
...args
}: QuerySerializerOptions = {}) => {
const querySerializer = (queryParams: T) => {
const search: string[] = [];
if (queryParams && typeof queryParams === 'object') {
for (const name in queryParams) {
const value = queryParams[name];
if (value === undefined || value === null) {
continue;
}
const options = parameters[name] || args;
if (Array.isArray(value)) {
const serializedArray = serializeArrayParam({
allowReserved: options.allowReserved,
explode: true,
name,
style: 'form',
value,
...options.array,
});
if (serializedArray) search.push(serializedArray);
} else if (typeof value === 'object') {
const serializedObject = serializeObjectParam({
allowReserved: options.allowReserved,
explode: true,
name,
style: 'deepObject',
value: value as Record<string, unknown>,
...options.object,
});
if (serializedObject) search.push(serializedObject);
} else {
const serializedPrimitive = serializePrimitiveParam({
allowReserved: options.allowReserved,
name,
value: value as string,
});
if (serializedPrimitive) search.push(serializedPrimitive);
}
}
}
return search.join('&');
};
return querySerializer;
};
/**
* Infers parseAs value from provided Content-Type header.
*/
export const getParseAs = (contentType: string | null): Exclude<Config['parseAs'], 'auto'> => {
if (!contentType) {
// If no Content-Type header is provided, the best we can do is return the raw response body,
// which is effectively the same as the 'stream' option.
return 'stream';
}
const cleanContent = contentType.split(';')[0]?.trim();
if (!cleanContent) {
return;
}
if (cleanContent.startsWith('application/json') || cleanContent.endsWith('+json')) {
return 'json';
}
if (cleanContent === 'multipart/form-data') {
return 'formData';
}
if (
['application/', 'audio/', 'image/', 'video/'].some((type) => cleanContent.startsWith(type))
) {
return 'blob';
}
if (cleanContent.startsWith('text/')) {
return 'text';
}
return;
};
const checkForExistence = (
options: Pick<RequestOptions, 'auth' | 'query'> & {
headers: Headers;
},
name?: string,
): boolean => {
if (!name) {
return false;
}
if (
options.headers.has(name) ||
options.query?.[name] ||
options.headers.get('Cookie')?.includes(`${name}=`)
) {
return true;
}
return false;
};
export const setAuthParams = async ({
security,
...options
}: Pick<Required<RequestOptions>, 'security'> &
Pick<RequestOptions, 'auth' | 'query'> & {
headers: Headers;
}) => {
for (const auth of security) {
if (checkForExistence(options, auth.name)) {
continue;
}
const token = await getAuthToken(auth, options.auth);
if (!token) {
continue;
}
const name = auth.name ?? 'Authorization';
switch (auth.in) {
case 'query':
if (!options.query) {
options.query = {};
}
options.query[name] = token;
break;
case 'cookie':
options.headers.append('Cookie', `${name}=${token}`);
break;
case 'header':
default:
options.headers.set(name, token);
break;
}
}
};
export const buildUrl: Client['buildUrl'] = (options) =>
getUrl({
baseUrl: options.baseUrl as string,
path: options.path,
query: options.query,
querySerializer:
typeof options.querySerializer === 'function'
? options.querySerializer
: createQuerySerializer(options.querySerializer),
url: options.url,
});
export const mergeConfigs = (a: Config, b: Config): Config => {
const config = { ...a, ...b };
if (config.baseUrl?.endsWith('/')) {
config.baseUrl = config.baseUrl.substring(0, config.baseUrl.length - 1);
}
config.headers = mergeHeaders(a.headers, b.headers);
return config;
};
const headersEntries = (headers: Headers): Array<[string, string]> => {
const entries: Array<[string, string]> = [];
headers.forEach((value, key) => {
entries.push([key, value]);
});
return entries;
};
export const mergeHeaders = (
...headers: Array<Required<Config>['headers'] | undefined>
): Headers => {
const mergedHeaders = new Headers();
for (const header of headers) {
if (!header) {
continue;
}
const iterator = header instanceof Headers ? headersEntries(header) : Object.entries(header);
for (const [key, value] of iterator) {
if (value === null) {
mergedHeaders.delete(key);
} else if (Array.isArray(value)) {
for (const v of value) {
mergedHeaders.append(key, v as string);
}
} else if (value !== undefined) {
// assume object headers are meant to be JSON stringified, i.e., their
// content value in OpenAPI specification is 'application/json'
mergedHeaders.set(
key,
typeof value === 'object' ? JSON.stringify(value) : (value as string),
);
}
}
}
return mergedHeaders;
};
type ErrInterceptor<Err, Res, Req, Options> = (
error: Err,
response: Res,
request: Req,
options: Options,
) => Err | Promise<Err>;
type ReqInterceptor<Req, Options> = (request: Req, options: Options) => Req | Promise<Req>;
type ResInterceptor<Res, Req, Options> = (
response: Res,
request: Req,
options: Options,
) => Res | Promise<Res>;
class Interceptors<Interceptor> {
fns: Array<Interceptor | null> = [];
clear(): void {
this.fns = [];
}
eject(id: number | Interceptor): void {
const index = this.getInterceptorIndex(id);
if (this.fns[index]) {
this.fns[index] = null;
}
}
exists(id: number | Interceptor): boolean {
const index = this.getInterceptorIndex(id);
return Boolean(this.fns[index]);
}
getInterceptorIndex(id: number | Interceptor): number {
if (typeof id === 'number') {
return this.fns[id] ? id : -1;
}
return this.fns.indexOf(id);
}
update(id: number | Interceptor, fn: Interceptor): number | Interceptor | false {
const index = this.getInterceptorIndex(id);
if (this.fns[index]) {
this.fns[index] = fn;
return id;
}
return false;
}
use(fn: Interceptor): number {
this.fns.push(fn);
return this.fns.length - 1;
}
}
export interface Middleware<Req, Res, Err, Options> {
error: Interceptors<ErrInterceptor<Err, Res, Req, Options>>;
request: Interceptors<ReqInterceptor<Req, Options>>;
response: Interceptors<ResInterceptor<Res, Req, Options>>;
}
export const createInterceptors = <Req, Res, Err, Options>(): Middleware<
Req,
Res,
Err,
Options
> => ({
error: new Interceptors<ErrInterceptor<Err, Res, Req, Options>>(),
request: new Interceptors<ReqInterceptor<Req, Options>>(),
response: new Interceptors<ResInterceptor<Res, Req, Options>>(),
});
const defaultQuerySerializer = createQuerySerializer({
allowReserved: false,
array: {
explode: true,
style: 'form',
},
object: {
explode: true,
style: 'deepObject',
},
});
const defaultHeaders = {
'Content-Type': 'application/json',
};
export const createConfig = <T extends ClientOptions = ClientOptions>(
override: Config<Omit<ClientOptions, keyof T> & T> = {},
): Config<Omit<ClientOptions, keyof T> & T> => ({
...jsonBodySerializer,
headers: defaultHeaders,
parseAs: 'auto',
querySerializer: defaultQuerySerializer,
...override,
});

41
src/lib/api/core/auth.gen.ts Normal file
View File

@@ -0,0 +1,41 @@
// This file is auto-generated by @hey-api/openapi-ts
export type AuthToken = string | undefined;
export interface Auth {
/**
* Which part of the request do we use to send the auth?
*
* @default 'header'
*/
in?: 'header' | 'query' | 'cookie';
/**
* Header or query parameter name.
*
* @default 'Authorization'
*/
name?: string;
scheme?: 'basic' | 'bearer';
type: 'apiKey' | 'http';
}
export const getAuthToken = async (
auth: Auth,
callback: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken,
): Promise<string | undefined> => {
const token = typeof callback === 'function' ? await callback(auth) : callback;
if (!token) {
return;
}
if (auth.scheme === 'bearer') {
return `Bearer ${token}`;
}
if (auth.scheme === 'basic') {
return `Basic ${btoa(token)}`;
}
return token;
};

82
src/lib/api/core/bodySerializer.gen.ts Normal file
View File

@@ -0,0 +1,82 @@
// This file is auto-generated by @hey-api/openapi-ts
import type { ArrayStyle, ObjectStyle, SerializerOptions } from './pathSerializer.gen';
export type QuerySerializer = (query: Record<string, unknown>) => string;
export type BodySerializer = (body: unknown) => unknown;
type QuerySerializerOptionsObject = {
allowReserved?: boolean;
array?: Partial<SerializerOptions<ArrayStyle>>;
object?: Partial<SerializerOptions<ObjectStyle>>;
};
export type QuerySerializerOptions = QuerySerializerOptionsObject & {
/**
* Per-parameter serialization overrides. When provided, these settings
* override the global array/object settings for specific parameter names.
*/
parameters?: Record<string, QuerySerializerOptionsObject>;
};
const serializeFormDataPair = (data: FormData, key: string, value: unknown): void => {
if (typeof value === 'string' || value instanceof Blob) {
data.append(key, value);
} else if (value instanceof Date) {
data.append(key, value.toISOString());
} else {
data.append(key, JSON.stringify(value));
}
};
const serializeUrlSearchParamsPair = (data: URLSearchParams, key: string, value: unknown): void => {
if (typeof value === 'string') {
data.append(key, value);
} else {
data.append(key, JSON.stringify(value));
}
};
export const formDataBodySerializer = {
bodySerializer: (body: unknown): FormData => {
const data = new FormData();
Object.entries(body as Record<string, unknown>).forEach(([key, value]) => {
if (value === undefined || value === null) {
return;
}
if (Array.isArray(value)) {
value.forEach((v) => serializeFormDataPair(data, key, v));
} else {
serializeFormDataPair(data, key, value);
}
});
return data;
},
};
export const jsonBodySerializer = {
bodySerializer: (body: unknown): string =>
JSON.stringify(body, (_key, value) => (typeof value === 'bigint' ? value.toString() : value)),
};
export const urlSearchParamsBodySerializer = {
bodySerializer: (body: unknown): string => {
const data = new URLSearchParams();
Object.entries(body as Record<string, unknown>).forEach(([key, value]) => {
if (value === undefined || value === null) {
return;
}
if (Array.isArray(value)) {
value.forEach((v) => serializeUrlSearchParamsPair(data, key, v));
} else {
serializeUrlSearchParamsPair(data, key, value);
}
});
return data.toString();
},
};

169
src/lib/api/core/params.gen.ts Normal file
View File

@@ -0,0 +1,169 @@
// This file is auto-generated by @hey-api/openapi-ts
type Slot = 'body' | 'headers' | 'path' | 'query';
export type Field =
| {
in: Exclude<Slot, 'body'>;
/**
* Field name. This is the name we want the user to see and use.
*/
key: string;
/**
* Field mapped name. This is the name we want to use in the request.
* If omitted, we use the same value as `key`.
*/
map?: string;
}
| {
in: Extract<Slot, 'body'>;
/**
* Key isn't required for bodies.
*/
key?: string;
map?: string;
}
| {
/**
* Field name. This is the name we want the user to see and use.
*/
key: string;
/**
* Field mapped name. This is the name we want to use in the request.
* If `in` is omitted, `map` aliases `key` to the transport layer.
*/
map: Slot;
};
export interface Fields {
allowExtra?: Partial<Record<Slot, boolean>>;
args?: ReadonlyArray<Field>;
}
export type FieldsConfig = ReadonlyArray<Field | Fields>;
const extraPrefixesMap: Record<string, Slot> = {
$body_: 'body',
$headers_: 'headers',
$path_: 'path',
$query_: 'query',
};
const extraPrefixes = Object.entries(extraPrefixesMap);
type KeyMap = Map<
string,
| {
in: Slot;
map?: string;
}
| {
in?: never;
map: Slot;
}
>;
const buildKeyMap = (fields: FieldsConfig, map?: KeyMap): KeyMap => {
if (!map) {
map = new Map();
}
for (const config of fields) {
if ('in' in config) {
if (config.key) {
map.set(config.key, {
in: config.in,
map: config.map,
});
}
} else if ('key' in config) {
map.set(config.key, {
map: config.map,
});
} else if (config.args) {
buildKeyMap(config.args, map);
}
}
return map;
};
interface Params {
body: unknown;
headers: Record<string, unknown>;
path: Record<string, unknown>;
query: Record<string, unknown>;
}
const stripEmptySlots = (params: Params) => {
for (const [slot, value] of Object.entries(params)) {
if (value && typeof value === 'object' && !Array.isArray(value) && !Object.keys(value).length) {
delete params[slot as Slot];
}
}
};
export const buildClientParams = (args: ReadonlyArray<unknown>, fields: FieldsConfig) => {
const params: Params = {
body: {},
headers: {},
path: {},
query: {},
};
const map = buildKeyMap(fields);
let config: FieldsConfig[number] | undefined;
for (const [index, arg] of args.entries()) {
if (fields[index]) {
config = fields[index];
}
if (!config) {
continue;
}
if ('in' in config) {
if (config.key) {
const field = map.get(config.key)!;
const name = field.map || config.key;
if (field.in) {
(params[field.in] as Record<string, unknown>)[name] = arg;
}
} else {
params.body = arg;
}
} else {
for (const [key, value] of Object.entries(arg ?? {})) {
const field = map.get(key);
if (field) {
if (field.in) {
const name = field.map || key;
(params[field.in] as Record<string, unknown>)[name] = value;
} else {
params[field.map] = value;
}
} else {
const extra = extraPrefixes.find(([prefix]) => key.startsWith(prefix));
if (extra) {
const [prefix, slot] = extra;
(params[slot] as Record<string, unknown>)[key.slice(prefix.length)] = value;
} else if ('allowExtra' in config && config.allowExtra) {
for (const [slot, allowed] of Object.entries(config.allowExtra)) {
if (allowed) {
(params[slot as Slot] as Record<string, unknown>)[key] = value;
break;
}
}
}
}
}
}
}
stripEmptySlots(params);
return params;
};

171
src/lib/api/core/pathSerializer.gen.ts Normal file
View File

@@ -0,0 +1,171 @@
// This file is auto-generated by @hey-api/openapi-ts
interface SerializeOptions<T> extends SerializePrimitiveOptions, SerializerOptions<T> {}
interface SerializePrimitiveOptions {
allowReserved?: boolean;
name: string;
}
export interface SerializerOptions<T> {
/**
* @default true
*/
explode: boolean;
style: T;
}
export type ArrayStyle = 'form' | 'spaceDelimited' | 'pipeDelimited';
export type ArraySeparatorStyle = ArrayStyle | MatrixStyle;
type MatrixStyle = 'label' | 'matrix' | 'simple';
export type ObjectStyle = 'form' | 'deepObject';
type ObjectSeparatorStyle = ObjectStyle | MatrixStyle;
interface SerializePrimitiveParam extends SerializePrimitiveOptions {
value: string;
}
export const separatorArrayExplode = (style: ArraySeparatorStyle) => {
switch (style) {
case 'label':
return '.';
case 'matrix':
return ';';
case 'simple':
return ',';
default:
return '&';
}
};
export const separatorArrayNoExplode = (style: ArraySeparatorStyle) => {
switch (style) {
case 'form':
return ',';
case 'pipeDelimited':
return '|';
case 'spaceDelimited':
return '%20';
default:
return ',';
}
};
export const separatorObjectExplode = (style: ObjectSeparatorStyle) => {
switch (style) {
case 'label':
return '.';
case 'matrix':
return ';';
case 'simple':
return ',';
default:
return '&';
}
};
export const serializeArrayParam = ({
allowReserved,
explode,
name,
style,
value,
}: SerializeOptions<ArraySeparatorStyle> & {
value: unknown[];
}) => {
if (!explode) {
const joinedValues = (
allowReserved ? value : value.map((v) => encodeURIComponent(v as string))
).join(separatorArrayNoExplode(style));
switch (style) {
case 'label':
return `.${joinedValues}`;
case 'matrix':
return `;${name}=${joinedValues}`;
case 'simple':
return joinedValues;
default:
return `${name}=${joinedValues}`;
}
}
const separator = separatorArrayExplode(style);
const joinedValues = value
.map((v) => {
if (style === 'label' || style === 'simple') {
return allowReserved ? v : encodeURIComponent(v as string);
}
return serializePrimitiveParam({
allowReserved,
name,
value: v as string,
});
})
.join(separator);
return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;
};
export const serializePrimitiveParam = ({
allowReserved,
name,
value,
}: SerializePrimitiveParam) => {
if (value === undefined || value === null) {
return '';
}
if (typeof value === 'object') {
throw new Error(
'Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.',
);
}
return `${name}=${allowReserved ? value : encodeURIComponent(value)}`;
};
export const serializeObjectParam = ({
allowReserved,
explode,
name,
style,
value,
valueOnly,
}: SerializeOptions<ObjectSeparatorStyle> & {
value: Record<string, unknown> | Date;
valueOnly?: boolean;
}) => {
if (value instanceof Date) {
return valueOnly ? value.toISOString() : `${name}=${value.toISOString()}`;
}
if (style !== 'deepObject' && !explode) {
let values: string[] = [];
Object.entries(value).forEach(([key, v]) => {
values = [...values, key, allowReserved ? (v as string) : encodeURIComponent(v as string)];
});
const joinedValues = values.join(',');
switch (style) {
case 'form':
return `${name}=${joinedValues}`;
case 'label':
return `.${joinedValues}`;
case 'matrix':
return `;${name}=${joinedValues}`;
default:
return joinedValues;
}
}
const separator = separatorObjectExplode(style);
const joinedValues = Object.entries(value)
.map(([key, v]) =>
serializePrimitiveParam({
allowReserved,
name: style === 'deepObject' ? `${name}[${key}]` : key,
value: v as string,
}),
)
.join(separator);
return style === 'label' || style === 'matrix' ? separator + joinedValues : joinedValues;
};

117
src/lib/api/core/queryKeySerializer.gen.ts Normal file
View File

@@ -0,0 +1,117 @@
// This file is auto-generated by @hey-api/openapi-ts
/**
* JSON-friendly union that mirrors what Pinia Colada can hash.
*/
export type JsonValue =
| null
| string
| number
| boolean
| JsonValue[]
| { [key: string]: JsonValue };
/**
* Replacer that converts non-JSON values (bigint, Date, etc.) to safe substitutes.
*/
export const queryKeyJsonReplacer = (_key: string, value: unknown) => {
if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
return undefined;
}
if (typeof value === 'bigint') {
return value.toString();
}
if (value instanceof Date) {
return value.toISOString();
}
return value;
};
/**
* Safely stringifies a value and parses it back into a JsonValue.
*/
export const stringifyToJsonValue = (input: unknown): JsonValue | undefined => {
try {
const json = JSON.stringify(input, queryKeyJsonReplacer);
if (json === undefined) {
return undefined;
}
return JSON.parse(json) as JsonValue;
} catch {
return undefined;
}
};
/**
* Detects plain objects (including objects with a null prototype).
*/
const isPlainObject = (value: unknown): value is Record<string, unknown> => {
if (value === null || typeof value !== 'object') {
return false;
}
const prototype = Object.getPrototypeOf(value as object);
return prototype === Object.prototype || prototype === null;
};
/**
* Turns URLSearchParams into a sorted JSON object for deterministic keys.
*/
const serializeSearchParams = (params: URLSearchParams): JsonValue => {
const entries = Array.from(params.entries()).sort(([a], [b]) => a.localeCompare(b));
const result: Record<string, JsonValue> = {};
for (const [key, value] of entries) {
const existing = result[key];
if (existing === undefined) {
result[key] = value;
continue;
}
if (Array.isArray(existing)) {
(existing as string[]).push(value);
} else {
result[key] = [existing, value];
}
}
return result;
};
/**
* Normalizes any accepted value into a JSON-friendly shape for query keys.
*/
export const serializeQueryKeyValue = (value: unknown): JsonValue | undefined => {
if (value === null) {
return null;
}
if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
return value;
}
if (value === undefined || typeof value === 'function' || typeof value === 'symbol') {
return undefined;
}
if (typeof value === 'bigint') {
return value.toString();
}
if (value instanceof Date) {
return value.toISOString();
}
if (Array.isArray(value)) {
return stringifyToJsonValue(value);
}
if (typeof URLSearchParams !== 'undefined' && value instanceof URLSearchParams) {
return serializeSearchParams(value);
}
if (isPlainObject(value)) {
return stringifyToJsonValue(value);
}
return undefined;
};

242
src/lib/api/core/serverSentEvents.gen.ts Normal file
View File

@@ -0,0 +1,242 @@
// This file is auto-generated by @hey-api/openapi-ts
import type { Config } from './types.gen';
export type ServerSentEventsOptions<TData = unknown> = Omit<RequestInit, 'method'> &
Pick<Config, 'method' | 'responseTransformer' | 'responseValidator'> & {
/**
* Fetch API implementation. You can use this option to provide a custom
* fetch instance.
*
* @default globalThis.fetch
*/
fetch?: typeof fetch;
/**
* Implementing clients can call request interceptors inside this hook.
*/
onRequest?: (url: string, init: RequestInit) => Promise<Request>;
/**
* Callback invoked when a network or parsing error occurs during streaming.
*
* This option applies only if the endpoint returns a stream of events.
*
* @param error The error that occurred.
*/
onSseError?: (error: unknown) => void;
/**
* Callback invoked when an event is streamed from the server.
*
* This option applies only if the endpoint returns a stream of events.
*
* @param event Event streamed from the server.
* @returns Nothing (void).
*/
onSseEvent?: (event: StreamEvent<TData>) => void;
serializedBody?: RequestInit['body'];
/**
* Default retry delay in milliseconds.
*
* This option applies only if the endpoint returns a stream of events.
*
* @default 3000
*/
sseDefaultRetryDelay?: number;
/**
* Maximum number of retry attempts before giving up.
*/
sseMaxRetryAttempts?: number;
/**
* Maximum retry delay in milliseconds.
*
* Applies only when exponential backoff is used.
*
* This option applies only if the endpoint returns a stream of events.
*
* @default 30000
*/
sseMaxRetryDelay?: number;
/**
* Optional sleep function for retry backoff.
*
* Defaults to using `setTimeout`.
*/
sseSleepFn?: (ms: number) => Promise<void>;
url: string;
};
export interface StreamEvent<TData = unknown> {
data: TData;
event?: string;
id?: string;
retry?: number;
}
export type ServerSentEventsResult<TData = unknown, TReturn = void, TNext = unknown> = {
stream: AsyncGenerator<
TData extends Record<string, unknown> ? TData[keyof TData] : TData,
TReturn,
TNext
>;
};
export function createSseClient<TData = unknown>({
onRequest,
onSseError,
onSseEvent,
responseTransformer,
responseValidator,
sseDefaultRetryDelay,
sseMaxRetryAttempts,
sseMaxRetryDelay,
sseSleepFn,
url,
...options
}: ServerSentEventsOptions): ServerSentEventsResult<TData> {
let lastEventId: string | undefined;
const sleep = sseSleepFn ?? ((ms: number) => new Promise((resolve) => setTimeout(resolve, ms)));
const createStream = async function* () {
let retryDelay: number = sseDefaultRetryDelay ?? 3000;
let attempt = 0;
const signal = options.signal ?? new AbortController().signal;
while (true) {
if (signal.aborted) break;
attempt++;
const headers =
options.headers instanceof Headers
? options.headers
: new Headers(options.headers as Record<string, string> | undefined);
if (lastEventId !== undefined) {
headers.set('Last-Event-ID', lastEventId);
}
try {
const requestInit: RequestInit = {
redirect: 'follow',
...options,
body: options.serializedBody,
headers,
signal,
};
let request = new Request(url, requestInit);
if (onRequest) {
request = await onRequest(url, requestInit);
}
// fetch must be assigned here, otherwise it would throw the error:
// TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation
const _fetch = options.fetch ?? globalThis.fetch;
const response = await _fetch(request);
if (!response.ok) throw new Error(`SSE failed: ${response.status} ${response.statusText}`);
if (!response.body) throw new Error('No body in SSE response');
const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
let buffer = '';
const abortHandler = () => {
try {
reader.cancel();
} catch {
// noop
}
};
signal.addEventListener('abort', abortHandler);
try {
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += value;
buffer = buffer.replace(/\r\n?/g, '\n'); // normalize line endings
const chunks = buffer.split('\n\n');
buffer = chunks.pop() ?? '';
for (const chunk of chunks) {
const lines = chunk.split('\n');
const dataLines: Array<string> = [];
let eventName: string | undefined;
for (const line of lines) {
if (line.startsWith('data:')) {
dataLines.push(line.replace(/^data:\s*/, ''));
} else if (line.startsWith('event:')) {
eventName = line.replace(/^event:\s*/, '');
} else if (line.startsWith('id:')) {
lastEventId = line.replace(/^id:\s*/, '');
} else if (line.startsWith('retry:')) {
const parsed = Number.parseInt(line.replace(/^retry:\s*/, ''), 10);
if (!Number.isNaN(parsed)) {
retryDelay = parsed;
}
}
}
let data: unknown;
let parsedJson = false;
if (dataLines.length) {
const rawData = dataLines.join('\n');
try {
data = JSON.parse(rawData);
parsedJson = true;
} catch {
data = rawData;
}
}
if (parsedJson) {
if (responseValidator) {
await responseValidator(data);
}
if (responseTransformer) {
data = await responseTransformer(data);
}
}
onSseEvent?.({
data,
event: eventName,
id: lastEventId,
retry: retryDelay,
});
if (dataLines.length) {
yield data as any;
}
}
}
} finally {
signal.removeEventListener('abort', abortHandler);
reader.releaseLock();
}
break; // exit loop on normal completion
} catch (error) {
// connection failed or aborted; retry after delay
onSseError?.(error);
if (sseMaxRetryAttempts !== undefined && attempt >= sseMaxRetryAttempts) {
break; // stop after firing error
}
// exponential backoff: double retry each attempt, cap at 30s
const backoff = Math.min(retryDelay * 2 ** (attempt - 1), sseMaxRetryDelay ?? 30000);
await sleep(backoff);
}
}
};
const stream = createStream();
return { stream };
}

104
src/lib/api/core/types.gen.ts Normal file
View File

@@ -0,0 +1,104 @@
// This file is auto-generated by @hey-api/openapi-ts
import type { Auth, AuthToken } from './auth.gen';
import type { BodySerializer, QuerySerializer, QuerySerializerOptions } from './bodySerializer.gen';
export type HttpMethod =
| 'connect'
| 'delete'
| 'get'
| 'head'
| 'options'
| 'patch'
| 'post'
| 'put'
| 'trace';
export type Client<
RequestFn = never,
Config = unknown,
MethodFn = never,
BuildUrlFn = never,
SseFn = never,
> = {
/**
* Returns the final request URL.
*/
buildUrl: BuildUrlFn;
getConfig: () => Config;
request: RequestFn;
setConfig: (config: Config) => Config;
} & {
[K in HttpMethod]: MethodFn;
} & ([SseFn] extends [never] ? { sse?: never } : { sse: { [K in HttpMethod]: SseFn } });
export interface Config {
/**
* Auth token or a function returning auth token. The resolved value will be
* added to the request payload as defined by its `security` array.
*/
auth?: ((auth: Auth) => Promise<AuthToken> | AuthToken) | AuthToken;
/**
* A function for serializing request body parameter. By default,
* {@link JSON.stringify()} will be used.
*/
bodySerializer?: BodySerializer | null;
/**
* An object containing any HTTP headers that you want to pre-populate your
* `Headers` object with.
*
* {@link https://developer.mozilla.org/docs/Web/API/Headers/Headers#init See more}
*/
headers?:
| RequestInit['headers']
| Record<
string,
string | number | boolean | (string | number | boolean)[] | null | undefined | unknown
>;
/**
* The request method.
*
* {@link https://developer.mozilla.org/docs/Web/API/fetch#method See more}
*/
method?: Uppercase<HttpMethod>;
/**
* A function for serializing request query parameters. By default, arrays
* will be exploded in form style, objects will be exploded in deepObject
* style, and reserved characters are percent-encoded.
*
* This method will have no effect if the native `paramsSerializer()` Axios
* API function is used.
*
* {@link https://swagger.io/docs/specification/serialization/#query View examples}
*/
querySerializer?: QuerySerializer | QuerySerializerOptions;
/**
* A function validating request data. This is useful if you want to ensure
* the request conforms to the desired shape, so it can be safely sent to
* the server.
*/
requestValidator?: (data: unknown) => Promise<unknown>;
/**
* A function transforming response data before it's returned. This is useful
* for post-processing data, e.g., converting ISO strings into Date objects.
*/
responseTransformer?: (data: unknown) => Promise<unknown>;
/**
* A function validating response data. This is useful if you want to ensure
* the response conforms to the desired shape, so it can be safely passed to
* the transformers and returned to the user.
*/
responseValidator?: (data: unknown) => Promise<unknown>;
}
type IsExactlyNeverOrNeverUndefined<T> = [T] extends [never]
? true
: [T] extends [never | undefined]
? [undefined] extends [T]
? false
: true
: false;
export type OmitNever<T extends Record<string, unknown>> = {
[K in keyof T as IsExactlyNeverOrNeverUndefined<T[K]> extends true ? never : K]: T[K];
};

140
src/lib/api/core/utils.gen.ts Normal file
View File

@@ -0,0 +1,140 @@
// This file is auto-generated by @hey-api/openapi-ts
import type { BodySerializer, QuerySerializer } from './bodySerializer.gen';
import {
type ArraySeparatorStyle,
serializeArrayParam,
serializeObjectParam,
serializePrimitiveParam,
} from './pathSerializer.gen';
export interface PathSerializer {
path: Record<string, unknown>;
url: string;
}
export const PATH_PARAM_RE = /\{[^{}]+\}/g;
export const defaultPathSerializer = ({ path, url: _url }: PathSerializer) => {
let url = _url;
const matches = _url.match(PATH_PARAM_RE);
if (matches) {
for (const match of matches) {
let explode = false;
let name = match.substring(1, match.length - 1);
let style: ArraySeparatorStyle = 'simple';
if (name.endsWith('*')) {
explode = true;
name = name.substring(0, name.length - 1);
}
if (name.startsWith('.')) {
name = name.substring(1);
style = 'label';
} else if (name.startsWith(';')) {
name = name.substring(1);
style = 'matrix';
}
const value = path[name];
if (value === undefined || value === null) {
continue;
}
if (Array.isArray(value)) {
url = url.replace(match, serializeArrayParam({ explode, name, style, value }));
continue;
}
if (typeof value === 'object') {
url = url.replace(
match,
serializeObjectParam({
explode,
name,
style,
value: value as Record<string, unknown>,
valueOnly: true,
}),
);
continue;
}
if (style === 'matrix') {
url = url.replace(
match,
`;${serializePrimitiveParam({
name,
value: value as string,
})}`,
);
continue;
}
const replaceValue = encodeURIComponent(
style === 'label' ? `.${value as string}` : (value as string),
);
url = url.replace(match, replaceValue);
}
}
return url;
};
export const getUrl = ({
baseUrl,
path,
query,
querySerializer,
url: _url,
}: {
baseUrl?: string;
path?: Record<string, unknown>;
query?: Record<string, unknown>;
querySerializer: QuerySerializer;
url: string;
}) => {
const pathUrl = _url.startsWith('/') ? _url : `/${_url}`;
let url = (baseUrl ?? '') + pathUrl;
if (path) {
url = defaultPathSerializer({ path, url });
}
let search = query ? querySerializer(query) : '';
if (search.startsWith('?')) {
search = search.substring(1);
}
if (search) {
url += `?${search}`;
}
return url;
};
export function getValidRequestBody(options: {
body?: unknown;
bodySerializer?: BodySerializer | null;
serializedBody?: unknown;
}) {
const hasBody = options.body !== undefined;
const isSerializedBody = hasBody && options.bodySerializer;
if (isSerializedBody) {
if ('serializedBody' in options) {
const hasSerializedBody =
options.serializedBody !== undefined && options.serializedBody !== '';
return hasSerializedBody ? options.serializedBody : null;
}
// not all clients implement a serializedBody property (i.e., client-axios)
return options.body !== '' ? options.body : null;
}
// plain/text body
if (hasBody) {
return options.body;
}
// no body was provided
return undefined;
}

4
src/lib/api/index.ts Normal file
View File

@@ -0,0 +1,4 @@
// This file is auto-generated by @hey-api/openapi-ts
export { deleteEventDelete, getAgendaList, getAgendaMyList, getAgendaSchedule, getAuthRedirect, getEventAttendance, getEventCheckin, getEventCheckinQuery, getEventGuide, getEventInfo, getEventList, getEventStats, getStatsGlobal, getUserInfo, getUserInfoByUserId, getUserList, type Options, patchAgendaReview, patchAgendaSchedule, patchAgendaUpdate, patchEventUpdate, patchUserUpdate, patchUserUpdateByUserId, postAgendaSubmit, postAuthExchange, postAuthMagic, postAuthRefresh, postAuthToken, postEventCheckinSubmit, postEventCreate, postEventJoin, postKycQuery, postKycSession } from './sdk.gen';
export type { ClientOptions, DataAgenda, DataAgendaDoc, DataEventStatDoc, DataPermissionLevelCount, DeleteEventDeleteData, DeleteEventDeleteError, DeleteEventDeleteErrors, DeleteEventDeleteResponse, DeleteEventDeleteResponses, GetAgendaListData, GetAgendaListError, GetAgendaListErrors, GetAgendaListResponse, GetAgendaListResponses, GetAgendaMyListData, GetAgendaMyListError, GetAgendaMyListErrors, GetAgendaMyListResponse, GetAgendaMyListResponses, GetAgendaScheduleData, GetAgendaScheduleError, GetAgendaScheduleErrors, GetAgendaScheduleResponse, GetAgendaScheduleResponses, GetAuthRedirectData, GetAuthRedirectError, GetAuthRedirectErrors, GetEventAttendanceData, GetEventAttendanceError, GetEventAttendanceErrors, GetEventAttendanceResponse, GetEventAttendanceResponses, GetEventCheckinData, GetEventCheckinError, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryError, GetEventCheckinQueryErrors, GetEventCheckinQueryResponse, GetEventCheckinQueryResponses, GetEventCheckinResponse, GetEventCheckinResponses, GetEventGuideData, GetEventGuideError, GetEventGuideErrors, GetEventGuideResponse, GetEventGuideResponses, GetEventInfoData, GetEventInfoError, GetEventInfoErrors, GetEventInfoResponse, GetEventInfoResponses, GetEventListData, GetEventListError, GetEventListErrors, GetEventListResponse, GetEventListResponses, GetEventStatsData, GetEventStatsError, GetEventStatsErrors, GetEventStatsResponse, GetEventStatsResponses, GetStatsGlobalData, GetStatsGlobalError, GetStatsGlobalErrors, GetStatsGlobalResponse, GetStatsGlobalResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdError, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponse, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoError, GetUserInfoErrors, GetUserInfoResponse, GetUserInfoResponses, GetUserListData, GetUserListError, GetUserListErrors, GetUserListResponse, GetUserListResponses, PatchAgendaReviewData, PatchAgendaReviewError, PatchAgendaReviewErrors, PatchAgendaReviewResponse, PatchAgendaReviewResponses, PatchAgendaScheduleData, PatchAgendaScheduleError, PatchAgendaScheduleErrors, PatchAgendaScheduleResponse, PatchAgendaScheduleResponses, PatchAgendaUpdateData, PatchAgendaUpdateError, PatchAgendaUpdateErrors, PatchAgendaUpdateResponse, PatchAgendaUpdateResponses, PatchEventUpdateData, PatchEventUpdateError, PatchEventUpdateErrors, PatchEventUpdateResponse, PatchEventUpdateResponses, PatchUserUpdateByUserIdData, PatchUserUpdateByUserIdError, PatchUserUpdateByUserIdErrors, PatchUserUpdateByUserIdResponse, PatchUserUpdateByUserIdResponses, PatchUserUpdateData, PatchUserUpdateError, PatchUserUpdateErrors, PatchUserUpdateResponse, PatchUserUpdateResponses, PostAgendaSubmitData, PostAgendaSubmitError, PostAgendaSubmitErrors, PostAgendaSubmitResponse, PostAgendaSubmitResponses, PostAuthExchangeData, PostAuthExchangeError, PostAuthExchangeErrors, PostAuthExchangeResponse, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicError, PostAuthMagicErrors, PostAuthMagicResponse, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshError, PostAuthRefreshErrors, PostAuthRefreshResponse, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenError, PostAuthTokenErrors, PostAuthTokenResponse, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitError, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponse, PostEventCheckinSubmitResponses, PostEventCreateData, PostEventCreateError, PostEventCreateErrors, PostEventCreateResponse, PostEventCreateResponses, PostEventJoinData, PostEventJoinError, PostEventJoinErrors, PostEventJoinResponse, PostEventJoinResponses, PostKycQueryData, PostKycQueryError, PostKycQueryErrors, PostKycQueryResponse, PostKycQueryResponses, PostKycSessionData, PostKycSessionError, PostKycSessionErrors, PostKycSessionResponse, PostKycSessionResponses, ServiceAgendaAgendaListItem, ServiceAgendaAgendaReviewData, ServiceAgendaAgendaScheduleData, ServiceAgendaAgendaUpdateData, ServiceAgendaAgendaUserProfile, ServiceAgendaSubmitData, ServiceAgendaSubmitResponse, ServiceAuthExchangeData, ServiceAuthExchangeResponse, ServiceAuthMagicData, ServiceAuthMagicResponse, ServiceAuthRefreshData, ServiceAuthTokenData, ServiceAuthTokenResponse, ServiceEventAttendanceGuideResponse, ServiceEventAttendanceListResponse, ServiceEventCheckinQueryResponse, ServiceEventCheckinResponse, ServiceEventCheckinSubmitData, ServiceEventEventCreateData, ServiceEventEventCreateResponse, ServiceEventEventDeleteData, ServiceEventEventInfoResponse, ServiceEventEventJoinData, ServiceEventEventJoinResponse, ServiceEventEventListItems, ServiceEventEventListResponse, ServiceEventEventStatsResponse, ServiceEventEventUpdateData, ServiceKycKycQueryData, ServiceKycKycQueryResponse, ServiceKycKycSessionData, ServiceKycKycSessionResponse, ServiceStatsGlobalStatsResponse, ServiceUserUserInfoData, ServiceUserUserInfoUpdateData, ServiceUserUserListResponse, UtilsRespStatus } from './types.gen';

429
src/lib/api/sdk.gen.ts Normal file
View File

@@ -0,0 +1,429 @@
// This file is auto-generated by @hey-api/openapi-ts
import type { Client, Options as Options2, TDataShape } from './client';
import { client } from './client.gen';
import type { DeleteEventDeleteData, DeleteEventDeleteErrors, DeleteEventDeleteResponses, GetAgendaListData, GetAgendaListErrors, GetAgendaListResponses, GetAgendaMyListData, GetAgendaMyListErrors, GetAgendaMyListResponses, GetAgendaScheduleData, GetAgendaScheduleErrors, GetAgendaScheduleResponses, GetAuthRedirectData, GetAuthRedirectErrors, GetEventAttendanceData, GetEventAttendanceErrors, GetEventAttendanceResponses, GetEventCheckinData, GetEventCheckinErrors, GetEventCheckinQueryData, GetEventCheckinQueryErrors, GetEventCheckinQueryResponses, GetEventCheckinResponses, GetEventGuideData, GetEventGuideErrors, GetEventGuideResponses, GetEventInfoData, GetEventInfoErrors, GetEventInfoResponses, GetEventListData, GetEventListErrors, GetEventListResponses, GetEventStatsData, GetEventStatsErrors, GetEventStatsResponses, GetStatsGlobalData, GetStatsGlobalErrors, GetStatsGlobalResponses, GetUserInfoByUserIdData, GetUserInfoByUserIdErrors, GetUserInfoByUserIdResponses, GetUserInfoData, GetUserInfoErrors, GetUserInfoResponses, GetUserListData, GetUserListErrors, GetUserListResponses, PatchAgendaReviewData, PatchAgendaReviewErrors, PatchAgendaReviewResponses, PatchAgendaScheduleData, PatchAgendaScheduleErrors, PatchAgendaScheduleResponses, PatchAgendaUpdateData, PatchAgendaUpdateErrors, PatchAgendaUpdateResponses, PatchEventUpdateData, PatchEventUpdateErrors, PatchEventUpdateResponses, PatchUserUpdateByUserIdData, PatchUserUpdateByUserIdErrors, PatchUserUpdateByUserIdResponses, PatchUserUpdateData, PatchUserUpdateErrors, PatchUserUpdateResponses, PostAgendaSubmitData, PostAgendaSubmitErrors, PostAgendaSubmitResponses, PostAuthExchangeData, PostAuthExchangeErrors, PostAuthExchangeResponses, PostAuthMagicData, PostAuthMagicErrors, PostAuthMagicResponses, PostAuthRefreshData, PostAuthRefreshErrors, PostAuthRefreshResponses, PostAuthTokenData, PostAuthTokenErrors, PostAuthTokenResponses, PostEventCheckinSubmitData, PostEventCheckinSubmitErrors, PostEventCheckinSubmitResponses, PostEventCreateData, PostEventCreateErrors, PostEventCreateResponses, PostEventJoinData, PostEventJoinErrors, PostEventJoinResponses, PostKycQueryData, PostKycQueryErrors, PostKycQueryResponses, PostKycSessionData, PostKycSessionErrors, PostKycSessionResponses } from './types.gen';
export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean, TResponse = unknown> = Options2<TData, ThrowOnError, TResponse> & {
/**
* You can provide a client instance returned by `createClient()` instead of
* individual options. This might be also useful if you want to implement a
* custom client.
*/
client?: Client;
/**
* You can pass arbitrary values through the `meta` object. This can be
* used to access values that aren't defined as part of the SDK function.
*/
meta?: Record<string, unknown>;
};
/**
* List All Agendas
*
* Returns all agendas for the specified event, regardless of status. Manager only.
*/
export const getAgendaList = <ThrowOnError extends boolean = false>(options: Options<GetAgendaListData, ThrowOnError>) => (options.client ?? client).get<GetAgendaListResponses, GetAgendaListErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/agenda/list',
...options
});
/**
* My Agenda List
*
* Returns the calling user's agenda submissions for the specified event. User must be a joined attendee (Lv10+).
*/
export const getAgendaMyList = <ThrowOnError extends boolean = false>(options: Options<GetAgendaMyListData, ThrowOnError>) => (options.client ?? client).get<GetAgendaMyListResponses, GetAgendaMyListErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/agenda/my-list',
...options
});
/**
* Review Agenda
*
* Manager sets the status of an agenda to approved or rejected. Not allowed after agenda is published.
*/
export const patchAgendaReview = <ThrowOnError extends boolean = false>(options: Options<PatchAgendaReviewData, ThrowOnError>) => (options.client ?? client).patch<PatchAgendaReviewResponses, PatchAgendaReviewErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/agenda/review',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Get Agenda Schedule
*
* Returns all approved and scheduled agenda items, sorted by start_time ascending. Returns 403 if the agenda has not been published.
*/
export const getAgendaSchedule = <ThrowOnError extends boolean = false>(options: Options<GetAgendaScheduleData, ThrowOnError>) => (options.client ?? client).get<GetAgendaScheduleResponses, GetAgendaScheduleErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/agenda/schedule',
...options
});
/**
* Schedule Agenda
*
* Manager sets start_time and end_time on an approved agenda item. Available even after publish.
*/
export const patchAgendaSchedule = <ThrowOnError extends boolean = false>(options: Options<PatchAgendaScheduleData, ThrowOnError>) => (options.client ?? client).patch<PatchAgendaScheduleResponses, PatchAgendaScheduleErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/agenda/schedule',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Submit Agenda
*
* Creates a new agenda item for a specific attendance record.
*/
export const postAgendaSubmit = <ThrowOnError extends boolean = false>(options: Options<PostAgendaSubmitData, ThrowOnError>) => (options.client ?? client).post<PostAgendaSubmitResponses, PostAgendaSubmitErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/agenda/submit',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Update Agenda
*
* Submitter may edit their own pending agendas before the event deadline. Managers may edit any agenda with no restrictions.
*/
export const patchAgendaUpdate = <ThrowOnError extends boolean = false>(options: Options<PatchAgendaUpdateData, ThrowOnError>) => (options.client ?? client).patch<PatchAgendaUpdateResponses, PatchAgendaUpdateErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/agenda/update',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Exchange Auth Code
*
* Exchanges client credentials and user session for a specific redirect authorization code.
*/
export const postAuthExchange = <ThrowOnError extends boolean = false>(options: Options<PostAuthExchangeData, ThrowOnError>) => (options.client ?? client).post<PostAuthExchangeResponses, PostAuthExchangeErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/auth/exchange',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Request Magic Link
*
* Verifies Turnstile token and sends an authentication link via email. Returns the URI directly if debug mode is enabled.
*/
export const postAuthMagic = <ThrowOnError extends boolean = false>(options: Options<PostAuthMagicData, ThrowOnError>) => (options.client ?? client).post<PostAuthMagicResponses, PostAuthMagicErrors, ThrowOnError>({
url: '/auth/magic',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Handle Auth Callback and Redirect
*
* Verifies the temporary email code, ensures the user exists (or creates one), validates the client's redirect URI, and finally performs a 302 redirect with a new authorization code.
*/
export const getAuthRedirect = <ThrowOnError extends boolean = false>(options: Options<GetAuthRedirectData, ThrowOnError>) => (options.client ?? client).get<unknown, GetAuthRedirectErrors, ThrowOnError>({ url: '/auth/redirect', ...options });
/**
* Refresh Access Token
*
* Accepts a valid refresh token to issue a new access token and a rotated refresh token.
*/
export const postAuthRefresh = <ThrowOnError extends boolean = false>(options: Options<PostAuthRefreshData, ThrowOnError>) => (options.client ?? client).post<PostAuthRefreshResponses, PostAuthRefreshErrors, ThrowOnError>({
url: '/auth/refresh',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Exchange Code for Token
*
* Verifies the provided authorization code and issues a pair of JWT tokens (Access and Refresh).
*/
export const postAuthToken = <ThrowOnError extends boolean = false>(options: Options<PostAuthTokenData, ThrowOnError>) => (options.client ?? client).post<PostAuthTokenResponses, PostAuthTokenErrors, ThrowOnError>({
url: '/auth/token',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Get Attendance List
*
* Retrieves the paginated list of attendees with optional filters. Only accessible by the event owner (Manager). Supports name substring search and KYC status filtering.
*/
export const getEventAttendance = <ThrowOnError extends boolean = false>(options: Options<GetEventAttendanceData, ThrowOnError>) => (options.client ?? client).get<GetEventAttendanceResponses, GetEventAttendanceErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/attendance',
...options
});
/**
* Generate Check-in Code
*
* Creates a temporary check-in code for the authenticated user and event.
*/
export const getEventCheckin = <ThrowOnError extends boolean = false>(options: Options<GetEventCheckinData, ThrowOnError>) => (options.client ?? client).get<GetEventCheckinResponses, GetEventCheckinErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/checkin',
...options
});
/**
* Query Check-in Status
*
* Returns the timestamp of when the user checked in, or null if not yet checked in.
*/
export const getEventCheckinQuery = <ThrowOnError extends boolean = false>(options: Options<GetEventCheckinQueryData, ThrowOnError>) => (options.client ?? client).get<GetEventCheckinQueryResponses, GetEventCheckinQueryErrors, ThrowOnError>({ url: '/event/checkin/query', ...options });
/**
* Submit Check-in Code
*
* Submits the generated code to mark the user as attended.
*/
export const postEventCheckinSubmit = <ThrowOnError extends boolean = false>(options: Options<PostEventCheckinSubmitData, ThrowOnError>) => (options.client ?? client).post<PostEventCheckinSubmitResponses, PostEventCheckinSubmitErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/checkin/submit',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Create an Event
*
* Allows a Lv30+ user to create a new event. Users at exactly Lv30 may only create events with type 'party'. Sets type and enable_kyc, which are immutable after creation.
*/
export const postEventCreate = <ThrowOnError extends boolean = false>(options: Options<PostEventCreateData, ThrowOnError>) => (options.client ?? client).post<PostEventCreateResponses, PostEventCreateErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/create',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Delete an Event
*
* Permanently deletes an event. Requires Lv40+.
*/
export const deleteEventDelete = <ThrowOnError extends boolean = false>(options: Options<DeleteEventDeleteData, ThrowOnError>) => (options.client ?? client).delete<DeleteEventDeleteResponses, DeleteEventDeleteErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/delete',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Get Event Guide
*
* Fetching attendance guide of an event using its UUID.
*/
export const getEventGuide = <ThrowOnError extends boolean = false>(options: Options<GetEventGuideData, ThrowOnError>) => (options.client ?? client).get<GetEventGuideResponses, GetEventGuideErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/guide',
...options
});
/**
* Get Event Information
*
* Fetches the name, start time, and end time of an event using its UUID.
*/
export const getEventInfo = <ThrowOnError extends boolean = false>(options: Options<GetEventInfoData, ThrowOnError>) => (options.client ?? client).get<GetEventInfoResponses, GetEventInfoErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/info',
...options
});
/**
* Join an Event
*
* Allows an authenticated user to join an event by providing the event ID. The user's role and state are initialized by the service.
*/
export const postEventJoin = <ThrowOnError extends boolean = false>(options: Options<PostEventJoinData, ThrowOnError>) => (options.client ?? client).post<PostEventJoinResponses, PostEventJoinErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/join',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* List Events
*
* Returns a paginated list of events. Supports filtering by type and sorting. Lv30 users are automatically scoped to events they own.
*/
export const getEventList = <ThrowOnError extends boolean = false>(options: Options<GetEventListData, ThrowOnError>) => (options.client ?? client).get<GetEventListResponses, GetEventListErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/list',
...options
});
/**
* Get Event Statistics
*
* Returns join count, checkin count, KYC pass rate, and agenda submission count. Only accessible by the event owner (Manager).
*/
export const getEventStats = <ThrowOnError extends boolean = false>(options: Options<GetEventStatsData, ThrowOnError>) => (options.client ?? client).get<GetEventStatsResponses, GetEventStatsErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/stats',
...options
});
/**
* Update an Event
*
* Allows the event owner (Manager) to update name, subtitle, description, start_time, end_time, thumbnail, and is_agenda_published. Changes to type or enable_kyc are rejected. is_agenda_published is write-once: it can only be set to true (requires at least one agenda submission) and cannot be reverted.
*/
export const patchEventUpdate = <ThrowOnError extends boolean = false>(options: Options<PatchEventUpdateData, ThrowOnError>) => (options.client ?? client).patch<PatchEventUpdateResponses, PatchEventUpdateErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/event/update',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Query KYC Status
*
* Checks the current state of a KYC session and updates local database if approved.
*/
export const postKycQuery = <ThrowOnError extends boolean = false>(options: Options<PostKycQueryData, ThrowOnError>) => (options.client ?? client).post<PostKycQueryResponses, PostKycQueryErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/kyc/query',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Create KYC Session
*
* Initializes a KYC process (CNRid or Passport) and returns the status or redirect URI.
*/
export const postKycSession = <ThrowOnError extends boolean = false>(options: Options<PostKycSessionData, ThrowOnError>) => (options.client ?? client).post<PostKycSessionResponses, PostKycSessionErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/kyc/session',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Global Stats
*
* Returns total users, user counts per permission_level, and per-event join/checkin counts.
*/
export const getStatsGlobal = <ThrowOnError extends boolean = false>(options?: Options<GetStatsGlobalData, ThrowOnError>) => (options?.client ?? client).get<GetStatsGlobalResponses, GetStatsGlobalErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/stats/global',
...options
});
/**
* Get My User Information
*
* Fetches the complete profile data for the user associated with the provided session/token.
*/
export const getUserInfo = <ThrowOnError extends boolean = false>(options?: Options<GetUserInfoData, ThrowOnError>) => (options?.client ?? client).get<GetUserInfoResponses, GetUserInfoErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/user/info',
...options
});
/**
* Get Other User Information
*
* Fetches the complete profile data for the user associated with the provided session/token.
*/
export const getUserInfoByUserId = <ThrowOnError extends boolean = false>(options: Options<GetUserInfoByUserIdData, ThrowOnError>) => (options.client ?? client).get<GetUserInfoByUserIdResponses, GetUserInfoByUserIdErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/user/info/{user_id}',
...options
});
/**
* List Users (Admin)
*
* Returns a paginated list of users with permission_level included. Supports filtering by permission_level and sorting.
*/
export const getUserList = <ThrowOnError extends boolean = false>(options: Options<GetUserListData, ThrowOnError>) => (options.client ?? client).get<GetUserListResponses, GetUserListErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/user/list',
...options
});
/**
* Update User Information
*
* Updates specific profile fields such as username, nickname, subtitle, avatar (URL), and bio (Base64).
* Validation: Username (5-255 chars), Nickname (max 24 chars), Subtitle (max 32 chars).
*/
export const patchUserUpdate = <ThrowOnError extends boolean = false>(options: Options<PatchUserUpdateData, ThrowOnError>) => (options.client ?? client).patch<PatchUserUpdateResponses, PatchUserUpdateErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/user/update',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});
/**
* Admin Update User
*
* Lv40+ operators may update any user with a strictly lower permission_level. Editable fields: all profile fields plus permission_level (new value must be below operator's own level).
*/
export const patchUserUpdateByUserId = <ThrowOnError extends boolean = false>(options: Options<PatchUserUpdateByUserIdData, ThrowOnError>) => (options.client ?? client).patch<PatchUserUpdateByUserIdResponses, PatchUserUpdateByUserIdErrors, ThrowOnError>({
security: [{ name: 'Authorization', type: 'apiKey' }],
url: '/user/update/{user_id}',
...options,
headers: {
'Content-Type': 'application/json',
...options.headers
}
});

2121
src/lib/api/types.gen.ts Normal file
View File

File diff suppressed because it is too large Load Diff

679
src/lib/api/zod.gen.ts Normal file
View File

@@ -0,0 +1,679 @@
// This file is auto-generated by @hey-api/openapi-ts
import { z } from 'zod';
export const zDataAgenda = z.object({
agenda_id: z.string().optional(),
attendance_id: z.string().optional(),
description: z.string().optional(),
end_time: z.string().optional(),
id: z.number().int().optional(),
name: z.string().optional(),
start_time: z.string().optional(),
status: z.string().optional(),
uuid: z.string().optional()
});
export const zDataAgendaDoc = z.object({
agenda_id: z.string().optional(),
attendance_id: z.string().optional(),
description: z.string().optional(),
end_time: z.string().optional(),
name: z.string().optional(),
start_time: z.string().optional(),
status: z.string().optional()
});
export const zDataEventStatDoc = z.object({
checkin_count: z.number().int().optional(),
event_id: z.string().optional(),
join_count: z.number().int().optional(),
name: z.string().optional()
});
export const zDataPermissionLevelCount = z.object({
count: z.number().int().optional(),
permission_level: z.number().int().optional()
});
export const zServiceAgendaAgendaReviewData = z.object({
agenda_id: z.string(),
event_id: z.string(),
status: z.string()
});
export const zServiceAgendaAgendaScheduleData = z.object({
agenda_id: z.string(),
end_time: z.string(),
start_time: z.string()
});
export const zServiceAgendaAgendaUpdateData = z.object({
agenda_id: z.string(),
description: z.string().optional(),
name: z.string().optional()
});
export const zServiceAgendaAgendaUserProfile = z.object({
nickname: z.string().optional(),
user_id: z.string().optional(),
username: z.string().optional()
});
export const zServiceAgendaAgendaListItem = z.object({
agenda_id: z.string().optional(),
attendance_id: z.string().optional(),
description: z.string().optional(),
end_time: z.string().optional(),
name: z.string().optional(),
start_time: z.string().optional(),
status: z.string().optional(),
user_profile: zServiceAgendaAgendaUserProfile.optional()
});
export const zServiceAgendaSubmitData = z.object({
description: z.string(),
event_id: z.string(),
name: z.string()
});
export const zServiceAgendaSubmitResponse = z.object({
agenda_id: z.string().optional()
});
export const zServiceAuthExchangeData = z.object({
client_id: z.string(),
redirect_uri: z.string(),
state: z.string().optional()
});
export const zServiceAuthExchangeResponse = z.object({
redirect_uri: z.string()
});
export const zServiceAuthMagicData = z.object({
client_id: z.string(),
client_ip: z.string().optional(),
email: z.string(),
redirect_uri: z.string(),
state: z.string().optional(),
turnstile_token: z.string()
});
export const zServiceAuthMagicResponse = z.object({
uri: z.string()
});
export const zServiceAuthRefreshData = z.object({
refresh_token: z.string()
});
export const zServiceAuthTokenData = z.object({
code: z.string()
});
export const zServiceAuthTokenResponse = z.object({
access_token: z.string(),
refresh_token: z.string()
});
export const zServiceEventAttendanceGuideResponse = z.object({
attendance_guide: z.string()
});
export const zServiceEventCheckinQueryResponse = z.object({
checkin_at: z.string().optional()
});
export const zServiceEventCheckinResponse = z.object({
checkin_code: z.string()
});
export const zServiceEventCheckinSubmitData = z.object({
checkin_code: z.string()
});
export const zServiceEventEventCreateData = z.object({
attendance_guide: z.string().optional(),
description: z.string().optional(),
enable_kyc: z.boolean().optional(),
end_time: z.string().optional(),
limit: z.number().int().optional(),
name: z.string(),
quota: z.number().int().optional(),
start_time: z.string().optional(),
subtitle: z.string().optional(),
thumbnail: z.string().optional(),
type: z.string()
});
export const zServiceEventEventCreateResponse = z.object({
event_id: z.string()
});
export const zServiceEventEventDeleteData = z.object({
event_id: z.string()
});
export const zServiceEventEventInfoResponse = z.object({
checkin_count: z.number().int().optional(),
description: z.string().optional(),
enable_kyc: z.boolean(),
end_time: z.string(),
event_id: z.string(),
is_agenda_published: z.boolean().optional(),
is_checked_in: z.boolean().optional(),
is_joined: z.boolean().optional(),
join_count: z.number().int().optional(),
limit: z.number().int().optional(),
name: z.string(),
owner: z.string().optional(),
quota: z.number().int().optional(),
start_time: z.string(),
subtitle: z.string(),
thumbnail: z.string().optional(),
type: z.string()
});
export const zServiceEventEventJoinData = z.object({
event_id: z.string(),
kyc_id: z.string().optional()
});
export const zServiceEventEventJoinResponse = z.object({
attendance_id: z.string()
});
export const zServiceEventEventListItems = z.object({
checkin_count: z.number().int().optional(),
description: z.string().optional(),
enable_kyc: z.boolean(),
end_time: z.string(),
event_id: z.string(),
is_agenda_published: z.boolean().optional(),
is_checked_in: z.boolean().optional(),
is_joined: z.boolean().optional(),
join_count: z.number().int().optional(),
name: z.string(),
owner: z.string().optional(),
start_time: z.string(),
subtitle: z.string(),
thumbnail: z.string().optional(),
type: z.string()
});
export const zServiceEventEventListResponse = z.object({
items: z.array(zServiceEventEventListItems).optional(),
total: z.number().int().optional()
});
export const zServiceEventEventStatsResponse = z.object({
agenda_submission_count: z.number().int().optional(),
checkin_count: z.number().int().optional(),
join_count: z.number().int().optional(),
kyc_pass_rate: z.number().optional()
});
export const zServiceEventEventUpdateData = z.object({
attendance_guide: z.string().optional(),
description: z.string().optional(),
end_time: z.string().optional(),
event_id: z.string(),
is_agenda_published: z.boolean().optional(),
limit: z.number().int().optional(),
name: z.string().optional(),
quota: z.number().int().optional(),
start_time: z.string().optional(),
subtitle: z.string().optional(),
thumbnail: z.string().optional()
});
export const zServiceKycKycQueryData = z.object({
kyc_id: z.string()
});
export const zServiceKycKycQueryResponse = z.object({
status: z.string()
});
export const zServiceKycKycSessionData = z.object({
identity: z.string(),
type: z.string()
});
export const zServiceKycKycSessionResponse = z.object({
kyc_id: z.string().optional(),
redirect_uri: z.string().optional(),
status: z.string()
});
export const zServiceStatsGlobalStatsResponse = z.object({
event_join_checkin: z.array(zDataEventStatDoc).optional(),
total_users: z.number().int().optional(),
users_per_level: z.array(zDataPermissionLevelCount).optional()
});
export const zServiceUserUserInfoData = z.object({
allow_public: z.boolean(),
avatar: z.string().optional(),
bio: z.string().optional(),
email: z.string(),
nickname: z.string().optional(),
permission_level: z.number().int(),
subtitle: z.string().optional(),
user_id: z.string(),
username: z.string()
});
export const zServiceEventAttendanceListResponse = z.object({
attendance_id: z.string(),
checked_in_at: z.string().optional(),
joined_at: z.string().optional(),
kyc_info: z.unknown().optional(),
kyc_status: z.string().optional(),
kyc_type: z.string().optional(),
user_info: zServiceUserUserInfoData
});
export const zServiceUserUserInfoUpdateData = z.object({
allow_public: z.boolean().optional(),
avatar: z.string().optional(),
bio: z.string().optional(),
nickname: z.string().optional(),
permission_level: z.number().int().optional(),
subtitle: z.string().optional(),
user_id: z.string().optional(),
username: z.string().optional()
});
export const zServiceUserUserListResponse = z.object({
avatar: z.string().optional(),
email: z.string().optional(),
nickname: z.string().optional(),
permission_level: z.number().int().optional(),
subtitle: z.string().optional(),
user_id: z.string().optional(),
username: z.string().optional()
});
export const zUtilsRespStatus = z.object({
code: z.number().int(),
data: z.unknown(),
error_id: z.string(),
status: z.string()
});
export const zGetAgendaListQuery = z.object({
event_id: z.string()
});
/**
* OK
*/
export const zGetAgendaListResponse = zUtilsRespStatus.and(z.object({
data: z.array(zServiceAgendaAgendaListItem).optional()
}));
export const zGetAgendaMyListQuery = z.object({
event_id: z.string()
});
/**
* OK
*/
export const zGetAgendaMyListResponse = zUtilsRespStatus.and(z.object({
data: z.array(zDataAgenda).optional()
}));
/**
* Review Data
*/
export const zPatchAgendaReviewBody = zServiceAgendaAgendaReviewData;
/**
* OK
*/
export const zPatchAgendaReviewResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));
export const zGetAgendaScheduleQuery = z.object({
event_id: z.string()
});
/**
* OK
*/
export const zGetAgendaScheduleResponse = zUtilsRespStatus.and(z.object({
data: z.array(zDataAgendaDoc).optional()
}));
/**
* Schedule Data
*/
export const zPatchAgendaScheduleBody = zServiceAgendaAgendaScheduleData;
/**
* OK
*/
export const zPatchAgendaScheduleResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));
/**
* Agenda Submission Data
*/
export const zPostAgendaSubmitBody = zServiceAgendaSubmitData;
/**
* OK
*/
export const zPostAgendaSubmitResponse = zUtilsRespStatus.and(z.object({
data: zServiceAgendaSubmitResponse.optional()
}));
/**
* Agenda Update Data
*/
export const zPatchAgendaUpdateBody = zServiceAgendaAgendaUpdateData;
/**
* OK
*/
export const zPatchAgendaUpdateResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));
/**
* Exchange Request Credentials
*/
export const zPostAuthExchangeBody = zServiceAuthExchangeData;
/**
* Successful exchange
*/
export const zPostAuthExchangeResponse = zUtilsRespStatus.and(z.object({
data: zServiceAuthExchangeResponse.optional()
}));
/**
* Magic Link Request Data
*/
export const zPostAuthMagicBody = zServiceAuthMagicData;
/**
* Successful request
*/
export const zPostAuthMagicResponse = zUtilsRespStatus.and(z.object({
data: zServiceAuthMagicResponse.optional()
}));
export const zGetAuthRedirectQuery = z.object({
client_id: z.string(),
redirect_uri: z.string(),
code: z.string(),
state: z.string().optional()
});
/**
* Refresh Token Body
*/
export const zPostAuthRefreshBody = zServiceAuthRefreshData;
/**
* Successful rotation
*/
export const zPostAuthRefreshResponse = zUtilsRespStatus.and(z.object({
data: zServiceAuthTokenResponse.optional()
}));
/**
* Token Request Body
*/
export const zPostAuthTokenBody = zServiceAuthTokenData;
/**
* Successful token issuance
*/
export const zPostAuthTokenResponse = zUtilsRespStatus.and(z.object({
data: zServiceAuthTokenResponse.optional()
}));
export const zGetEventAttendanceQuery = z.object({
event_id: z.string(),
name: z.string().optional(),
kyc_status: z.string().optional(),
limit: z.number().int().optional(),
offset: z.number().int().optional(),
sort_by: z.string().optional(),
sort_order: z.string().optional()
});
/**
* Successful retrieval
*/
export const zGetEventAttendanceResponse = zUtilsRespStatus.and(z.object({
data: z.array(zServiceEventAttendanceListResponse).optional()
}));
export const zGetEventCheckinQuery = z.object({
event_id: z.string()
});
/**
* Successfully generated code
*/
export const zGetEventCheckinResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventCheckinResponse.optional()
}));
export const zGetEventCheckinQueryQuery = z.object({
event_id: z.string()
});
/**
* Current attendance status
*/
export const zGetEventCheckinQueryResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventCheckinQueryResponse.optional()
}));
/**
* Checkin Code Data
*/
export const zPostEventCheckinSubmitBody = zServiceEventCheckinSubmitData;
/**
* Attendance marked successfully
*/
export const zPostEventCheckinSubmitResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));
/**
* Event Creation Details
*/
export const zPostEventCreateBody = zServiceEventEventCreateData;
/**
* Successfully created the event
*/
export const zPostEventCreateResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventEventCreateResponse.optional()
}));
/**
* Event to delete
*/
export const zDeleteEventDeleteBody = zServiceEventEventDeleteData;
/**
* Successfully deleted
*/
export const zDeleteEventDeleteResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));
export const zGetEventGuideQuery = z.object({
event_id: z.string()
});
/**
* Successful retrieval
*/
export const zGetEventGuideResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventAttendanceGuideResponse.optional()
}));
export const zGetEventInfoQuery = z.object({
event_id: z.string()
});
/**
* Successful retrieval
*/
export const zGetEventInfoResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventEventInfoResponse.optional()
}));
/**
* Event Join Details (UserId and EventId are required)
*/
export const zPostEventJoinBody = zServiceEventEventJoinData;
/**
* Successfully joined the event
*/
export const zPostEventJoinResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventEventJoinResponse.optional()
}));
export const zGetEventListQuery = z.object({
limit: z.number().int().optional(),
offset: z.number().int(),
type: z.string().optional(),
sort_by: z.string().optional(),
sort_order: z.string().optional()
});
/**
* Successful paginated list retrieval
*/
export const zGetEventListResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventEventListResponse.optional()
}));
export const zGetEventStatsQuery = z.object({
event_id: z.string()
});
/**
* Statistics retrieved successfully
*/
export const zGetEventStatsResponse = zUtilsRespStatus.and(z.object({
data: zServiceEventEventStatsResponse.optional()
}));
/**
* Fields to update (all optional except event_id)
*/
export const zPatchEventUpdateBody = zServiceEventEventUpdateData;
/**
* Successfully updated
*/
export const zPatchEventUpdateResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));
/**
* KYC query data (KycId)
*/
export const zPostKycQueryBody = zServiceKycKycQueryData;
/**
* Query processed (success/pending/failed)
*/
export const zPostKycQueryResponse = zUtilsRespStatus.and(z.object({
data: zServiceKycKycQueryResponse.optional()
}));
/**
* KYC session data (Type and Base64 Identity)
*/
export const zPostKycSessionBody = zServiceKycKycSessionData;
/**
* Session created successfully
*/
export const zPostKycSessionResponse = zUtilsRespStatus.and(z.object({
data: zServiceKycKycSessionResponse.optional()
}));
/**
* OK
*/
export const zGetStatsGlobalResponse = zUtilsRespStatus.and(z.object({
data: zServiceStatsGlobalStatsResponse.optional()
}));
/**
* Successful profile retrieval
*/
export const zGetUserInfoResponse = zUtilsRespStatus.and(z.object({
data: zServiceUserUserInfoData.optional()
}));
export const zGetUserInfoByUserIdPath = z.object({
user_id: z.string()
});
/**
* Successful profile retrieval
*/
export const zGetUserInfoByUserIdResponse = zUtilsRespStatus.and(z.object({
data: zServiceUserUserInfoData.optional()
}));
export const zGetUserListQuery = z.object({
limit: z.string().optional(),
offset: z.string(),
sort_by: z.string().optional(),
sort_order: z.string().optional(),
permission_level: z.number().int().optional()
});
/**
* Successful paginated list retrieval
*/
export const zGetUserListResponse = zUtilsRespStatus.and(z.object({
data: z.array(zServiceUserUserListResponse).optional()
}));
/**
* Updated User Profile Data
*/
export const zPatchUserUpdateBody = zServiceUserUserInfoUpdateData;
/**
* Successful profile update
*/
export const zPatchUserUpdateResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));
/**
* Fields to update
*/
export const zPatchUserUpdateByUserIdBody = zServiceUserUserInfoUpdateData;
export const zPatchUserUpdateByUserIdPath = z.object({
user_id: z.string()
});
/**
* OK
*/
export const zPatchUserUpdateByUserIdResponse = zUtilsRespStatus.and(z.object({
data: z.record(z.unknown()).optional()
}));

1
src/lib/assets/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

118
src/lib/components/AgendaDialog.svelte Normal file
View File

@@ -0,0 +1,118 @@
<script lang="ts">
import { Dialog } from 'bits-ui';
import { base } from '$app/paths';
import { invalidateAll } from '$app/navigation';
import { superForm } from 'sveltekit-superforms';
import type { SuperValidated } from 'sveltekit-superforms';
import { untrack, type Snippet } from 'svelte';
import type { AgendaItemFormData } from '$lib/schemas/agenda';
import type { DataAgenda } from '$lib/api';
let {
mode,
eventId,
formData,
item,
children
}: {
mode: 'submit' | 'edit';
eventId: string;
formData: SuperValidated<AgendaItemFormData>;
item?: DataAgenda;
children: Snippet;
} = $props();
let open = $state(false);
const { form, errors, enhance, submitting, reset } = untrack(() =>
superForm(formData, {
dataType: 'form',
onResult: ({ result }) => {
if (result.type === 'success') {
open = false;
reset();
invalidateAll();
}
}
})
);
$effect(() => {
if (open && mode === 'edit' && item) {
$form.name = item.name ?? '';
$form.description = item.description ?? '';
} else if (!open) {
reset();
}
});
const title = $derived(mode === 'submit' ? '提交议程' : '编辑议程');
const actionUrl = $derived(
mode === 'submit'
? `${base}/events/${eventId}?/submitAgenda`
: `${base}/events/${eventId}?/editAgenda`
);
</script>
<Dialog.Root bind:open>
{@render children()}
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm" />
<Dialog.Content
class="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-[--radius-box] bg-base-100 p-6 shadow-2xl"
>
<Dialog.Title class="mb-4 font-sans text-base font-semibold">{title}</Dialog.Title>
<form method="POST" action={actionUrl} use:enhance class="flex flex-col gap-4">
{#if $errors._errors?.[0]}
<div role="alert" class="alert alert-soft text-sm alert-error">{$errors._errors[0]}</div>
{/if}
{#if mode === 'edit' && item}
<input type="hidden" name="agenda_id" value={item.agenda_id} />
{/if}
<div class="flex flex-col gap-1">
<label for="agenda-name" class="text-sm font-medium">名称</label>
<label class="input w-full {$errors.name ? 'input-error' : ''}">
<input
id="agenda-name"
name="name"
type="text"
placeholder="议程标题"
maxlength="255"
bind:value={$form.name}
/>
</label>
{#if $errors.name}
<p class="text-xs text-error">{$errors.name}</p>
{/if}
</div>
<div class="flex flex-col gap-1">
<label for="agenda-description" class="text-sm font-medium">描述</label>
<textarea
id="agenda-description"
name="description"
class="textarea w-full {$errors.description ? 'textarea-error' : ''}"
placeholder="简短描述"
rows="4"
bind:value={$form.description}
></textarea>
{#if $errors.description}
<p class="text-xs text-error">{$errors.description}</p>
{/if}
</div>
<div class="mt-2 flex justify-end gap-2">
<Dialog.Close type="button" class="btn btn-ghost">取消</Dialog.Close>
<button type="submit" class="btn btn-primary" disabled={$submitting}>
{#if $submitting}<span class="loading loading-sm loading-spinner"></span>{/if}
{mode === 'submit' ? '提交' : '保存'}
</button>
</div>
</form>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>

90
src/lib/components/AgendaMyList.svelte Normal file
View File

@@ -0,0 +1,90 @@
<script lang="ts">
import dayjs from 'dayjs';
import { Dialog } from 'bits-ui';
import type { SuperValidated } from 'sveltekit-superforms';
import type { DataAgenda } from '$lib/api';
import type { AgendaItemFormData } from '$lib/schemas/agenda';
import AgendaDialog from './AgendaDialog.svelte';
let {
myAgendas,
eventId,
canSubmit,
formData
}: {
myAgendas: DataAgenda[];
eventId: string;
canSubmit: boolean;
formData: SuperValidated<AgendaItemFormData>;
} = $props();
function badgeClass(status: string | undefined): string {
switch (status) {
case 'approved':
return 'badge-success';
case 'rejected':
return 'badge-error';
default:
return 'badge-warning';
}
}
function badgeLabel(status: string | undefined): string {
switch (status) {
case 'approved':
return '已通过';
case 'rejected':
return '已拒绝';
default:
return '待审核';
}
}
</script>
<div class="card mt-4 bg-base-300">
<div class="card-body gap-3">
<!-- Header row -->
<div class="flex items-center justify-between">
<p class="font-mono text-[0.6rem] tracking-[0.15em] uppercase opacity-35">我的议程</p>
{#if canSubmit}
<AgendaDialog mode="submit" {eventId} {formData}>
<Dialog.Trigger type="button" class="btn btn-ghost btn-sm">+ 提交</Dialog.Trigger>
</AgendaDialog>
{/if}
</div>
{#if myAgendas.length === 0}
<p class="text-center text-sm text-base-content/40">暂无议程提交</p>
{:else}
<div class="divide-y divide-base-300">
{#each myAgendas as agenda (agenda.agenda_id)}
<!-- One wrapper div per item so divide-y only draws between items -->
<div class="py-2">
<div class="flex items-center gap-2">
<!-- Name -->
<p class="min-w-0 flex-1 truncate text-sm">{agenda.name}</p>
<!-- Badge -->
<span class="badge badge-soft badge-sm {badgeClass(agenda.status)}"
>{badgeLabel(agenda.status)}</span
>
<!-- Edit button (pending only, while submission is open) -->
{#if agenda.status === 'pending' && canSubmit}
<AgendaDialog mode="edit" {eventId} {formData} item={agenda}>
<Dialog.Trigger type="button" class="btn btn-ghost btn-xs">编辑</Dialog.Trigger>
</AgendaDialog>
{/if}
</div>
<!-- Time range — only for approved + scheduled (start_time set) -->
{#if agenda.status === 'approved' && agenda.start_time}
<p class="mt-0.5 font-mono text-xs text-base-content/40">
{dayjs(agenda.start_time).format('MM-DD HH:mm')} – {dayjs(agenda.end_time).format(
'HH:mm'
)}
</p>
{/if}
</div>
{/each}
</div>
{/if}
</div>
</div>

38
src/lib/components/AgendaSchedule.svelte Normal file
View File

@@ -0,0 +1,38 @@
<script lang="ts">
import dayjs from 'dayjs';
import type { DataAgendaDoc } from '$lib/api';
const { items }: { items: Array<DataAgendaDoc & { descriptionHtml: string | null }> } = $props();
</script>
<div class="card bg-base-300">
<div class="card-body">
<h2 class="card-title font-sans text-base">活动议程</h2>
<div class="divide-y divide-base-300">
{#each items as item (item.agenda_id)}
<div class="flex gap-4 py-3">
<!-- Time column -->
<div class="w-16 shrink-0 text-right">
<div class="font-mono text-xs text-primary">
{dayjs(item.start_time).format('HH:mm')}
</div>
<div class="font-mono text-xs text-base-content/40">
– {dayjs(item.end_time).format('HH:mm')}
</div>
</div>
<!-- Content column -->
<div class="min-w-0 flex-1">
<div class="font-sans text-sm font-medium">{item.name}</div>
{#if item.descriptionHtml}
<!-- eslint-disable svelte/no-at-html-tags -->
<div class="prose prose-sm mt-1 max-w-none dark:prose-invert">
{@html item.descriptionHtml}
</div>
<!-- eslint-enable svelte/no-at-html-tags -->
{/if}
</div>
</div>
{/each}
</div>
</div>
</div>

130
src/lib/components/CheckinQrDialog.svelte Normal file
View File

@@ -0,0 +1,130 @@
<script lang="ts">
import { Dialog } from 'bits-ui';
import { base } from '$app/paths';
import { invalidateAll } from '$app/navigation';
import QRCode from 'qrcode';
let { eventId, children }: { eventId: string; children: import('svelte').Snippet } = $props();
let open = $state(false);
type Phase = 'loading' | 'ready' | 'success' | 'error';
let phase: Phase = $state('loading');
let checkinCode = $state('');
let qrDataUrl = $state('');
let errorMsg = $state('');
let pollTimer: ReturnType<typeof setInterval> | null = null;
let closeTimer: ReturnType<typeof setTimeout> | null = null;
// Non-reactive sentinel: set to true once check-in succeeds so that any
// spurious $effect re-fires (e.g. from invalidateAll() touching the page
// signal graph) cannot restart the flow and clobber the success state.
let checkinDone = false;
async function fetchCode() {
if (checkinDone) return; // guard: don't restart after success (non-reactive, no new dep)
stopPolling(); // clear any stale interval from a previous open/retry
phase = 'loading';
errorMsg = '';
try {
const res = await fetch(`${base}/checkin-code?event_id=${encodeURIComponent(eventId)}`);
if (!res.ok) throw new Error('获取签到码失败，请稍后重试');
const data: { checkin_code: string } = await res.json();
checkinCode = data.checkin_code;
qrDataUrl = await QRCode.toDataURL(checkinCode, { width: 200, margin: 1 });
phase = 'ready';
startPolling();
} catch (e) {
errorMsg = e instanceof Error ? e.message : '获取签到码失败，请稍后重试';
phase = 'error';
}
}
function startPolling() {
pollTimer = setInterval(async () => {
try {
const res = await fetch(
`${base}/checkin-code/query?event_id=${encodeURIComponent(eventId)}`
);
if (!res.ok) return;
const data: { checkin_at: string | null } = await res.json();
if (data.checkin_at) {
stopPolling();
checkinDone = true;
phase = 'success';
await invalidateAll();
closeTimer = setTimeout(() => {
open = false;
}, 1500);
}
} catch {
// Poll failure is non-fatal — keep trying
}
}, 3000);
}
function stopPolling() {
if (pollTimer) clearInterval(pollTimer);
pollTimer = null;
if (closeTimer) clearTimeout(closeTimer);
closeTimer = null;
}
$effect(() => {
if (open) {
fetchCode();
} else {
// Reset checkinDone when the dialog is closed so a re-open works.
checkinDone = false;
stopPolling();
}
return () => stopPolling();
});
</script>
<Dialog.Root bind:open>
{@render children()}
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-base-content/20 backdrop-blur-sm" />
<Dialog.Content
class="fixed top-1/2 left-1/2 z-50 w-full max-w-xs -translate-x-1/2 -translate-y-1/2 rounded-box bg-base-100 p-6 shadow-xl"
>
<Dialog.Title class="mb-4 font-sans text-base font-medium">签到</Dialog.Title>
{#if phase === 'loading'}
<div class="flex flex-col items-center gap-4 py-8">
<span class="loading loading-md loading-spinner text-base-content/40"></span>
<p class="text-sm text-base-content/40">正在获取签到码…</p>
</div>
{:else if phase === 'ready'}
<div class="flex flex-col items-center gap-4">
<img src={qrDataUrl} alt="checkin-qr" class="rounded" width="200" height="200" />
<p class="font-mono text-2xl tracking-[0.2em] text-base-content">{checkinCode}</p>
<p class="text-center text-xs text-base-content/40">请将二维码出示给工作人员扫描</p>
<div class="flex items-center gap-2">
<span class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-base-content/20"
></span>
<span class="text-xs text-base-content/30">等待签到确认…</span>
</div>
</div>
{:else if phase === 'success'}
<div class="flex flex-col items-center gap-4 py-8">
<div
class="flex h-16 w-16 items-center justify-center rounded-full border border-base-300 bg-base-200"
>
<span class="text-2xl text-base-content/60">✓</span>
</div>
<p class="font-sans text-base text-base-content/80">签到成功</p>
</div>
{:else if phase === 'error'}
<div class="flex flex-col items-center gap-4 py-8">
<p class="text-center text-sm text-base-content/60">{errorMsg}</p>
<button class="btn btn-ghost btn-sm" onclick={fetchCode}>重试</button>
</div>
{/if}
{#if phase !== 'success'}
<Dialog.Close class="btn mt-4 w-full btn-ghost btn-sm">关闭</Dialog.Close>
{/if}
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>

82
src/lib/components/CheckinScanner.svelte Normal file
View File

@@ -0,0 +1,82 @@
<script lang="ts">
import { browser } from '$app/environment';
import { onMount, onDestroy } from 'svelte';
import { SvelteMap } from 'svelte/reactivity';
let { onScan }: { onScan: (code: string) => void } = $props();
let videoEl: HTMLVideoElement | undefined = $state();
let error = $state('');
let releaseStreams: (() => void) | null = null;
// onDestroy must be called synchronously at top level in Svelte 5
onDestroy(() => {
releaseStreams?.();
});
onMount(async () => {
if (!browser) return;
try {
const { BrowserMultiFormatReader } = await import('@zxing/browser');
const reader = new BrowserMultiFormatReader();
const devices = await BrowserMultiFormatReader.listVideoInputDevices();
if (devices.length === 0) {
error = '未检测到摄像头';
return;
}
// Prefer rear-facing camera on mobile
const rear =
devices.find((d) => /back|rear|environment/i.test(d.label)) ?? devices[devices.length - 1];
if (!videoEl) return;
const recentCodes = new SvelteMap<string, number>();
const COOLDOWN_MS = 10_000;
await reader.decodeFromVideoDevice(rear.deviceId ?? null, videoEl, (result, err) => {
if (result) {
const text = result.getText().trim();
if (!/^\d{6}$/.test(text)) return;
const now = Date.now();
for (const [k, t] of Array.from(recentCodes))
if (now - t > COOLDOWN_MS) recentCodes.delete(k);
if (recentCodes.has(text)) return;
recentCodes.set(text, now);
onScan(text);
}
// err is thrown continuously while no QR in frame — ignore
void err;
});
releaseStreams = () => BrowserMultiFormatReader.releaseAllStreams();
} catch (e) {
error = e instanceof Error ? e.message : '摄像头初始化失败';
}
});
</script>
{#if error}
<div class="alert alert-soft alert-error">
<span>{error}</span>
</div>
{:else}
<div class="relative w-full overflow-hidden rounded-box bg-base-300" style="aspect-ratio: 1;">
<!-- Corner brackets as viewfinder guides -->
<div class="pointer-events-none absolute inset-0 z-10">
<div
class="absolute top-4 left-4 h-6 w-6 rounded-tl border-t-2 border-l-2 border-base-content/40"
></div>
<div
class="absolute top-4 right-4 h-6 w-6 rounded-tr border-t-2 border-r-2 border-base-content/40"
></div>
<div
class="absolute bottom-4 left-4 h-6 w-6 rounded-bl border-b-2 border-l-2 border-base-content/40"
></div>
<div
class="absolute right-4 bottom-4 h-6 w-6 rounded-br border-r-2 border-b-2 border-base-content/40"
></div>
</div>
<video bind:this={videoEl} class="h-full w-full object-cover" playsinline autoplay muted
></video>
</div>
{/if}

119
src/lib/components/EventCard.svelte Normal file
View File

@@ -0,0 +1,119 @@
<script lang="ts">
import { resolve } from '$app/paths';
import dayjs from 'dayjs';
import { ShieldCheck, Ticket } from '@lucide/svelte';
import { Dialog } from 'bits-ui';
import { untrack } from 'svelte';
import type { ServiceEventEventListItems } from '$lib/api';
import { createKycState } from '$lib/stores/kyc.svelte';
import CheckinQrDialog from './CheckinQrDialog.svelte';
import JoinDialog from './JoinDialog.svelte';
import KycDialog from './KycDialog.svelte';
const { event }: { event: ServiceEventEventListItems } = $props();
const kyc = untrack(() => createKycState(event.event_id));
let joinOpen = $state(false);
const startDate = $derived(dayjs(event.start_time).format('YYYY.MM.DD'));
const endDate = $derived(dayjs(event.end_time).format('YYYY.MM.DD'));
const now = new Date();
const isOngoing = $derived(new Date(event.start_time) <= now && now <= new Date(event.end_time));
// Determine action zone state
const actionState = $derived(
!event.is_joined ? 'join' : event.is_checked_in ? 'checked-in' : 'joined'
);
</script>
<div class="card flex flex-col overflow-hidden bg-base-300">
<!-- Zone 1: Cover image with gradient overlay -->
<div class="relative aspect-video overflow-hidden">
{#if event.thumbnail}
<img src={event.thumbnail} alt={event.name} class="h-full w-full object-cover" />
{:else}
<div class="h-full w-full bg-gradient-to-br from-primary/20 via-base-300 to-base-200"></div>
{/if}
<!-- Gradient overlay (bottom-heavy) -->
<div
class="absolute inset-0"
style="background: linear-gradient(to top, oklch(25.33% 0.016 252.42 / 0.96) 0%, oklch(25.33% 0.016 252.42 / 0.3) 55%, transparent 100%)"
></div>
<!-- Type badge (top-right) -->
<span
class="absolute top-2.5 right-2.5 badge badge-soft uppercase
{event.type === 'party' ? 'badge-error' : 'badge-secondary'}"
>
{event.type === 'party' ? 'Party' : 'Official'}
</span>
<!-- Event name + date range overlaid at bottom -->
<div class="absolute right-0 bottom-0 left-0 p-3">
<p
class="line-clamp-2 font-sans text-[0.9375rem] leading-snug font-semibold tracking-tight text-white"
>
{event.name}
</p>
<p class="mt-0.5 font-mono text-[0.575rem] tracking-widest text-white/55">
{startDate} – {endDate}
</p>
</div>
</div>
<!-- Zone 2: Body (subtitle + status badges) -->
<div class="flex flex-1 flex-col gap-2 p-3">
{#if event.subtitle}
<p class="line-clamp-2 text-[0.75rem] text-base-content/50">{event.subtitle}</p>
{/if}
<div class="mt-auto flex flex-wrap gap-1.5">
{#if event.enable_kyc}
<span class="badge badge-soft badge-sm badge-warning">
<ShieldCheck class="size-2.5" />需要 KYC
</span>
{/if}
{#if event.is_joined}
<span class="badge badge-soft badge-sm badge-success">
<Ticket class="size-2.5" />已报名
</span>
{/if}
{#if isOngoing}
<span class="badge badge-soft badge-sm badge-primary">进行中</span>
{/if}
</div>
</div>
<!-- Zone 3: Action zone (dashed divider + buttons) -->
<div class="flex gap-2 border-t border-dashed border-base-300/90 p-3">
{#if actionState === 'join'}
<button
type="button"
class="btn flex-1 btn-sm btn-primary"
onclick={() => {
if (event.enable_kyc) kyc.setOpen(true);
else joinOpen = true;
}}
>
加入活动
</button>
{:else if actionState === 'checked-in'}
<button class="btn flex-1 btn-sm" disabled>已签到</button>
{:else if isOngoing}
<CheckinQrDialog eventId={event.event_id}>
<Dialog.Trigger type="button" class="btn flex-1 btn-sm btn-primary">签到</Dialog.Trigger>
</CheckinQrDialog>
{:else}
<button class="btn flex-1 btn-sm" disabled>未到签到时间</button>
{/if}
<a href={resolve(`/events/${event.event_id}` as '/')} class="btn flex-1 btn-ghost btn-sm"
>活动详情</a
>
</div>
</div>
<!-- Join dialogs — scoped per EventCard so list-page joins are isolated -->
<JoinDialog {event} open={joinOpen} onClose={() => (joinOpen = false)} />
<KycDialog {kyc} eventId={event.event_id} />

224
src/lib/components/EventForm.svelte Normal file
View File

@@ -0,0 +1,224 @@
<script lang="ts">
import { untrack } from 'svelte';
import { superForm } from 'sveltekit-superforms';
import { Dialog } from 'bits-ui';
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import MarkdownEditor from './MarkdownEditor.svelte';
import type { SuperValidated } from 'sveltekit-superforms';
import type { EventFormData } from '$lib/schemas/events';
let {
form: formData,
action,
isEdit = false,
userLevel = 30
}: {
form: SuperValidated<EventFormData>;
/** SvelteKit form action — e.g. '?/create' or '?/update' */
action: string;
isEdit?: boolean;
userLevel?: number;
} = $props();
let saved = $state(false);
// Navigate after the toast has been visible for 1.5 s.
// Using $effect keeps goto() out of the superforms callback, avoiding the
// svelte/no-navigation-without-resolve lint rule (which doesn't apply here
// but fires as a false-positive on goto calls inside form callbacks).
$effect(() => {
if (!saved) return;
// eslint-disable-next-line svelte/no-navigation-without-resolve
const timer = setTimeout(() => void goto(`${base}/admin/events`), 1500);
return () => clearTimeout(timer);
});
const { form, errors, enhance, submitting } = untrack(() =>
superForm(formData, {
dataType: 'form',
resetForm: false,
onUpdated: ({ form: f }) => {
if (isEdit && f.valid) saved = true;
}
})
);
// Separate $state for markdown fields so MarkdownEditor can bind:value.
// The textarea inside MarkdownEditor carries name="description"/name="attendanceGuide"
// so FormData on submit always reflects the current text — no hidden input needed.
let description = $state($form.description ?? '');
let attendanceGuide = $state($form.attendanceGuide ?? '');
let deleteOpen = $state(false);
</script>
<form method="POST" {action} use:enhance class="flex flex-col gap-4">
{#if $errors._errors?.[0]}
<div class="alert alert-soft alert-error">
<span>{$errors._errors[0]}</span>
</div>
{/if}
<!-- 基本信息 -->
<fieldset class="fieldset rounded-box border border-base-300/40 bg-base-100 p-4">
<legend class="fieldset-legend">基本信息</legend>
<label class="form-control w-full">
<div class="label"><span class="label-text">活动名称 *</span></div>
<input
name="name"
class="input-bordered input w-full {$errors.name ? 'input-error' : ''}"
bind:value={$form.name}
placeholder="活动名称"
/>
{#if $errors.name}<span class="fieldset-label text-error">{$errors.name[0]}</span>{/if}
</label>
<label class="form-control w-full">
<div class="label"><span class="label-text">副标题 *</span></div>
<input
name="subtitle"
class="input-bordered input w-full {$errors.subtitle ? 'input-error' : ''}"
bind:value={$form.subtitle}
placeholder="副标题"
/>
{#if $errors.subtitle}<span class="fieldset-label text-error">{$errors.subtitle[0]}</span
>{/if}
</label>
<div class="grid grid-cols-2 gap-4">
<label class="form-control w-full">
<div class="label"><span class="label-text">开始时间 *</span></div>
<input
type="datetime-local"
name="start_time"
class="input-bordered input w-full {$errors.start_time ? 'input-error' : ''}"
bind:value={$form.start_time as string}
/>
{#if $errors.start_time}<span class="fieldset-label text-error"
>{$errors.start_time[0]}</span
>{/if}
</label>
<label class="form-control w-full">
<div class="label"><span class="label-text">结束时间 *</span></div>
<input
type="datetime-local"
name="end_time"
class="input-bordered input w-full {$errors.end_time ? 'input-error' : ''}"
bind:value={$form.end_time as string}
/>
{#if $errors.end_time}<span class="fieldset-label text-error">{$errors.end_time[0]}</span
>{/if}
</label>
</div>
<div class="grid grid-cols-2 gap-4">
<label class="form-control w-full">
<div class="label"><span class="label-text">名额上限（留空为不限）</span></div>
<input
type="number"
name="quota"
class="input-bordered input w-full"
bind:value={$form.quota}
min="1"
placeholder="不限"
/>
</label>
<label class="form-control w-full">
<div class="label"><span class="label-text">类型</span></div>
<select
name="type"
class="select-bordered select w-full"
bind:value={$form.type}
disabled={userLevel < 40}
>
<option value="party">Party</option>
<option value="official">Official</option>
</select>
{#if userLevel < 40}
<span class="fieldset-label opacity-50">仅 Lv40 管理员可修改</span>
{/if}
</label>
</div>
</fieldset>
<!-- 设置 -->
<fieldset class="fieldset rounded-box border border-base-300/40 bg-base-100 p-4">
<legend class="fieldset-legend">设置</legend>
<label class="form-control w-full">
<div class="label"><span class="label-text">封面图 URL</span></div>
<input
name="thumbnail"
class="input-bordered input w-full {$errors.thumbnail ? 'input-error' : ''}"
bind:value={$form.thumbnail}
placeholder="https://..."
/>
{#if $errors.thumbnail}<span class="fieldset-label text-error">{$errors.thumbnail[0]}</span
>{/if}
</label>
<div class="mt-3 flex gap-6">
<label class="flex cursor-pointer items-center gap-2">
<input type="checkbox" name="enable_kyc" class="checkbox" bind:checked={$form.enable_kyc} />
<span class="label-text">启用 KYC</span>
</label>
<label class="flex cursor-pointer items-center gap-2">
<input
type="checkbox"
name="is_agenda_published"
class="checkbox"
bind:checked={$form.is_agenda_published}
/>
<span class="label-text">发布议程</span>
</label>
</div>
</fieldset>
<!-- 内容 -->
<fieldset class="fieldset rounded-box border border-base-300/40 bg-base-100 p-4">
<legend class="fieldset-legend">内容</legend>
<div class="form-control w-full">
<div class="label"><span class="label-text">活动描述</span></div>
<MarkdownEditor name="description" bind:value={description} />
</div>
<div class="form-control mt-4 w-full">
<div class="label"><span class="label-text">参会指南（仅已报名用户可见）</span></div>
<MarkdownEditor name="attendanceGuide" bind:value={attendanceGuide} />
</div>
</fieldset>
<!-- Actions -->
<div class="flex items-center gap-3 pt-2">
<button type="submit" class="btn flex-1 btn-primary" disabled={$submitting}>
{#if $submitting}<span class="loading loading-sm loading-spinner"></span>{/if}
保存
</button>
{#if isEdit}
<Dialog.Root bind:open={deleteOpen}>
<Dialog.Trigger type="button" class="btn btn-outline btn-error">删除活动</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/50" />
<Dialog.Content class="modal-open modal">
<div class="modal-box">
<Dialog.Title class="text-lg font-bold">确认删除？</Dialog.Title>
<p class="py-4">此操作不可撤销，活动数据将永久删除。</p>
<div class="modal-action">
<Dialog.Close class="btn btn-ghost">取消</Dialog.Close>
<form method="POST" action="?/delete">
<button type="submit" class="btn btn-error">确认删除</button>
</form>
</div>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
{/if}
</div>
</form>
{#if saved}
<div class="toast toast-end toast-top z-50">
<div class="alert alert-success">
<span>保存成功</span>
</div>
</div>
{/if}

78
src/lib/components/JoinDialog.svelte Normal file
View File

@@ -0,0 +1,78 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { base } from '$app/paths';
import { Dialog } from 'bits-ui';
const {
event,
open,
onClose
}: {
event: { event_id: string; name: string };
open: boolean;
onClose: () => void;
} = $props();
let submitting = $state(false);
let errorMsg = $state<string | null>(null);
</script>
<Dialog.Root
{open}
onOpenChange={(v) => {
if (!v && !submitting) onClose();
}}
>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm" />
<Dialog.Content
class="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-[--radius-box] bg-base-100 p-6 shadow-2xl"
>
<Dialog.Title class="mb-1 font-sans text-lg font-semibold tracking-tight">
加入活动
</Dialog.Title>
<Dialog.Description class="mb-4 text-sm text-base-content/60">
是否确认要加入活动 <span class="font-semibold text-base-content">{event.name}</span>？
</Dialog.Description>
{#if errorMsg}
<div role="alert" class="mb-4 alert alert-soft text-sm alert-error">
{errorMsg}
</div>
{/if}
<form
method="POST"
action="{base}/events/{event.event_id}?/join"
use:enhance={() => {
submitting = true;
errorMsg = null;
return async ({ result, update }) => {
submitting = false;
if (result.type === 'failure') {
const data = result.data as { message?: string } | undefined;
errorMsg = data?.message ?? '加入失败，请重试';
} else {
await update(); // calls invalidateAll, re-runs load
onClose();
}
};
}}
>
<input type="hidden" name="event_id" value={event.event_id} />
<div class="mt-6 flex justify-end gap-2">
<button type="button" class="btn btn-ghost" onclick={onClose} disabled={submitting}>
取消
</button>
<button type="submit" class="btn btn-primary" disabled={submitting}>
{#if submitting}
<span class="loading loading-sm loading-spinner"></span>
{:else}
加入
{/if}
</button>
</div>
</form>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>

255
src/lib/components/KycDialog.svelte Normal file
View File

@@ -0,0 +1,255 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { invalidateAll } from '$app/navigation';
import { base } from '$app/paths';
import { Dialog } from 'bits-ui';
import { BookOpen, Check, CreditCard, X } from '@lucide/svelte';
import { cnridSchema, passportSchema } from '$lib/schemas/kyc';
import type { createKycState } from '$lib/stores/kyc.svelte.js';
const {
kyc,
eventId
}: {
kyc: ReturnType<typeof createKycState>;
eventId: string;
} = $props();
// methodSelection local state — reset when dialog closes via setOpen.
let selectedMethod = $state<'cnrid' | 'passport' | null>(null);
let cnridName = $state('');
let cnridId = $state('');
let passportId = $state('');
let formError = $state<string | null>(null);
let submitting = $state(false);
const isValid = $derived(
selectedMethod === 'cnrid'
? cnridSchema.safeParse({ method: 'cnrid', name: cnridName, cnrid: cnridId }).success
: selectedMethod === 'passport'
? passportSchema.safeParse({ method: 'passport', passportId }).success
: false
);
// Reset method form when the dialog re-opens at prompt stage.
$effect(() => {
if (kyc.stage === 'prompt') {
selectedMethod = null;
cnridName = '';
cnridId = '';
passportId = '';
formError = null;
submitting = false;
}
});
</script>
<Dialog.Root open={kyc.open} onOpenChange={(v) => kyc.setOpen(v)}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm" />
<Dialog.Content
class="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-[--radius-box] bg-base-100 p-6 shadow-2xl"
>
<!-- ─── PROMPT stage ─────────────────────────────────────────── -->
{#if kyc.stage === 'prompt'}
<Dialog.Title class="mb-4 font-sans text-lg font-semibold tracking-tight">
需要身份认证
</Dialog.Title>
<div class="mb-6 space-y-3 text-sm text-base-content/70">
<p>加入本次活动需要完成身份认证。您的身份信息将受到严格保护：</p>
<ul class="list-inside list-disc space-y-1.5 pl-1">
<li>AES-256 加密存储</li>
<li>仅用于本次活动身份核验</li>
<li>30 天内自动销毁</li>
</ul>
</div>
<div class="flex justify-end">
<button
type="button"
class="btn btn-primary"
onclick={() => {
kyc.stage = 'methodSelection';
}}
>
下一步
</button>
</div>
<!-- ─── METHOD SELECTION stage ────────────────────────────────── -->
{:else if kyc.stage === 'methodSelection'}
<Dialog.Title class="mb-4 font-sans text-lg font-semibold tracking-tight">
选择身份认证模式
</Dialog.Title>
<div class="mb-4 grid grid-cols-2 gap-3">
<!-- 身份证 card -->
<button
type="button"
class="flex flex-col items-center gap-2 rounded-[--radius-box] border p-4 transition-colors
{selectedMethod === 'cnrid'
? 'border-primary bg-primary/5 text-primary'
: 'border-base-300 text-base-content/60 hover:border-base-content/30'}"
onclick={() => {
selectedMethod = 'cnrid';
}}
>
<CreditCard class="size-7" />
<span class="text-sm font-medium">身份证</span>
</button>
<!-- 护照 card -->
<button
type="button"
class="flex flex-col items-center gap-2 rounded-[--radius-box] border p-4 transition-colors
{selectedMethod === 'passport'
? 'border-primary bg-primary/5 text-primary'
: 'border-base-300 text-base-content/60 hover:border-base-content/30'}"
onclick={() => {
selectedMethod = 'passport';
}}
>
<BookOpen class="size-7" />
<span class="text-sm font-medium">护照</span>
</button>
</div>
<!-- Inline form revealed after method selection -->
{#if selectedMethod}
<form
method="POST"
action="{base}/events/{eventId}?/kycSession"
use:enhance={() => {
submitting = true;
formError = null;
return async ({ result }) => {
submitting = false;
if (result.type === 'failure') {
const data = result.data as { message?: string } | undefined;
formError = data?.message ?? '认证请求失败，请重试';
} else if (result.type === 'success') {
const data = result.data as {
status?: string;
kycId?: string;
redirectUri?: string;
};
if (data.status === 'processing' && data.kycId && data.redirectUri) {
kyc.kycId = data.kycId;
window.open(data.redirectUri, '_blank');
kyc.stage = 'pending';
} else if (data.status === 'success' && data.kycId) {
kyc.kycId = data.kycId;
await kyc.joinWithKyc();
}
}
};
}}
class="space-y-3"
>
<input type="hidden" name="method" value={selectedMethod} />
{#if selectedMethod === 'cnrid'}
<div class="flex flex-col gap-1">
<label for="kyc-name" class="text-sm text-base-content/60">姓名</label>
<input
id="kyc-name"
name="name"
class="input w-full"
placeholder="2–10 个汉字"
bind:value={cnridName}
/>
</div>
<div class="flex flex-col gap-1">
<label for="kyc-cnrid" class="text-sm text-base-content/60">身份证号</label>
<input
id="kyc-cnrid"
name="cnrid"
class="input w-full font-mono"
placeholder="18 位"
maxlength="18"
bind:value={cnridId}
/>
</div>
{:else}
<div class="flex flex-col gap-1">
<label for="kyc-passport" class="text-sm text-base-content/60">护照号</label>
<input
id="kyc-passport"
name="passportId"
class="input w-full font-mono"
placeholder="9 个字符"
maxlength="9"
bind:value={passportId}
/>
</div>
{/if}
{#if formError}
<div role="alert" class="alert alert-soft text-sm alert-error">
{formError}
</div>
{/if}
<div class="flex justify-end pt-2">
<button type="submit" class="btn btn-primary" disabled={!isValid || submitting}>
{#if submitting}
<span class="loading loading-sm loading-spinner"></span>
{:else}
开始认证
{/if}
</button>
</div>
</form>
{/if}
<!-- ─── PENDING stage ──────────────────────────────────────── -->
{:else if kyc.stage === 'pending'}
<Dialog.Title class="mb-4 font-sans text-lg font-semibold tracking-tight">
等待身份认证结果
</Dialog.Title>
<p class="mb-6 text-sm text-base-content/60">
认证页面已打开。正在等待认证服务器回传数据...
</p>
<div class="flex justify-center py-4">
<span class="loading loading-lg loading-spinner text-primary"></span>
</div>
<!-- ─── SUCCESS stage ──────────────────────────────────────── -->
{:else if kyc.stage === 'success'}
<Dialog.Title class="mb-2 font-sans text-lg font-semibold tracking-tight">
成功
</Dialog.Title>
<p class="mb-4 text-sm text-base-content/60">已完成身份认证。</p>
<div class="flex justify-center py-4">
<Check size={100} class="text-success" />
</div>
<div class="mt-4 flex justify-end">
<button
type="button"
class="btn btn-primary"
onclick={async () => {
kyc.setOpen(false);
await invalidateAll();
}}
>
完成
</button>
</div>
<!-- ─── FAILED stage ───────────────────────────────────────── -->
{:else if kyc.stage === 'failed'}
<Dialog.Title class="mb-2 font-sans text-lg font-semibold tracking-tight">
失败
</Dialog.Title>
<p class="mb-4 text-sm text-base-content/60">提交身份认证失败，请重试。</p>
<div class="flex justify-center py-4">
<X size={100} class="text-error" />
</div>
<div class="mt-4 flex justify-end">
<button type="button" class="btn btn-ghost" onclick={() => kyc.setOpen(false)}>
关闭
</button>
</div>
{/if}
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>

63
src/lib/components/MarkdownEditor.svelte Normal file
View File

@@ -0,0 +1,63 @@
<script lang="ts">
import { marked } from 'marked';
let {
value = $bindable(''),
name,
placeholder = '支持 Markdown 格式'
}: {
value?: string;
name: string;
placeholder?: string;
} = $props();
let tab = $state<'edit' | 'preview'>('edit');
// marked.parse returns string | Promise<string> in v5+.
// Pass { async: false } to force the synchronous string return.
const preview = $derived(marked.parse(value, { async: false }) as string);
</script>
<div class="flex flex-col">
<div
role="tablist"
class="tabs-border tabs rounded-t-[--radius-box] border border-b-0 border-base-300"
>
<button
type="button"
role="tab"
class="tab {tab === 'edit' ? 'tab-active' : ''}"
onclick={() => (tab = 'edit')}>编辑</button
>
<button
type="button"
role="tab"
class="tab {tab === 'preview' ? 'tab-active' : ''}"
onclick={() => (tab = 'preview')}>预览</button
>
</div>
<!-- Always in DOM so the form always submits the current value -->
<textarea
{name}
{placeholder}
class="textarea-bordered textarea min-h-[240px] w-full rounded-t-none font-mono text-sm
{tab === 'preview' ? 'hidden' : ''}"
bind:value
></textarea>
{#if tab === 'preview'}
<div
class="prose prose-sm min-h-[240px] max-w-none rounded-b-[--radius-box]
border border-base-300 p-4 dark:prose-invert"
>
{#if value.trim()}
<!-- eslint-disable svelte/no-at-html-tags -->
{@html preview}
<!-- eslint-enable svelte/no-at-html-tags -->
{:else}
<p class="text-base-content/30 italic">（无内容）</p>
{/if}
</div>
{/if}
</div>

35
src/lib/components/NavigationProgress.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
import NProgress from 'nprogress';
import { navigating } from '$app/state';
NProgress.configure({ showSpinner: false, minimum: 0.1, easing: 'ease', speed: 300 });
let timer: ReturnType<typeof setTimeout> | null = null;
let started = false;
$effect(() => {
if (navigating.from !== null || navigating.to !== null) {
timer = setTimeout(() => {
NProgress.start();
started = true;
timer = null;
}, 200);
} else {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
if (started) {
NProgress.done();
started = false;
}
}
return () => {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
};
});
</script>

108
src/lib/components/OnboardingDialog.svelte Normal file
View File

@@ -0,0 +1,108 @@
<script lang="ts">
import { untrack } from 'svelte';
import { invalidateAll } from '$app/navigation';
import { superForm } from 'sveltekit-superforms';
import { Dialog } from 'bits-ui';
import type { SuperValidated } from 'sveltekit-superforms';
import type { OnboardingInput } from '$lib/schemas/onboarding';
let {
needsOnboarding,
onboardingForm
}: {
needsOnboarding: boolean;
onboardingForm: SuperValidated<OnboardingInput>;
} = $props();
const { form, errors, enhance, submitting } = untrack(() =>
superForm(onboardingForm, {
dataType: 'form',
onResult: ({ result }) => {
if (result.type === 'success') {
invalidateAll();
}
}
})
);
</script>
<Dialog.Root open={needsOnboarding}>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/50" />
<Dialog.Content
class="modal-open modal"
escapeKeydownBehavior="ignore"
interactOutsideBehavior="ignore"
>
<div class="modal-box">
<Dialog.Title class="text-lg font-bold">完善个人资料</Dialog.Title>
<p class="mt-1 text-sm text-base-content/50">请在继续使用前设置您的用户名和昵称。</p>
<form
method="POST"
action="/app/onboarding?/completeProfile"
use:enhance
class="mt-4 flex flex-col gap-4"
>
{#if $errors._errors?.[0]}
<div role="alert" class="alert alert-soft text-sm alert-error">
{$errors._errors[0]}
</div>
{/if}
<fieldset class="fieldset">
<legend class="fieldset-legend">用户名 *</legend>
<label class="input w-full" class:input-error={$errors.username}>
<span class="opacity-40">@</span>
<input
type="text"
name="username"
class="grow"
placeholder="alice_chen"
bind:value={$form.username}
disabled={$submitting}
/>
</label>
{#if $errors.username}
<p class="fieldset-label text-error">{$errors.username}</p>
{:else}
<p class="fieldset-label font-mono text-[0.72rem] opacity-40">
5–255 字符，仅限字母 / 数字 / 下划线
</p>
{/if}
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">昵称 *</legend>
<label class="input w-full" class:input-error={$errors.nickname}>
<input
type="text"
name="nickname"
class="grow"
placeholder="Alice"
bind:value={$form.nickname}
disabled={$submitting}
/>
</label>
{#if $errors.nickname}
<p class="fieldset-label text-error">{$errors.nickname}</p>
{:else}
<p class="fieldset-label font-mono text-[0.72rem] opacity-40">
最多 24 字符，显示为您的展示名称
</p>
{/if}
</fieldset>
<div class="modal-action mt-2">
<button type="submit" class="btn btn-block btn-primary" disabled={$submitting}>
{#if $submitting}
<span class="loading loading-sm loading-spinner"></span>
{/if}
保存并继续
</button>
</div>
</form>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>

52
src/lib/components/OtpInput.svelte Normal file
View File

@@ -0,0 +1,52 @@
<script lang="ts">
let { onComplete }: { onComplete: (code: string) => void } = $props();
let digits = $state<string[]>(['', '', '', '', '', '']);
let inputs: HTMLInputElement[] = [];
function handleInput(i: number, e: Event) {
const raw = (e.target as HTMLInputElement).value.replace(/\D/g, '');
// Take only last char (handles paste or accidental double-type)
digits[i] = raw.slice(-1);
if (digits[i] && i < 5) {
inputs[i + 1]?.focus();
}
if (digits.every((d) => d.length === 1)) {
onComplete?.(digits.join(''));
}
}
function handleKeydown(i: number, e: KeyboardEvent) {
if (e.key === 'Backspace' && !digits[i] && i > 0) {
digits[i - 1] = '';
inputs[i - 1]?.focus();
}
}
function handlePaste(e: ClipboardEvent) {
e.preventDefault();
const text = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, 6);
for (let i = 0; i < 6; i++) {
digits[i] = text[i] ?? '';
}
if (text.length === 6) onComplete?.(text);
else inputs[text.length]?.focus();
}
</script>
<div class="flex gap-2" data-otp-input>
{#each digits as digit, i (i)}
<input
bind:this={inputs[i]}
type="text"
inputmode="numeric"
maxlength="1"
class="input w-10 text-center font-mono text-lg"
value={digit}
oninput={(e) => handleInput(i, e)}
onkeydown={(e) => handleKeydown(i, e)}
onpaste={handlePaste}
aria-label={`签到码第 ${i + 1} 位`}
/>
{/each}
</div>

276
src/lib/components/ProfileCard.svelte Normal file
View File

@@ -0,0 +1,276 @@
<script lang="ts">
import { page } from '$app/state';
import { base } from '$app/paths';
import { Pencil, Link } from '@lucide/svelte';
import type { SuperForm } from 'sveltekit-superforms';
import MarkdownEditor from './MarkdownEditor.svelte';
import type { ServiceUserUserInfoData } from '$lib/api';
import type { ProfileInput } from '$lib/schemas/profile';
type Props = {
user: ServiceUserUserInfoData;
editable: boolean;
form?: SuperForm<ProfileInput>;
bioHtml: string | null;
mode?: 'view' | 'edit';
};
let { user, editable, form, bioHtml, mode = $bindable('view') }: Props = $props();
let copied = $state(false);
const initial = $derived(
(user.nickname ?? user.username ?? user.email).slice(0, 1).toUpperCase()
);
const profileUrl = $derived(`${page.url.origin}${base}/profile/${user.user_id}`);
// Expose superforms stores at the script level so Svelte's $-prefix auto-subscription works.
// These are only consumed in markup when mode === 'edit' && editable && form !== undefined.
// Non-null cast is safe: the edit branch is only reached when form is defined (see {#if} guard).
const formStore = $derived(form!.form);
const errorsStore = $derived(form!.errors);
const submittingStore = $derived(form!.submitting);
async function copyProfileLink() {
await navigator.clipboard.writeText(profileUrl);
copied = true;
setTimeout(() => (copied = false), 1500);
}
</script>
<div class="card overflow-hidden bg-base-300 card-border">
<div class="p-6">
<div class="flex flex-col gap-6 lg:flex-row lg:gap-8">
<!-- Left column: avatar header + view/edit content -->
<div class="flex flex-col gap-6 lg:w-max lg:min-w-100 lg:shrink-0">
<!-- Header: avatar + name block + permission badge -->
<div class="grid grid-cols-[auto_1fr] items-start gap-6">
{#if user.avatar}
<div class="avatar">
<div class="w-24 rounded-full ring-2 ring-primary ring-offset-2 ring-offset-base-100">
<img src={user.avatar} alt={user.nickname ?? user.email} />
</div>
</div>
{:else}
<div class="avatar avatar-placeholder">
<div class="w-24 rounded-full bg-base-300 text-base-content">
<span class="font-display text-4xl">{initial}</span>
</div>
</div>
{/if}
<div class="flex min-w-0 flex-col gap-1.5 pt-2">
<h2 class="truncate font-sans text-2xl font-semibold tracking-tight">
{user.nickname || user.username || user.email}
</h2>
{#if user.subtitle}
<p class="font-sans text-sm text-base-content/60">{user.subtitle}</p>
{/if}
</div>
</div>
{#if mode === 'view' || !editable || !form}
<!-- View mode: meta block + actions row -->
<p class="flex items-center gap-3 font-display text-sm text-base-content/60">
基本资料
<span class="h-px flex-1 bg-base-300"></span>
</p>
<dl class="grid grid-cols-[auto_1fr] gap-x-10 gap-y-4">
<dt class="pt-0.5 font-display text-sm text-base-content/60">邮箱</dt>
<dd class="font-mono text-sm break-all">{user.email}</dd>
<dt class="pt-0.5 font-display text-sm text-base-content/60">用户名</dt>
<dd class="font-mono text-sm">{user.username}</dd>
<dt class="pt-0.5 font-display text-sm text-base-content/60">公开资料</dt>
<dd>
<span class="badge badge-soft {user.allow_public ? 'badge-success' : 'badge-ghost'}">
{user.allow_public ? '已公开' : '未公开'}
</span>
</dd>
</dl>
<div class="flex items-center justify-between gap-4 border-t border-base-300 pt-5">
<button
type="button"
onclick={copyProfileLink}
class="inline-flex items-center gap-1.5 rounded-[var(--radius-field)] border border-dashed border-base-300 px-2.5 py-1.5 font-mono text-xs tracking-widest text-base-content/60 uppercase transition hover:border-solid hover:text-base-content"
class:!border-solid={copied}
class:!border-success={copied}
class:!text-success={copied}
>
<Link class="size-3" />
{copied ? '已复制' : '复制主页链接'}
</button>
{#if editable}
<button type="button" class="btn btn-primary" onclick={() => (mode = 'edit')}>
<Pencil class="size-4" />编辑
</button>
{/if}
</div>
{:else}
<!-- Edit mode -->
<form method="POST" action="?/update" use:form.enhance class="flex flex-col gap-5">
{#if $errorsStore?._errors?.length}
<div class="alert alert-soft alert-error">{$errorsStore._errors.join('; ')}</div>
{/if}
<p class="flex items-center gap-3 font-display text-sm text-base-content/60">
基本资料
<span class="h-px flex-1 bg-base-300"></span>
</p>
<div class="flex flex-col gap-1.5">
<label for="username" class="font-display text-sm text-base-content/60">用户名</label>
<label class="input w-full" class:input-error={$errorsStore.username}>
<span class="opacity-60">@</span>
<input
id="username"
class="grow"
name="username"
bind:value={$formStore.username}
minlength="5"
maxlength="255"
/>
</label>
{#if $errorsStore.username}
<p class="font-mono text-xs tracking-wider text-error">{$errorsStore.username}</p>
{:else}
<p class="font-mono text-xs tracking-wider text-base-content/60">
5–255 字符，仅限字母 / 数字 / 下划线
</p>
{/if}
</div>
<div class="flex flex-col gap-1.5">
<label for="nickname" class="font-display text-sm text-base-content/60">昵称</label>
<label class="input w-full" class:input-error={$errorsStore.nickname}>
<input
id="nickname"
class="grow"
name="nickname"
bind:value={$formStore.nickname}
maxlength="24"
/>
</label>
{#if $errorsStore.nickname}
<p class="font-mono text-xs tracking-wider text-error">{$errorsStore.nickname}</p>
{/if}
</div>
<div class="flex flex-col gap-1.5">
<label for="subtitle" class="font-display text-sm text-base-content/60">副标题</label>
<label class="input w-full" class:input-error={$errorsStore.subtitle}>
<input
id="subtitle"
class="grow"
name="subtitle"
bind:value={$formStore.subtitle}
maxlength="128"
/>
</label>
{#if $errorsStore.subtitle}
<p class="font-mono text-xs tracking-wider text-error">{$errorsStore.subtitle}</p>
{/if}
</div>
<div class="flex flex-col gap-1.5">
<label for="avatar" class="font-display text-sm text-base-content/60">头像 URL</label>
<label class="input w-full" class:input-error={$errorsStore.avatar}>
<Link class="size-4 opacity-50" />
<input
id="avatar"
class="grow"
name="avatar"
type="url"
placeholder="https://…"
bind:value={$formStore.avatar}
/>
</label>
{#if $errorsStore.avatar}
<p class="font-mono text-xs tracking-wider text-error">{$errorsStore.avatar}</p>
{:else}
<p class="font-mono text-xs tracking-wider text-base-content/60">
可选。粘贴一个 http(s) 图片链接。
</p>
{/if}
</div>
<div class="flex items-center gap-3 border-y border-dashed border-base-300 py-3">
<input
type="checkbox"
id="allowPublic"
name="allowPublic"
class="toggle toggle-primary"
bind:checked={$formStore.allowPublic}
/>
<label for="allowPublic" class="cursor-pointer font-sans text-sm">
允许其他人查看我的资料
</label>
<span class="ml-auto font-mono text-xs tracking-widest text-base-content/60">
ALLOW_PUBLIC
</span>
</div>
<div class="flex items-center justify-between gap-4 border-t border-base-300 pt-3">
<span class="font-mono text-xs tracking-widest text-base-content/60 uppercase">
未保存的更改
</span>
<div class="flex gap-2">
<button type="button" class="btn btn-ghost" onclick={() => (mode = 'view')}>
取消
</button>
<button type="submit" class="btn btn-primary" disabled={$submittingStore}>
{#if $submittingStore}
<span class="loading loading-sm loading-spinner"></span>
{/if}
保存
</button>
</div>
</div>
<!-- Bio lives in the right column (outside this <form> element), so the
MarkdownEditor textarea is NOT form-owned — browsers exclude out-of-form
controls from FormData. This hidden input mirrors $formStore.bio so the
value reaches the server action. The MarkdownEditor's textarea ALSO has
name="bio" but because it is outside <form>, it does not produce a
duplicate key in FormData. If the layout ever changes and the MarkdownEditor
moves inside this <form>, remove this hidden input first to avoid a
double-submission. -->
<input type="hidden" name="bio" value={$formStore.bio} />
</form>
{/if}
</div>
<!-- Right column: bio -->
<div
class="relative min-h-48 flex-1 overflow-hidden rounded-[var(--radius-box)] border border-base-300"
>
{#if mode === 'edit' && editable && form}
<div class="flex h-full flex-col gap-1.5 p-4">
<p class="font-display text-sm text-base-content/60">个人简介</p>
<MarkdownEditor
name="bio"
bind:value={$formStore.bio}
placeholder="支持 Markdown 格式"
/>
{#if $errorsStore?.bio}
<p class="font-mono text-xs tracking-wider text-error">{$errorsStore.bio}</p>
{/if}
</div>
{:else if bioHtml}
<div class="prose prose-sm max-w-none p-5 dark:prose-invert">
<!-- eslint-disable svelte/no-at-html-tags -->
{@html bioHtml}
<!-- eslint-enable svelte/no-at-html-tags -->
</div>
{:else}
<p
class="absolute inset-0 flex items-center justify-center text-sm text-base-content/30 italic"
>
暂无简介
</p>
{/if}
</div>
</div>
</div>
</div>

96
src/lib/components/WorkbenchCurrentEvent.svelte Normal file
View File

@@ -0,0 +1,96 @@
<script lang="ts">
import { resolve } from '$app/paths';
import { Dialog } from 'bits-ui';
import { CalendarDays, QrCode } from '@lucide/svelte';
import type { CurrentEvent } from '$lib/workbench';
import CheckinQrDialog from './CheckinQrDialog.svelte';
let {
event
}: {
event: CurrentEvent | null;
} = $props();
function formatTime(iso: string): string {
const d = new Date(iso);
const mm = String(d.getMonth() + 1).padStart(2, '0');
const dd = String(d.getDate()).padStart(2, '0');
const hh = String(d.getHours()).padStart(2, '0');
const min = String(d.getMinutes()).padStart(2, '0');
return `${mm}-${dd} ${hh}:${min}`;
}
</script>
<div class="card relative overflow-hidden bg-base-300 card-border">
<!-- Accent stripe: only shown when there is an event -->
{#if event}
<div class="absolute inset-y-0 left-0 w-[3px] rounded-l-[10px] bg-primary"></div>
{/if}
<div class="card-body gap-4 {event ? 'pl-7' : ''}">
<p class="font-mono text-[0.55rem] tracking-[0.2em] text-base-content/30 uppercase">当前活动</p>
{#if event}
<div>
<p class="font-display text-[1.1rem] leading-snug font-normal">{event.name}</p>
<p class="mt-1 text-[0.76rem] text-base-content/50">{event.subtitle}</p>
</div>
<div class="flex gap-6">
<div>
<p class="font-mono text-[0.53rem] tracking-[0.12em] text-base-content/25 uppercase">
开始
</p>
<p class="font-mono text-[0.78rem]">{formatTime(event.start_time)}</p>
</div>
<div>
<p class="font-mono text-[0.53rem] tracking-[0.12em] text-base-content/25 uppercase">
结束
</p>
<p class="font-mono text-[0.78rem]">{formatTime(event.end_time)}</p>
</div>
</div>
<div class="flex gap-2">
{#if event.isOngoing}
<span class="badge badge-soft badge-primary">
<span class="size-[5px] animate-pulse rounded-full bg-current"></span>进行中
</span>
{:else}
<span class="badge badge-soft badge-warning">待开始</span>
{/if}
{#if event.is_checked_in}
<span class="badge badge-soft badge-success">已签到</span>
{/if}
</div>
<!-- QR dialog for attendee to show staff — only during an ongoing event, not yet checked in -->
{#if event.isOngoing && !event.is_checked_in}
<CheckinQrDialog eventId={event.event_id}>
<Dialog.Trigger class="btn w-full btn-primary">
<QrCode aria-hidden="true" class="size-4" />立即签到
</Dialog.Trigger>
</CheckinQrDialog>
{/if}
<a
href={resolve(`/events/${event.event_id}` as '/')}
class="text-[0.72rem] text-base-content/35 transition-colors hover:text-base-content/60"
>
查看活动详情 →
</a>
{:else}
<div class="flex flex-1 flex-col items-center justify-center gap-2 py-8">
<CalendarDays aria-hidden="true" class="size-8 text-base-content/15" />
<p class="text-sm text-base-content/30">暂无进行中或即将到来的活动</p>
<a
href={resolve('/events' as '/')}
class="text-[0.72rem] text-primary/70 transition-colors hover:text-primary"
>
浏览全部活动 →
</a>
</div>
{/if}
</div>
</div>

106
src/lib/components/WorkbenchProfile.svelte Normal file
View File

@@ -0,0 +1,106 @@
<script lang="ts">
import { resolve } from '$app/paths';
let {
fields,
score,
userId
}: {
fields: { nickname: boolean; subtitle: boolean; avatar: boolean; bio: boolean };
score: number;
userId: string;
} = $props();
const CIRCUMFERENCE = 238.76; // 2π × 38
const offset = $derived(CIRCUMFERENCE * (1 - score / 4));
const pct = $derived(Math.round((score / 4) * 100));
// Order matches design mockup: 昵称 → 头像 → 个性签名 → 个人简介
const checklist = [
{ key: 'nickname' as const, label: '昵称' },
{ key: 'avatar' as const, label: '头像' },
{ key: 'subtitle' as const, label: '个性签名' },
{ key: 'bio' as const, label: '个人简介' }
];
</script>
<div class="card h-full bg-base-300 card-border">
<div class="card-body flex flex-col gap-4">
<p class="flex-none font-mono text-[0.55rem] tracking-[0.2em] text-base-content/30 uppercase">
资料完善度
</p>
<!-- Progress ring -->
<div class="flex justify-center">
<div class="relative">
<svg width="110" height="110" viewBox="0 0 110 110" role="img" aria-label="{pct}% 完成">
<!-- Track -->
<circle
cx="55"
cy="55"
r="38"
fill="none"
stroke="currentColor"
class="text-base-content/[0.06]"
stroke-width="7"
/>
<!-- Progress -->
<circle
cx="55"
cy="55"
r="38"
fill="none"
stroke="var(--color-primary)"
stroke-width="7"
stroke-dasharray={CIRCUMFERENCE}
stroke-dashoffset={offset}
stroke-linecap="round"
transform="rotate(-90 55 55)"
/>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="font-mono text-[1.2rem] leading-none text-primary">{pct}%</span>
<span class="mt-0.5 font-mono text-[0.55rem] text-base-content/30">完成</span>
</div>
</div>
</div>
<!-- Checklist -->
<div class="flex flex-col gap-1.5">
{#each checklist as item (item.key)}
{@const done = fields[item.key]}
<div
class="flex items-center gap-2.5 rounded-md px-2.5 py-2
{done ? '' : 'border border-base-300 bg-base-content/[0.03]'}"
>
{#if done}
<div
class="flex size-4 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary"
>
<svg width="8" height="8" viewBox="0 0 10 10" fill="none" aria-hidden="true">
<path
d="M2 5l2.5 2.5L8 3"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<span class="text-sm text-base-content/50">{item.label}</span>
{:else}
<div
class="size-4 shrink-0 rounded-full border border-dashed border-base-content/20"
></div>
<span class="text-sm">{item.label}</span>
{/if}
</div>
{/each}
</div>
<!-- CTA -->
<a href={resolve(`/profile/${userId}` as '/')} class="btn mt-auto w-full flex-none btn-ghost">
完善资料 →
</a>
</div>
</div>

64
src/lib/components/WorkbenchUpcoming.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script lang="ts">
import { resolve } from '$app/paths';
import type { ServiceEventEventListItems } from '$lib/api';
let {
events
}: {
events: ServiceEventEventListItems[];
} = $props();
// Always show 3 slots; fill remaining with null
const slots = $derived(
([...events, null, null, null] as (ServiceEventEventListItems | null)[]).slice(0, 3)
);
function formatTime(iso: string): string {
const d = new Date(iso);
const mm = String(d.getMonth() + 1).padStart(2, '0');
const dd = String(d.getDate()).padStart(2, '0');
const hh = String(d.getHours()).padStart(2, '0');
const min = String(d.getMinutes()).padStart(2, '0');
return `${mm}-${dd} ${hh}:${min}`;
}
</script>
<div class="card bg-base-300 card-border">
<div class="card-body gap-3">
<p class="font-mono text-[0.55rem] tracking-[0.2em] text-base-content/30 uppercase">
即将到来 · 已加入
</p>
<div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
{#each slots as slot, i (i)}
{#if slot}
<a
href={resolve(`/events/${slot.event_id}` as '/')}
class="group flex flex-col gap-2 rounded-lg border border-base-300 bg-base-100/50 p-4 transition-colors hover:border-base-content/20"
>
<p
class="text-sm leading-snug font-normal transition-colors group-hover:text-base-content"
>
{slot.name}
</p>
<p class="font-mono text-[0.62rem] text-base-content/40">
{formatTime(slot.start_time)} – {formatTime(slot.end_time)}
</p>
<div class="flex items-center justify-between">
<span class="badge badge-soft badge-sm badge-warning">待开始</span>
<span
class="text-[0.75rem] text-base-content/25 transition-colors group-hover:text-base-content/50"
>→</span
>
</div>
</a>
{:else}
<div
class="flex min-h-[100px] items-center justify-center rounded-lg border border-dashed border-base-content/10 p-4"
>
<p class="text-[0.75rem] text-base-content/25">暂无更多活动</p>
</div>
{/if}
{/each}
</div>
</div>
</div>

38
src/lib/components/WorkbenchWelcome.svelte Normal file
View File

@@ -0,0 +1,38 @@
<script lang="ts">
import { resolve } from '$app/paths';
import { CalendarDays, User } from '@lucide/svelte';
let {
user,
joinedCount
}: {
user: { nickname?: string | null; username: string; email: string; user_id: string };
joinedCount: number;
} = $props();
</script>
<div class="card bg-base-300 card-border">
<div class="card-body gap-5">
<p class="font-mono text-[0.55rem] tracking-[0.2em] text-base-content/30 uppercase">欢迎回来</p>
<div>
<p class="font-display text-[1.45rem] leading-tight font-light">
你好，<em class="font-normal text-primary not-italic">{user.nickname ?? user.username}</em>
</p>
<p class="mt-1 font-mono text-xs text-base-content/45">{user.email}</p>
</div>
<div>
<p class="font-mono text-[1.55rem] leading-none text-primary">{joinedCount}</p>
<p class="mt-0.5 text-[0.7rem] text-base-content/50">已加入活动</p>
</div>
<div class="grid grid-cols-2 gap-2">
<a href={resolve('/events' as '/')} class="btn btn-ghost">
<CalendarDays aria-hidden="true" class="size-4" />浏览活动
</a>
<a href={resolve(`/profile/${user.user_id}` as '/')} class="btn btn-ghost">
<User aria-hidden="true" class="size-4" />个人资料
</a>
</div>
</div>
</div>

1
src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

15
src/lib/nav.ts Normal file
View File

@@ -0,0 +1,15 @@
import { LayoutDashboard, CalendarDays, User } from '@lucide/svelte';
import type { Component } from 'svelte';
export type NavItem = {
title: string;
url: string;
icon: Component;
};
export const mainNav: NavItem[] = [
{ title: '工作台', url: '/', icon: LayoutDashboard },
{ title: '活动列表', url: '/events', icon: CalendarDays }
];
export const secondaryNav: NavItem[] = [{ title: '个人资料', url: '/profile', icon: User }];

18
src/lib/permissions.test.ts Normal file
View File

@@ -0,0 +1,18 @@
import { describe, expect, it } from 'vitest';
import { getAssignableLevels } from './permissions';
describe('getAssignableLevels', () => {
it('returns empty array for level below 40', () => {
expect(getAssignableLevels(30)).toEqual([]);
expect(getAssignableLevels(10)).toEqual([]);
expect(getAssignableLevels(0)).toEqual([]);
});
it('returns levels 0–30 for Lv40 editor', () => {
expect(getAssignableLevels(40)).toEqual([0, 5, 10, 15, 20, 30]);
});
it('returns all levels for Lv50 editor', () => {
expect(getAssignableLevels(50)).toEqual([0, 5, 10, 15, 20, 30, 40, 50]);
});
});

20
src/lib/permissions.ts Normal file
View File

@@ -0,0 +1,20 @@
const LABELS: Readonly<Record<number, string>> = {
0: '封禁',
5: '受限',
10: '普通用户',
15: '开发者',
20: '签到管理员',
30: '社区活动主办',
40: '官方管理员',
50: '系统管理员'
};
export function permissionLabel(level: number): string {
return LABELS[level] ?? `Lv${level}`;
}
export function getAssignableLevels(editorLevel: number): number[] {
if (editorLevel >= 50) return [0, 5, 10, 15, 20, 30, 40, 50];
if (editorLevel >= 40) return [0, 5, 10, 15, 20, 30];
return [];
}

43
src/lib/schemas/admin-users.test.ts Normal file
View File

@@ -0,0 +1,43 @@
import { describe, expect, it } from 'vitest';
import { userListParamsSchema, updatePermissionSchema } from './admin-users';
describe('userListParamsSchema', () => {
it('parses all defaults when given empty object', () => {
const result = userListParamsSchema.parse({});
expect(result).toEqual({ page: 1, sort_by: 'id', sort_order: 'asc', level: undefined });
});
it('coerces string page to number', () => {
const result = userListParamsSchema.parse({ page: '3' });
expect(result.page).toBe(3);
});
it('coerces string level to number', () => {
const result = userListParamsSchema.parse({ level: '30' });
expect(result.level).toBe(30);
});
it('leaves level undefined when not provided', () => {
const result = userListParamsSchema.parse({});
expect(result.level).toBeUndefined();
});
it('rejects invalid sort_by values', () => {
expect(() => userListParamsSchema.parse({ sort_by: 'email' })).toThrow();
});
it('rejects page < 1', () => {
expect(() => userListParamsSchema.parse({ page: '0' })).toThrow();
});
});
describe('updatePermissionSchema', () => {
it('parses valid input', () => {
const result = updatePermissionSchema.parse({ user_id: 'abc', permission_level: '30' });
expect(result).toEqual({ user_id: 'abc', permission_level: 30 });
});
it('rejects empty user_id', () => {
expect(() => updatePermissionSchema.parse({ user_id: '', permission_level: 10 })).toThrow();
});
});

Some files were not shown because too many files have changed in this diff Show More