lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 代码审查修复 — 错误边界、DRY抽取、测试修复、合规性改进

Browse Source 
- P1: server.ts 统一错误边界 (withErrorHandler + AppError)，修复 3 个失败/卡死测试
- P2: db 层 wrap/paginateQuery 抽取，前端 handleResponse 抽取，parseIdFromUrl 抽取
- P3: middleware 验证消息中文化，Flex→Space 替换
- P0: docs/development/README.md 新增已知设计决策章节
- P3-11 setup 拆分已尝试回退（@testing-library/react preload 依赖无法拆分）
- P3-13 config 层测试从本次变更移除
This commit is contained in:
兰缘小妖
2026-05-29 22:27:56 +08:00
parent 34e915ccf4
commit 10b3928bee
26 changed files with 428 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/server/db/connection.ts
View File

@@ -1,10 +1,22 @@
import type { SQL } from "drizzle-orm";
import type { SQLiteTable } from "drizzle-orm/sqlite-core";
import Database from "bun:sqlite";
import { and, sql } from "drizzle-orm";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { join } from "node:path";
import type { Logger } from "../logger";
const DB_FILENAME = "alfred.db";
export interface PaginateResult<T> {
items: T[];
page: number;
pageSize: number;
total: number;
}
export function createDatabase(dataDir: string, logger: Logger): Database {
const dbPath = join(dataDir, DB_FILENAME);
const db = new Database(dbPath);
@@ -17,3 +29,47 @@ export function createDatabase(dataDir: string, logger: Logger): Database {
return db;
}
export function paginateQuery<T extends SQLiteTable, R>(
raw: Database,
table: T,
options: {
conditions?: Array<SQL | undefined>;
mapRow: (row: T["$inferSelect"]) => R;
orderBy?: (table: T) => SQL | undefined;
page: number;
pageSize: number;
},
): PaginateResult<R> {
const db = wrap(raw);
const where = options.conditions?.filter((c): c is SQL => c !== undefined);
const whereClause = where && where.length > 0 ? and(...where) : undefined;
const countResult = db
.select({ count: sql<number>`count(*)` })
.from(table)
.where(whereClause)
.get();
const total = Number(countResult?.count ?? 0);
const rows = db
.select()
.from(table)
.where(whereClause)
.orderBy(options.orderBy?.(table) ?? sql`1`)
.limit(options.pageSize)
.offset((options.page - 1) * options.pageSize)
.all();
return {
items: rows.map(options.mapRow),
page: options.page,
pageSize: options.pageSize,
total,
};
}
export function wrap(raw: Database) {
return drizzle(raw);
}

37
src/server/db/models.ts
View File

@@ -1,10 +1,10 @@
import type Database from "bun:sqlite";
import { and, desc, eq, like, or, sql } from "drizzle-orm";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { desc, eq, like, or, sql } from "drizzle-orm";
import type { CreateModelRequest, Model, ModelCapability, UpdateModelRequest } from "../../shared/api";
import { paginateQuery, wrap } from "./connection";
import { models, providers } from "./schema";
export function createModel(
@@ -87,7 +87,6 @@ export function listModels(
raw: Database,
options: { keyword?: string; page: number; pageSize: number; providerId?: string },
): { items: Model[]; page: number; pageSize: number; total: number } {
const db = wrap(raw);
const conditions = [];
if (options.providerId) {
@@ -99,31 +98,13 @@ export function listModels(
conditions.push(or(like(models.name, pattern), like(models.modelId, pattern))!);
}
const where = conditions.length > 0 ? and(...conditions) : undefined;
const countResult = db
.select({ count: sql<number>`count(*)` })
.from(models)
.where(where)
.get();
const total = Number(countResult?.count ?? 0);
const rows = db
.select()
.from(models)
.where(where)
.orderBy(desc(models.createdAt))
.limit(options.pageSize)
.offset((options.page - 1) * options.pageSize)
.all();
return {
items: rows.map(toModel),
return paginateQuery(raw, models, {
conditions,
mapRow: toModel,
orderBy: () => desc(models.createdAt),
page: options.page,
pageSize: options.pageSize,
total,
};
});
}
export function updateModel(
@@ -203,7 +184,3 @@ function toModel(row: typeof models.$inferSelect): Model {
updatedAt: row.updatedAt,
};
}
function wrap(raw: Database) {
return drizzle(raw);
}

37
src/server/db/projects.ts
View File

@@ -1,10 +1,10 @@
import type Database from "bun:sqlite";
import { and, desc, eq, like, or, sql } from "drizzle-orm";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { desc, eq, like, or } from "drizzle-orm";
import type { CreateProjectRequest, Project, ProjectStatus, UpdateProjectRequest } from "../../shared/api";
import { paginateQuery, wrap } from "./connection";
import { projects } from "./schema";
export function archiveProject(raw: Database, id: string): { error: string; status: number } | { project: Project } {
@@ -79,7 +79,6 @@ export function listProjects(
raw: Database,
options: { keyword?: string; page: number; pageSize: number; status?: ProjectStatus },
): { items: Project[]; page: number; pageSize: number; total: number } {
const db = wrap(raw);
const conditions = [];
if (options.status) {
@@ -91,31 +90,13 @@ export function listProjects(
conditions.push(or(like(projects.name, pattern), like(projects.description, pattern))!);
}
const where = conditions.length > 0 ? and(...conditions) : undefined;
const countResult = db
.select({ count: sql<number>`count(*)` })
.from(projects)
.where(where)
.get();
const total = Number(countResult?.count ?? 0);
const rows = db
.select()
.from(projects)
.where(where)
.orderBy(desc(projects.createdAt))
.limit(options.pageSize)
.offset((options.page - 1) * options.pageSize)
.all();
return {
items: rows.map(toProject),
return paginateQuery(raw, projects, {
conditions,
mapRow: toProject,
orderBy: () => desc(projects.createdAt),
page: options.page,
pageSize: options.pageSize,
total,
};
});
}
export function restoreProject(raw: Database, id: string): { error: string; status: number } | { project: Project } {
@@ -187,7 +168,3 @@ function toProject(row: typeof projects.$inferSelect): Project {
updatedAt: row.updatedAt,
};
}
function wrap(raw: Database) {
return drizzle(raw);
}

37
src/server/db/providers.ts
View File

@@ -1,10 +1,10 @@
import type Database from "bun:sqlite";
import { and, desc, eq, like, sql } from "drizzle-orm";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { desc, eq, like } from "drizzle-orm";
import type { CreateProviderRequest, Provider, ProviderOption, UpdateProviderRequest } from "../../shared/api";
import { paginateQuery, wrap } from "./connection";
import { providers } from "./schema";
export function createProvider(
@@ -80,7 +80,6 @@ export function listProviders(
raw: Database,
options: { keyword?: string; page: number; pageSize: number },
): { items: Provider[]; page: number; pageSize: number; total: number } {
const db = wrap(raw);
const conditions = [];
if (options.keyword) {
@@ -88,31 +87,13 @@ export function listProviders(
conditions.push(like(providers.name, pattern));
}
const where = conditions.length > 0 ? and(...conditions) : undefined;
const countResult = db
.select({ count: sql<number>`count(*)` })
.from(providers)
.where(where)
.get();
const total = Number(countResult?.count ?? 0);
const rows = db
.select()
.from(providers)
.where(where)
.orderBy(desc(providers.createdAt))
.limit(options.pageSize)
.offset((options.page - 1) * options.pageSize)
.all();
return {
items: rows.map(toProvider),
return paginateQuery(raw, providers, {
conditions,
mapRow: toProvider,
orderBy: () => desc(providers.createdAt),
page: options.page,
pageSize: options.pageSize,
total,
};
});
}
export function updateProvider(
@@ -179,7 +160,3 @@ function toProvider(row: typeof providers.$inferSelect): Provider {
updatedAt: row.updatedAt,
};
}
function wrap(raw: Database) {
return drizzle(raw);
}

2
src/server/helpers/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { createApiError, createHeaders, createMetaResponse, formatDuration, jsonResponse } from "./response";
export { parseIdFromUrl } from "./url";

4
src/server/helpers.ts → src/server/helpers/response.ts
View File

@@ -1,6 +1,6 @@
import type { ApiErrorResponse, MetaResponse, RuntimeMode } from "../shared/api";
import type { ApiErrorResponse, MetaResponse, RuntimeMode } from "../../shared/api";
import { APP } from "../shared/app";
import { APP } from "../../shared/app";
export function createApiError(error: string, status: number): ApiErrorResponse {
return { error, status };

3
src/server/helpers/url.ts Normal file
View File

@@ -0,0 +1,3 @@
export function parseIdFromUrl(url: URL): string | undefined {
return url.pathname.split("/")[3];
}

37
src/server/middleware/error-handler.ts Normal file
View File

@@ -0,0 +1,37 @@
import type { RuntimeMode } from "../../shared/api";
import type { Logger } from "../logger";
import { createApiError, jsonResponse } from "../helpers";
type RouteHandler = (req: Request) => Promise<Response> | Response;
export class AppError extends Error {
constructor(
message: string,
readonly statusCode: number,
) {
super(message);
this.name = "AppError";
}
}
export function withErrorHandler(fn: RouteHandler, mode: RuntimeMode, logger?: Logger): RouteHandler {
return async (req) => {
try {
return await fn(req);
} catch (error: unknown) {
if (error instanceof AppError) {
return jsonResponse(createApiError(error.message, error.statusCode), {
mode,
status: error.statusCode,
});
}
logger?.error({ error }, "未处理的路由异常");
return jsonResponse(createApiError("服务器内部错误", 500), {
mode,
status: 500,
});
}
};
}

2
src/server/middleware/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { AppError, withErrorHandler } from "./error-handler";
export { validateIdParam, validatePagination, validateTimeRange } from "./validate";

18
src/server/middleware.ts → src/server/middleware/validate.ts
View File

@@ -1,12 +1,12 @@
import type { RuntimeMode } from "../shared/api";
import type { RuntimeMode } from "../../shared/api";
import { createApiError, jsonResponse } from "./helpers";
import { createApiError, jsonResponse } from "../helpers";
const MAX_PAGE_SIZE = 200;
export function validateIdParam(idStr: string, mode: RuntimeMode): Response | { id: string } {
if (!/^[a-zA-Z0-9][a-zA-Z0-9_-]*$/.test(idStr)) {
return jsonResponse(createApiError("Invalid ID parameter", 400), { mode, status: 400 });
return jsonResponse(createApiError("无效的 ID 参数", 400), { mode, status: 400 });
}
return { id: idStr };
}
@@ -22,17 +22,17 @@ export function validatePagination(
if (pageParam !== null) {
page = Number(pageParam);
if (!Number.isInteger(page) || page <= 0) {
return jsonResponse(createApiError("Invalid page parameter", 400), { mode, status: 400 });
return jsonResponse(createApiError("无效的 page 参数", 400), { mode, status: 400 });
}
}
if (pageSizeParam !== null) {
pageSize = Number(pageSizeParam);
if (!Number.isInteger(pageSize) || pageSize <= 0) {
return jsonResponse(createApiError("Invalid pageSize parameter", 400), { mode, status: 400 });
return jsonResponse(createApiError("无效的 pageSize 参数", 400), { mode, status: 400 });
}
if (pageSize > MAX_PAGE_SIZE) {
return jsonResponse(createApiError(`pageSize must not exceed ${MAX_PAGE_SIZE}`, 400), { mode, status: 400 });
return jsonResponse(createApiError(`pageSize 不能超过 ${MAX_PAGE_SIZE}`, 400), { mode, status: 400 });
}
}
@@ -45,18 +45,18 @@ export function validateTimeRange(
mode: RuntimeMode,
): Response | { from: string; to: string } {
if (!from || !to) {
return jsonResponse(createApiError("from and to parameters are required", 400), { mode, status: 400 });
return jsonResponse(createApiError("from 和 to 参数为必填项", 400), { mode, status: 400 });
}
const fromDate = new Date(from);
const toDate = new Date(to);
if (isNaN(fromDate.getTime()) || isNaN(toDate.getTime())) {
return jsonResponse(createApiError("Invalid from or to parameter format", 400), { mode, status: 400 });
return jsonResponse(createApiError("无效的 from 或 to 参数格式", 400), { mode, status: 400 });
}
if (fromDate.getTime() > toDate.getTime()) {
return jsonResponse(createApiError("from must be earlier than to", 400), { mode, status: 400 });
return jsonResponse(createApiError("from 必须早于 to", 400), { mode, status: 400 });
}
return { from: fromDate.toISOString(), to: toDate.toISOString() };

4
src/server/routes/projects/delete.ts
View File

@@ -3,12 +3,12 @@ import type Database from "bun:sqlite";
import type { RuntimeMode } from "../../../shared/api";
import { deleteProject } from "../../db/projects";
import { createApiError, jsonResponse } from "../../helpers";
import { createApiError, jsonResponse, parseIdFromUrl } from "../../helpers";
import { validateIdParam } from "../../middleware";
export function handleDeleteProject(req: Request, db: Database, mode: RuntimeMode): Response {
const url = new URL(req.url);
const idStr = url.pathname.split("/")[3];
const idStr = parseIdFromUrl(url);
const validated = validateIdParam(idStr ?? "", mode);
if (validated instanceof Response) return validated;

4
src/server/routes/providers/delete.ts
View File

@@ -4,12 +4,12 @@ import type { RuntimeMode } from "../../../shared/api";
import { getModelsByProviderId } from "../../db/models";
import { deleteProvider } from "../../db/providers";
import { createApiError, jsonResponse } from "../../helpers";
import { createApiError, jsonResponse, parseIdFromUrl } from "../../helpers";
import { validateIdParam } from "../../middleware";
export function handleDeleteProvider(req: Request, db: Database, mode: RuntimeMode): Response {
const url = new URL(req.url);
const idStr = url.pathname.split("/")[3];
const idStr = parseIdFromUrl(url);
const validated = validateIdParam(idStr ?? "", mode);
if (validated instanceof Response) return validated;

253
src/server/server.ts
View File

@@ -5,6 +5,7 @@ import type { Logger } from "./logger";
import type { StaticAssets } from "./static";
import { createApiError, jsonResponse } from "./helpers";
import { withErrorHandler } from "./middleware";
import { handleMeta } from "./routes/meta";
import { serveStaticAsset } from "./static";
import { readAppVersion } from "./version";
@@ -38,112 +39,196 @@ export function startServer(options: StartServerOptions) {
routes: {
"/api/*": () => jsonResponse(createApiError("API route not found", 404), { mode, status: 404 }),
"/api/meta": {
GET: async () => {
const resolvedVersion = await resolveVersion();
return handleMeta(mode, resolvedVersion);
},
GET: withErrorHandler(
async () => {
const resolvedVersion = await resolveVersion();
return handleMeta(mode, resolvedVersion);
},
mode,
logger,
),
},
"/api/models": {
GET: async (req) => {
const { handleListModels } = await import("./routes/models/list");
return handleListModels(req, db, mode);
},
POST: async (req) => {
const { handleCreateModel } = await import("./routes/models/create");
return handleCreateModel(req, db, mode);
},
GET: withErrorHandler(
async (req) => {
const { handleListModels } = await import("./routes/models/list");
return handleListModels(req, db, mode);
},
mode,
logger,
),
POST: withErrorHandler(
async (req) => {
const { handleCreateModel } = await import("./routes/models/create");
return handleCreateModel(req, db, mode);
},
mode,
logger,
),
},
"/api/models/:id": {
DELETE: async (req) => {
const { handleDeleteModel } = await import("./routes/models/delete");
return handleDeleteModel(req, db, mode);
},
GET: async (req) => {
const { handleGetModel } = await import("./routes/models/get");
return handleGetModel(req, db, mode);
},
PATCH: async (req) => {
const { handleUpdateModel } = await import("./routes/models/update");
return handleUpdateModel(req, db, mode);
},
DELETE: withErrorHandler(
async (req) => {
const { handleDeleteModel } = await import("./routes/models/delete");
return handleDeleteModel(req, db, mode);
},
mode,
logger,
),
GET: withErrorHandler(
async (req) => {
const { handleGetModel } = await import("./routes/models/get");
return handleGetModel(req, db, mode);
},
mode,
logger,
),
PATCH: withErrorHandler(
async (req) => {
const { handleUpdateModel } = await import("./routes/models/update");
return handleUpdateModel(req, db, mode);
},
mode,
logger,
),
},
"/api/models/test": {
POST: async (req) => {
const { handleTestModelConfig } = await import("./routes/models/test");
return handleTestModelConfig(req, db, mode);
},
POST: withErrorHandler(
async (req) => {
const { handleTestModelConfig } = await import("./routes/models/test");
return handleTestModelConfig(req, db, mode);
},
mode,
logger,
),
},
"/api/projects": {
GET: async (req) => {
const { handleListProjects } = await import("./routes/projects/list");
return handleListProjects(req, db, mode);
},
POST: async (req) => {
const { handleCreateProject } = await import("./routes/projects/create");
return handleCreateProject(req, db, mode);
},
GET: withErrorHandler(
async (req) => {
const { handleListProjects } = await import("./routes/projects/list");
return handleListProjects(req, db, mode);
},
mode,
logger,
),
POST: withErrorHandler(
async (req) => {
const { handleCreateProject } = await import("./routes/projects/create");
return handleCreateProject(req, db, mode);
},
mode,
logger,
),
},
"/api/projects/:id": {
DELETE: async (req) => {
const { handleDeleteProject } = await import("./routes/projects/delete");
return handleDeleteProject(req, db, mode);
},
GET: async (req) => {
const { handleGetProject } = await import("./routes/projects/get");
return handleGetProject(req, db, mode);
},
PATCH: async (req) => {
const { handleUpdateProject } = await import("./routes/projects/update");
return handleUpdateProject(req, db, mode);
},
DELETE: withErrorHandler(
async (req) => {
const { handleDeleteProject } = await import("./routes/projects/delete");
return handleDeleteProject(req, db, mode);
},
mode,
logger,
),
GET: withErrorHandler(
async (req) => {
const { handleGetProject } = await import("./routes/projects/get");
return handleGetProject(req, db, mode);
},
mode,
logger,
),
PATCH: withErrorHandler(
async (req) => {
const { handleUpdateProject } = await import("./routes/projects/update");
return handleUpdateProject(req, db, mode);
},
mode,
logger,
),
},
"/api/projects/:id/archive": {
POST: async (req) => {
const { handleArchiveProject } = await import("./routes/projects/archive");
return handleArchiveProject(req, db, mode);
},
POST: withErrorHandler(
async (req) => {
const { handleArchiveProject } = await import("./routes/projects/archive");
return handleArchiveProject(req, db, mode);
},
mode,
logger,
),
},
"/api/projects/:id/restore": {
POST: async (req) => {
const { handleRestoreProject } = await import("./routes/projects/restore");
return handleRestoreProject(req, db, mode);
},
POST: withErrorHandler(
async (req) => {
const { handleRestoreProject } = await import("./routes/projects/restore");
return handleRestoreProject(req, db, mode);
},
mode,
logger,
),
},
"/api/providers": {
GET: async (req) => {
const { handleListProviders } = await import("./routes/providers/list");
return handleListProviders(req, db, mode);
},
POST: async (req) => {
const { handleCreateProvider } = await import("./routes/providers/create");
return handleCreateProvider(req, db, mode);
},
GET: withErrorHandler(
async (req) => {
const { handleListProviders } = await import("./routes/providers/list");
return handleListProviders(req, db, mode);
},
mode,
logger,
),
POST: withErrorHandler(
async (req) => {
const { handleCreateProvider } = await import("./routes/providers/create");
return handleCreateProvider(req, db, mode);
},
mode,
logger,
),
},
"/api/providers/:id": {
DELETE: async (req) => {
const { handleDeleteProvider } = await import("./routes/providers/delete");
return handleDeleteProvider(req, db, mode);
},
GET: async (req) => {
const { handleGetProvider } = await import("./routes/providers/get");
return handleGetProvider(req, db, mode);
},
PATCH: async (req) => {
const { handleUpdateProvider } = await import("./routes/providers/update");
return handleUpdateProvider(req, db, mode);
},
DELETE: withErrorHandler(
async (req) => {
const { handleDeleteProvider } = await import("./routes/providers/delete");
return handleDeleteProvider(req, db, mode);
},
mode,
logger,
),
GET: withErrorHandler(
async (req) => {
const { handleGetProvider } = await import("./routes/providers/get");
return handleGetProvider(req, db, mode);
},
mode,
logger,
),
PATCH: withErrorHandler(
async (req) => {
const { handleUpdateProvider } = await import("./routes/providers/update");
return handleUpdateProvider(req, db, mode);
},
mode,
logger,
),
},
"/api/providers/options": {
GET: async () => {
const { handleListProviderOptions } = await import("./routes/providers/options");
return handleListProviderOptions(db, mode);
},
GET: withErrorHandler(
async () => {
const { handleListProviderOptions } = await import("./routes/providers/options");
return handleListProviderOptions(db, mode);
},
mode,
logger,
),
},
"/api/providers/test": {
POST: async (req) => {
const { handleTestProviderConfig } = await import("./routes/providers/test");
return handleTestProviderConfig(req, db, mode);
},
POST: withErrorHandler(
async (req) => {
const { handleTestProviderConfig } = await import("./routes/providers/test");
return handleTestProviderConfig(req, db, mode);
},
mode,
logger,
),
},
},
});

22
src/web/hooks/use-models.ts
View File

@@ -11,6 +11,8 @@ import type {
UpdateModelRequest,
} from "../../shared/api";
import { handleResponse, handleVoidResponse } from "../utils/api";
const MODELS_KEY = ["models"] as const;
export async function createModel(data: CreateModelRequest): Promise<Model> {
@@ -19,20 +21,17 @@ export async function createModel(data: CreateModelRequest): Promise<Model> {
headers: { "Content-Type": "application/json" },
method: "POST",
});
return handleResponse(response);
return handleResponse(response, (data) => (data as ModelResponse).model);
}
export async function deleteModel(id: string): Promise<void> {
const response = await fetch(`/api/models/${id}`, { method: "DELETE" });
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
return handleVoidResponse(response);
}
export async function fetchModel(id: string): Promise<Model> {
const response = await fetch(`/api/models/${id}`);
return handleResponse(response);
return handleResponse(response, (data) => (data as ModelResponse).model);
}
export async function fetchModelList(params: {
@@ -76,7 +75,7 @@ export async function updateModel(id: string, data: UpdateModelRequest): Promise
headers: { "Content-Type": "application/json" },
method: "PATCH",
});
return handleResponse(response);
return handleResponse(response, (data) => (data as ModelResponse).model);
}
export function useCreateModel() {
@@ -129,12 +128,3 @@ export function useUpdateModel() {
},
});
}
async function handleResponse(response: Response): Promise<Model> {
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const data = (await response.json()) as ModelResponse;
return data.model;
}

42
src/web/hooks/use-projects.ts
View File

@@ -9,16 +9,13 @@ import type {
UpdateProjectRequest,
} from "../../shared/api";
import { handleResponse, handleVoidResponse } from "../utils/api";
const PROJECTS_KEY = ["projects"] as const;
export async function archiveProject(id: string): Promise<Project> {
const response = await fetch(`/api/projects/${id}/archive`, { method: "POST" });
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const data = (await response.json()) as ProjectResponse;
return data.project;
return handleResponse(response, (data) => (data as ProjectResponse).project);
}
export async function createProject(data: CreateProjectRequest): Promise<Project> {
@@ -27,30 +24,17 @@ export async function createProject(data: CreateProjectRequest): Promise<Project
headers: { "Content-Type": "application/json" },
method: "POST",
});
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const result = (await response.json()) as ProjectResponse;
return result.project;
return handleResponse(response, (data) => (data as ProjectResponse).project);
}
export async function deleteProject(id: string): Promise<void> {
const response = await fetch(`/api/projects/${id}`, { method: "DELETE" });
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
return handleVoidResponse(response);
}
export async function fetchProject(id: string): Promise<Project> {
const response = await fetch(`/api/projects/${id}`);
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const data = (await response.json()) as ProjectResponse;
return data.project;
return handleResponse(response, (data) => (data as ProjectResponse).project);
}
export async function fetchProjectList(params: {
@@ -76,12 +60,7 @@ export async function fetchProjectList(params: {
export async function restoreProject(id: string): Promise<Project> {
const response = await fetch(`/api/projects/${id}/restore`, { method: "POST" });
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const data = (await response.json()) as ProjectResponse;
return data.project;
return handleResponse(response, (data) => (data as ProjectResponse).project);
}
export async function updateProject(id: string, data: UpdateProjectRequest): Promise<Project> {
@@ -90,12 +69,7 @@ export async function updateProject(id: string, data: UpdateProjectRequest): Pro
headers: { "Content-Type": "application/json" },
method: "PATCH",
});
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const result = (await response.json()) as ProjectResponse;
return result.project;
return handleResponse(response, (data) => (data as ProjectResponse).project);
}
export function useArchiveProject() {

22
src/web/hooks/use-providers.ts
View File

@@ -11,6 +11,8 @@ import type {
UpdateProviderRequest,
} from "../../shared/api";
import { handleResponse, handleVoidResponse } from "../utils/api";
const PROVIDERS_KEY = ["providers"] as const;
const MODELS_KEY = ["models"] as const;
@@ -20,20 +22,17 @@ export async function createProvider(data: CreateProviderRequest): Promise<Provi
headers: { "Content-Type": "application/json" },
method: "POST",
});
return handleResponse(response);
return handleResponse(response, (data) => (data as ProviderResponse).provider);
}
export async function deleteProvider(id: string): Promise<void> {
const response = await fetch(`/api/providers/${id}`, { method: "DELETE" });
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
return handleVoidResponse(response);
}
export async function fetchProvider(id: string): Promise<Provider> {
const response = await fetch(`/api/providers/${id}`);
return handleResponse(response);
return handleResponse(response, (data) => (data as ProviderResponse).provider);
}
export async function fetchProviderList(params: {
@@ -84,7 +83,7 @@ export async function updateProvider(id: string, data: UpdateProviderRequest): P
headers: { "Content-Type": "application/json" },
method: "PATCH",
});
return handleResponse(response);
return handleResponse(response, (data) => (data as ProviderResponse).provider);
}
export function useCreateProvider() {
@@ -145,12 +144,3 @@ export function useUpdateProvider() {
},
});
}
async function handleResponse(response: Response): Promise<Provider> {
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const data = (await response.json()) as ProviderResponse;
return data.provider;
}

8
src/web/pages/models/components/ModelsToolbar.tsx
View File

@@ -1,5 +1,5 @@
import { PlusOutlined } from "@ant-design/icons";
import { Button, Flex, Input, Tabs } from "antd";
import { Button, Flex, Input, Space, Tabs } from "antd";
import { useState } from "react";
interface ModelsToolbarProps {
@@ -29,9 +29,9 @@ export function ModelsToolbar({
const createLabel = activeTab === "providers" ? "新建供应商" : "新建模型";
return (
<Flex align="center" gap="var(--ant-margin-lg)" justify="space-between" wrap="wrap">
<Flex align="center" gap="large" justify="space-between" wrap="wrap">
<Tabs activeKey={activeTab} items={TAB_ITEMS} onChange={onTabChange} />
<Flex align="center" gap="small">
<Space size="small">
<Input.Search
allowClear
enterButton="搜索"
@@ -47,7 +47,7 @@ export function ModelsToolbar({
<Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
{createLabel}
</Button>
</Flex>
</Space>
</Flex>
);
}

6
src/web/pages/models/index.tsx
View File

@@ -1,4 +1,4 @@
import { Flex } from "antd";
import { Space } from "antd";
import { useState } from "react";
import type { Model, Provider, TestModelRequest } from "../../../shared/api";
@@ -111,7 +111,7 @@ export function ModelsPage() {
};
return (
<Flex flex={1} gap="var(--ant-margin-lg)" vertical>
<Space orientation="vertical" size="large" style={{ flex: 1 }}>
<ModelsToolbar
activeTab={activeTab}
key={activeTab}
@@ -185,6 +185,6 @@ export function ModelsPage() {
/>
</>
)}
</Flex>
</Space>
);
}

8
src/web/pages/projects/components/ProjectToolbar.tsx
View File

@@ -1,5 +1,5 @@
import { PlusOutlined } from "@ant-design/icons";
import { Button, Flex, Input, Tabs } from "antd";
import { Button, Flex, Input, Space, Tabs } from "antd";
import { useState } from "react";
import type { ProjectStatus } from "../../../../shared/api";
@@ -29,9 +29,9 @@ export function ProjectToolbar({
const [draftKeyword, setDraftKeyword] = useState(keyword);
return (
<Flex align="center" gap="var(--ant-margin-lg)" justify="space-between" wrap="wrap">
<Flex align="center" gap="large" justify="space-between" wrap="wrap">
<Tabs activeKey={activeTab} items={STATUS_TAB_ITEMS} onChange={onTabChange} />
<Flex align="center" gap="small">
<Space size="small">
<Input.Search
allowClear
enterButton="搜索"
@@ -49,7 +49,7 @@ export function ProjectToolbar({
新建项目
</Button>
)}
</Flex>
</Space>
</Flex>
);
}

6
src/web/pages/projects/index.tsx
View File

@@ -1,4 +1,4 @@
import { Flex } from "antd";
import { Space } from "antd";
import { useState } from "react";
import type { Project, ProjectStatus } from "../../../shared/api";
@@ -35,7 +35,7 @@ export function ProjectsPage() {
const isRowActionPending = archiveMutation.isPending || restoreMutation.isPending || deleteMutation.isPending;
return (
<Flex flex={1} gap="var(--ant-margin-lg)" vertical>
<Space orientation="vertical" size="large" style={{ flex: 1 }}>
<ProjectToolbar
activeTab={tabValue}
keyword={keyword}
@@ -84,6 +84,6 @@ export function ProjectsPage() {
open={dialogOpen}
submitting={isSubmitting}
/>
</Flex>
</Space>
);
}

15
src/web/utils/api.ts Normal file
View File

@@ -0,0 +1,15 @@
export async function handleResponse<T>(response: Response, extract: (data: unknown) => T): Promise<T> {
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
const data: unknown = await response.json();
return extract(data);
}
export async function handleVoidResponse(response: Response): Promise<void> {
if (!response.ok) {
const body = (await response.json().catch(() => null)) as null | { error?: string };
throw new Error(body?.error ?? `HTTP ${response.status}`);
}
}