@koishi-ce/client 1.0.3 → 1.0.4

package/client/components/slot.ts

@@ -2,7 +2,12 @@
 // Copyright (c) 2019-present Shigma and Koishijs contributors.
 // Copyright (c) 2026-present Koishi-CE contributors.
 
-import { type App, type Component, defineComponent, h } from "vue";
+import {
+	type App,
+	type Component,
+	defineComponent,
+	h,
+} from "vue";
 import { useContext } from "../context";
 
 /** 插槽条目的基础形状：参与排序的组件 */
@@ -47,10 +52,15 @@ export const KSlot = defineComponent({
 				? []
 				: [...(slots["default"]?.() || [])]
 						.filter((node) => node.type === KSlotItem)
-						.map((node) => ({ node, order: node.props?.["order"] || 0 }));
+						.map((node) => ({
+							node,
+							order: node.props?.["order"] || 0,
+						}));
 			// external：ctx.slot() 注册的视图，disabled 的不渲染
 			const external = [
-				...(props.name ? ctx.$router.views[props.name] || [] : []),
+				...(props.name
+					? ctx.$router.views[props.name] || []
+					: []),
 			]
 				.filter((item) => !item.disabled?.())
 				.map((item) => ({
@@ -85,7 +95,12 @@ function defineSlotComponent(name: string) {
 	return defineComponent({
 		inheritAttrs: false,
 		setup(_, { slots, attrs }) {
-			return () => h(KSlot, { name, data: attrs, single: true }, slots);
+			return () =>
+				h(
+					KSlot,
+					{ name, data: attrs, single: true },
+					slots,
+				);
 		},
 	});
 }

package/client/context.ts

@@ -26,7 +26,8 @@ import ThemeService from "./plugins/theme";
 // —— 布局相关的 Context 类型扩展 ——
 
 /** 前端侧事件表：在 cordis 事件的基础上扩展本库自定义事件 */
-export interface Events<C extends Context = Context> extends cordis.Events<C> {}
+export interface Events<C extends Context = Context>
+	extends cordis.Events<C> {}
 
 /**
  * 前端 Context 接口：各服务插件通过 `declare module "../context"`
@@ -84,7 +85,10 @@ export class Context extends cordis.Context {
 		this.app = createApp(
 			defineComponent({
 				setup: () => () => [
-					h(resolveComponent("k-slot"), { name: "root", single: true }),
+					h(resolveComponent("k-slot"), {
+						name: "root",
+						single: true,
+					}),
 					h(resolveComponent("k-slot"), { name: "global" }),
 				],
 			}),
@@ -115,12 +119,16 @@ export class Context extends cordis.Context {
 	 */
 	addEventListener<K extends keyof WindowEventMap>(
 		type: K,
-		listener: (this: Window, ev: WindowEventMap[K]) => unknown,
+		listener: (
+			this: Window,
+			ev: WindowEventMap[K],
+		) => unknown,
 		options?: boolean | AddEventListenerOptions,
 	) {
 		return this.effect(() => {
 			window.addEventListener(type, listener, options);
-			return () => window.removeEventListener(type, listener, options);
+			return () =>
+				window.removeEventListener(type, listener, options);
 		});
 	}
 

package/client/data.ts

@@ -3,7 +3,10 @@
 // Copyright (c) 2026-present Koishi-CE contributors.
 
 /// <reference path="./shims.d.ts" />
-import type { Promisify, Universal } from "@koishi-ce/koishi";
+import type {
+	Promisify,
+	Universal,
+} from "@koishi-ce/koishi";
 import type {
 	ClientConfig,
 	Console,
@@ -43,7 +46,8 @@ export function withProxy(url: string) {
 /** 当前与服务端的 WebSocket 连接（未连接时为 null） */
 export const socket = ref<Universal.WebSocket | null>(null);
 /** 按事件名登记的推送监听器（receive 注册） */
-const listeners: Record<string, (data: unknown) => void> = {};
+const listeners: Record<string, (data: unknown) => void> =
+	{};
 /** 按报文 id 暂存的 RPC 应答钩子 [resolve, reject]（send 写入） */
 const responseHooks: Record<
 	string,
@@ -93,19 +97,26 @@ type StoreValue = Store[keyof Store];
 
 // 服务端整表推送：直接覆盖 store 中对应键
 // （key 为联合类型时直写 store[key] 会被要求交叉类型，故经 Record 视图写入）
-receive<{ key: keyof Store; value: unknown }>("data", ({ key, value }) => {
-	(store as Record<keyof Store, StoreValue>)[key] = value as StoreValue;
-});
+receive<{ key: keyof Store; value: unknown }>(
+	"data",
+	({ key, value }) => {
+		(store as Record<keyof Store, StoreValue>)[key] =
+			value as StoreValue;
+	},
+);
 
 // 服务端增量推送：数组做追加，对象做浅合并
-receive<{ key: keyof Store; value: unknown }>("patch", ({ key, value }) => {
-	const current = store[key];
-	if (Array.isArray(current)) {
-		(current as unknown[]).push(...(value as unknown[]));
-	} else if (current) {
-		Object.assign(current, value);
-	}
-});
+receive<{ key: keyof Store; value: unknown }>(
+	"patch",
+	({ key, value }) => {
+		const current = store[key];
+		if (Array.isArray(current)) {
+			(current as unknown[]).push(...(value as unknown[]));
+		} else if (current) {
+			Object.assign(current, value);
+		}
+	},
+);
 
 // RPC 应答分发：按报文 id 找到 send() 留下的 resolve/reject 并结算
 receive<{ id: string; value?: unknown; error?: unknown }>(
@@ -131,7 +142,10 @@ receive<{ id: string; value?: unknown; error?: unknown }>(
  * @param ctx 根 Context，用于把消息转发为 cordis 事件
  * @param callback 创建 WebSocket 实例的工厂函数
  */
-export function connect(ctx: Context, callback: () => Universal.WebSocket) {
+export function connect(
+	ctx: Context,
+	callback: () => Universal.WebSocket,
+) {
 	const value = callback();
 
 	let sendTimer: number;
@@ -142,8 +156,14 @@ export function connect(ctx: Context, callback: () => Universal.WebSocket) {
 		if (!global.heartbeat) return;
 		clearTimeout(sendTimer);
 		clearTimeout(closeTimer);
-		sendTimer = +setTimeout(() => send("ping"), global.heartbeat.interval);
-		closeTimer = +setTimeout(() => value?.close(), global.heartbeat.timeout);
+		sendTimer = +setTimeout(
+			() => send("ping"),
+			global.heartbeat.interval,
+		);
+		closeTimer = +setTimeout(
+			() => value?.close(),
+			global.heartbeat.timeout,
+		);
 	};
 
 	const reconnect = () => {
@@ -152,10 +172,14 @@ export function connect(ctx: Context, callback: () => Universal.WebSocket) {
 		for (const key in store) {
 			(store as Record<string, unknown>)[key] = undefined;
 		}
-		console.log("[koishi] websocket disconnected, will retry in 1s...");
+		console.log(
+			"[koishi] websocket disconnected, will retry in 1s...",
+		);
 		setTimeout(() => {
 			connect(ctx, callback).then(location.reload, () => {
-				console.log("[koishi] websocket disconnected, will retry in 1s...");
+				console.log(
+					"[koishi] websocket disconnected, will retry in 1s...",
+				);
 			});
 		}, 1000);
 	};
@@ -163,7 +187,12 @@ export function connect(ctx: Context, callback: () => Universal.WebSocket) {
 	value.addEventListener("message", (ev) => {
 		refresh();
 		const data = JSON.parse(ev.data);
-		console.debug("↓%c", "color:purple", data.type, data.body);
+		console.debug(
+			"↓%c",
+			"color:purple",
+			data.type,
+			data.body,
+		);
 		if (data.type in listeners) {
 			listeners[data.type]?.(data.body);
 		}
@@ -172,11 +201,13 @@ export function connect(ctx: Context, callback: () => Universal.WebSocket) {
 
 	value.addEventListener("close", reconnect);
 
-	return new Promise<Universal.WebSocket.Event>((resolve, reject) => {
-		value.addEventListener("open", (event) => {
-			socket.value = markRaw(value);
-			resolve(event);
-		});
-		value.addEventListener("error", reject);
-	});
+	return new Promise<Universal.WebSocket.Event>(
+		(resolve, reject) => {
+			value.addEventListener("open", (event) => {
+				socket.value = markRaw(value);
+				resolve(event);
+			});
+			value.addEventListener("error", reject);
+		},
+	);
 }

package/client/index.ts

@@ -37,7 +37,8 @@ export const ScopeStatus = {
 	DISPOSED: 4,
 } as const;
 
-export type ScopeStatus = (typeof ScopeStatus)[keyof typeof ScopeStatus];
+export type ScopeStatus =
+	(typeof ScopeStatus)[keyof typeof ScopeStatus];
 export * from "./components";
 export * from "./context";
 export * from "./data";

package/client/plugins/action.ts

@@ -11,7 +11,11 @@
  * 绑定右键菜单。作用域变量支持 "a.b" 点分键，经 Flatten 类型
  * 与运行时代理呈现为嵌套对象。
  */
-import { type Dict, type Intersect, remove } from "cosmokit";
+import {
+	type Dict,
+	type Intersect,
+	remove,
+} from "cosmokit";
 import {
 	type MaybeRefOrGetter,
 	markRaw,
@@ -58,7 +62,8 @@ export interface ActionOptions {
 }
 
 /** 旧版菜单项写法（字段与 ActionOptions 部分重叠），仅为兼容保留 */
-export type LegacyMenuItem = Partial<ActionOptions> & Omit<MenuItem, "id">;
+export type LegacyMenuItem = Partial<ActionOptions> &
+	Omit<MenuItem, "id">;
 
 /** 菜单项：label / type / icon 均支持写成随作用域变化的 getter */
 export interface MenuItem {
@@ -70,10 +75,14 @@ export interface MenuItem {
 }
 
 /** 值或（以作用域为参数的）取值函数 */
-export type MaybeGetter<T> = T | ((scope: Flatten<ActionContext>) => T);
+export type MaybeGetter<T> =
+	| T
+	| ((scope: Flatten<ActionContext>) => T);
 
 /** 作用域存储：扁平键到「值或 ref 或 getter」的映射 */
-type Store<S extends {}> = { [K in keyof S]?: MaybeRefOrGetter<S[K]> };
+type Store<S extends {}> = {
+	[K in keyof S]?: MaybeRefOrGetter<S[K]>;
+};
 
 /**
  * 把 "a.b.c" 形式的扁平键名归并为 { a: { b: { c } } } 的嵌套结构，
@@ -103,9 +112,14 @@ export interface ActiveMenu {
  * 触发时把附加值写入作用域，并在鼠标位置弹出自定义菜单（由 global 插槽渲染）。
  * @param id 菜单标识，menu() 注册的条目将展示在该菜单中
  */
-export function useMenu<K extends keyof ActionContext>(id: K) {
+export function useMenu<K extends keyof ActionContext>(
+	id: K,
+) {
 	const ctx = useContext();
-	return (event: MouseEvent, value: MaybeRefOrGetter<ActionContext[K]>) => {
+	return (
+		event: MouseEvent,
+		value: MaybeRefOrGetter<ActionContext[K]>,
+	) => {
 		ctx.define(id, value);
 		event.preventDefault();
 		const { clientX, clientY } = event;
@@ -133,7 +147,9 @@ export default class ActionService extends Service {
 		super(ctx, "$action", true);
 		ctx.mixin("$action", ["action", "menu", "define"]);
 
-		ctx.internal.scope = shallowReactive({} as Store<ActionContext>);
+		ctx.internal.scope = shallowReactive(
+			{} as Store<ActionContext>,
+		);
 		ctx.internal.menus = reactive({});
 		ctx.internal.actions = reactive({});
 		ctx.internal.activeMenus = reactive([]);
@@ -142,7 +158,9 @@ export default class ActionService extends Service {
 		// 与键盘事件逐项比对（ctrl 在 macOS 平台映射为 meta 键）
 		ctx.addEventListener("keydown", (event) => {
 			const scope = this.createScope();
-			for (const action of Object.values(ctx.internal.actions)) {
+			for (const action of Object.values(
+				ctx.internal.actions,
+			)) {
 				if (!action.shortcut) continue;
 				const keys = action.shortcut
 					.split("+")
@@ -158,7 +176,11 @@ export default class ActionService extends Service {
 							continue;
 						case "ctrl":
 							// macOS 没有 ctrl+字母 的快捷键惯例，改用 Cmd（meta）
-							if (navigator.platform.toLowerCase().includes("mac")) {
+							if (
+								navigator.platform
+									.toLowerCase()
+									.includes("mac")
+							) {
 								metaKey = true;
 							} else {
 								ctrlKey = true;
@@ -195,7 +217,8 @@ export default class ActionService extends Service {
 			items.forEach((item) => insert(list, item));
 			return () => {
 				items.forEach((item) => remove(list, item));
-				if (!list.length) delete this.ctx.internal.menus[id];
+				if (!list.length)
+					delete this.ctx.internal.menus[id];
 			};
 		});
 	}
@@ -222,7 +245,10 @@ export default class ActionService extends Service {
 	 * 可用 override 临时覆盖若干键值。
 	 */
 	createScope(override = {}) {
-		const scope = { ...this.ctx.internal.scope, ...override };
+		const scope = {
+			...this.ctx.internal.scope,
+			...override,
+		};
 		return createScope(scope);
 	}
 }
@@ -241,11 +267,18 @@ function createScope(
 			if (typeof key === "symbol")
 				return (target as Record<symbol, unknown>)[key];
 			key = prefix + key;
-			const source = scope as Record<string, MaybeRefOrGetter<unknown>>;
+			const source = scope as Record<
+				string,
+				MaybeRefOrGetter<unknown>
+			>;
 			if (key in scope) return toValue(source[key]);
 			// 键本身不存在，但存在以其为前缀的子键：返回子级作用域代理
 			const _prefix = `${key}.`;
-			if (Object.keys(scope).some((k) => k.startsWith(_prefix))) {
+			if (
+				Object.keys(scope).some((k) =>
+					k.startsWith(_prefix),
+				)
+			) {
 				return createScope(scope, `${key}.`);
 			}
 			// 完全未命中：显式返回 undefined（noImplicitReturns）

package/client/plugins/loader.ts

@@ -29,12 +29,17 @@ export function defineExtension(callback: Extension) {
 
 /** 兼容 rollup 与 vite 两种产物：优先取 default 导出 */
 export function unwrapExports(module: unknown): Plugin {
-	const record = module as { default?: unknown } | null | undefined;
+	const record = module as
+		| { default?: unknown }
+		| null
+		| undefined;
 	return (record?.default || module) as Plugin;
 }
 
 /** 按文件后缀分发的加载器：样式表插入 <link>，其余按动态模块导入 */
-const loaders: Dict<(ctx: Context, url: string) => Promise<void>> = {
+const loaders: Dict<
+	(ctx: Context, url: string) => Promise<void>
+> = {
 	async [`.css`](ctx, url) {
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
@@ -53,7 +58,10 @@ const loaders: Dict<(ctx: Context, url: string) => Promise<void>> = {
 	async [``](ctx, url) {
 		const exports = await import(/* @vite-ignore */ url);
 		// 扩展入口均为函数式插件；断言到 Function 形状以走 config 可选的重载
-		ctx.plugin(unwrapExports(exports) as Plugin.Function, ctx.extension?.data);
+		ctx.plugin(
+			unwrapExports(exports) as Plugin.Function,
+			ctx.extension?.data,
+		);
 	},
 };
 
@@ -77,20 +85,25 @@ export default class LoaderService extends Service {
 	private backendId: string | undefined;
 
 	/** 当前已加载扩展的 id → LoadResult 映射 */
-	public extensions: Dict<LoadResult> = shallowReactive({} as Dict<LoadResult>);
+	public extensions: Dict<LoadResult> = shallowReactive(
+		{} as Dict<LoadResult>,
+	);
 
 	constructor(ctx: Context) {
 		super(ctx, "$loader", true);
 
 		// 服务端推送扩展入口的随附数据（entry-data）：
 		// 同步到 store.entry 并刷新已加载扩展的 data ref
-		receive<{ id: string; data: unknown }>("entry-data", ({ id, data }) => {
-			const entry = store.entry?.[id];
-			if (!entry) return;
-			entry.data = data;
-			const extension = this.extensions[id];
-			if (extension) extension.data.value = data;
-		});
+		receive<{ id: string; data: unknown }>(
+			"entry-data",
+			({ id, data }) => {
+				const entry = store.entry?.[id];
+				if (!entry) return;
+				entry.data = data;
+				const extension = this.extensions[id];
+				if (extension) extension.data.value = data;
+			},
+		);
 	}
 
 	/**
@@ -102,10 +115,15 @@ export default class LoaderService extends Service {
 			() => store.entry,
 			async (newValue, oldValue) => {
 				// _id 标识后端实例：变化说明服务端已重启，页面状态不再可信
-				const { _id, ...rest } = (newValue || {}) as Dict<EntryData> & {
+				const { _id, ...rest } = (newValue ||
+					{}) as Dict<EntryData> & {
 					_id?: string | undefined;
 				};
-				if (this.backendId && _id && this.backendId !== _id) {
+				if (
+					this.backendId &&
+					_id &&
+					this.backendId !== _id
+				) {
 					window.location.reload();
 					return;
 				}
@@ -119,38 +137,42 @@ export default class LoaderService extends Service {
 				}
 
 				await Promise.all(
-					Object.entries(rest).map(([key, { files, paths, data }]) => {
-						if (this.extensions[key]) return;
-						// 每个扩展在隔离的 "extension" 作用域中运行，
-						// 并通过 ctx.extension 拿到自己的加载结果
-						const scope = this.ctx.isolate("extension").plugin(() => {});
-						scope.ctx.extension = this.extensions[key] = {
-							done: ref(false),
-							scope,
-							paths,
-							data: ref(data),
-						};
-						// 依次加载入口声明的全部文件，按后缀分发给对应 loader；
-						// task 返回给外层 Promise.all，使 initTask 真正等到全部
-						// 入口文件 settle 后才放行（否则 router install 早于扩展
-						// 注册路由，初始导航会对当前路径报 no match）。
-						// 扩展加载失败不阻塞界面可用性
-						const task = Promise.all(
-							files.map((url) => {
-								for (const ext in loaders) {
-									if (!url.endsWith(ext)) continue;
-									return loaders[ext]?.(scope.ctx, url);
-								}
-								// 无匹配后缀的入口文件：显式跳过（noImplicitReturns）
-								return undefined;
-							}),
-						);
-						void task.finally(() => {
-							const extension = this.extensions[key];
-							if (extension) extension.done.value = true;
-						});
-						return task.catch(() => {});
-					}),
+					Object.entries(rest).map(
+						([key, { files, paths, data }]) => {
+							if (this.extensions[key]) return;
+							// 每个扩展在隔离的 "extension" 作用域中运行，
+							// 并通过 ctx.extension 拿到自己的加载结果
+							const scope = this.ctx
+								.isolate("extension")
+								.plugin(() => {});
+							scope.ctx.extension = this.extensions[key] = {
+								done: ref(false),
+								scope,
+								paths,
+								data: ref(data),
+							};
+							// 依次加载入口声明的全部文件，按后缀分发给对应 loader；
+							// task 返回给外层 Promise.all，使 initTask 真正等到全部
+							// 入口文件 settle 后才放行（否则 router install 早于扩展
+							// 注册路由，初始导航会对当前路径报 no match）。
+							// 扩展加载失败不阻塞界面可用性
+							const task = Promise.all(
+								files.map((url) => {
+									for (const ext in loaders) {
+										if (!url.endsWith(ext)) continue;
+										return loaders[ext]?.(scope.ctx, url);
+									}
+									// 无匹配后缀的入口文件：显式跳过（noImplicitReturns）
+									return undefined;
+								}),
+							);
+							void task.finally(() => {
+								const extension = this.extensions[key];
+								if (extension) extension.done.value = true;
+							});
+							return task.catch(() => {});
+						},
+					),
 				);
 
 				// 首次加载完成（oldValue 为空）时放行 initTask

package/client/plugins/router.ts

@@ -19,7 +19,11 @@ import {
 	ref,
 	toValue,
 } from "vue";
-import { createRouter, createWebHistory, START_LOCATION } from "vue-router";
+import {
+	createRouter,
+	createWebHistory,
+	START_LOCATION,
+} from "vue-router";
 import type { SlotOptions } from "../components";
 import Overlay from "../components/chat/overlay.vue";
 import type { Context } from "../context";
@@ -106,8 +110,15 @@ export class Activity {
 		this.options = options;
 		options.order ??= 0;
 		options.position ??= "top";
-		Object.assign(this, omit(options, ["icon", "name", "desc", "disabled"]));
-		const { path, id = getActivityId(path), component } = options;
+		Object.assign(
+			this,
+			omit(options, ["icon", "name", "desc", "disabled"]),
+		);
+		const {
+			path,
+			id = getActivityId(path),
+			component,
+		} = options;
 		// 路由挂载时把 activity 实例放进 meta，供导航守卫与标题栏取用
 		this._disposables.push(
 			ctx.$router.router.addRoute({
@@ -127,7 +138,9 @@ export class Activity {
 	/** 若存在待跳转目标且当前路由已能解析，则立即完成该跳转 */
 	handleUpdate() {
 		if (redirectTo.value) {
-			const location = this.ctx.$router.router.resolve(redirectTo.value);
+			const location = this.ctx.$router.router.resolve(
+				redirectTo.value,
+			);
 			if (location.matched.length) {
 				redirectTo.value = null;
 				this.ctx.$router.router.replace(location);
@@ -156,7 +169,8 @@ export class Activity {
 	 */
 	disabled() {
 		if (this.ctx.bail("activity", this)) return true;
-		if (!this.fields?.every((key) => store[key])) return true;
+		if (!this.fields?.every((key) => store[key]))
+			return true;
 		if (this.when && !this.when()) return true;
 		if (this.options.disabled?.()) return true;
 		return false;
@@ -165,10 +179,13 @@ export class Activity {
 	dispose() {
 		this._disposables.forEach((dispose) => dispose());
 		// 若被卸载的恰是当前展示的页面：暂存目标路由，退回缓存的首页
-		const current = this.ctx.$router.router.currentRoute.value;
+		const current =
+			this.ctx.$router.router.currentRoute.value;
 		if (current?.meta?.activity === this) {
 			redirectTo.value = current.fullPath;
-			this.ctx.$router.router.push(this.ctx.$router.cache["home"] || "/");
+			this.ctx.$router.router.push(
+				this.ctx.$router.cache["home"] || "/",
+			);
 		}
 		return delete this.ctx.$router.pages[this.id];
 	}
@@ -203,7 +220,8 @@ export default class RouterService extends Service {
 		const initialTitle = document.title;
 		ctx.effect(() =>
 			this.router.afterEach((route) => {
-				const { name, fullPath } = this.router.currentRoute.value;
+				const { name, fullPath } =
+					this.router.currentRoute.value;
 				if (name) {
 					// 本应用的路由名均为字符串;reactive 收窄了索引签名,不含 symbol
 					this.cache[name as string] = fullPath;
@@ -211,7 +229,8 @@ export default class RouterService extends Service {
 				// 进入 activity 页面时更新标签页标题为 "页面名 | 原标题"
 				if (route.meta.activity) {
 					document.title = `${route.meta.activity.name}`;
-					if (initialTitle) document.title += ` | ${initialTitle}`;
+					if (initialTitle)
+						document.title += ` | ${initialTitle}`;
 				}
 			}),
 		);
@@ -254,7 +273,9 @@ export default class RouterService extends Service {
 	 */
 	slot(options: SlotOptions) {
 		options.order ??= 0;
-		const component = this.ctx.wrapComponent(options.component);
+		const component = this.ctx.wrapComponent(
+			options.component,
+		);
 		if (component) options.component = component;
 		if (options.when) {
 			const { when } = options;
@@ -272,7 +293,9 @@ export default class RouterService extends Service {
 
 	/** 注册 activity 页面（自动挂到 vue-router 与侧栏）；返回取消注册函数 */
 	page(options: Activity.Options) {
-		const component = this.ctx.wrapComponent(options.component);
+		const component = this.ctx.wrapComponent(
+			options.component,
+		);
 		if (component) options.component = component;
 		return this.ctx.effect(() => {
 			const activity = new Activity(this.ctx, options);