@koishi-ce/client 1.0.3 → 1.1.0

package/README.md

@@ -25,7 +25,7 @@ Koishi 控制台的浏览器端运行时与组件基座，移植自上游 [koish
 
 - CLI：`koishi-console build [root]`（`src/bin.ts`）——带 root 时构建单个插件的前端，否则执行宿主控制台总装（产物硬编码到 `plugins/webui/console/dist`，含共享 chunk 与样式）；
 - 编程式：`build(root, config)` 构建单个插件前端，`createServer(baseDir)` 创建 Vite 开发中间件；
-- `collectWorkspaceAliases()`：读取根 package.json 的 workspaces，为每个工作区包名建立指向其 `client/index.ts` 的别名——未被依赖的 workspace 包不会出现在 node_modules 链接里，必须显式映射才能被 bundler 解析。
+- `collectWorkspaceAliases()`（内部机制，未从包导出）：读取根 package.json 的 workspaces，为每个工作区包名建立指向其 `client/index.ts` 的别名——未被依赖的 workspace 包不会出现在 node_modules 链接里，必须显式映射才能被 bundler 解析。
 
 ## 许可证
 
@@ -49,7 +49,7 @@ The package is consumed as source code rather than shipped as a standalone runti
 
 - CLI: `koishi-console build [root]` — builds a single plugin frontend when a root is given, otherwise performs the host console assembly (output hardcoded to `plugins/webui/console/dist`).
 - Programmatic: `build(root, config)` and `createServer(baseDir)` (a Vite dev middleware).
-- `collectWorkspaceAliases()` — maps every workspace package to its `client/index.ts`; workspace packages absent from node_modules links can only be resolved through this explicit alias map.
+- `collectWorkspaceAliases()` (an internal mechanism, not exported from the package) — maps every workspace package to its `client/index.ts`; workspace packages absent from node_modules links can only be resolved through this explicit alias map.
 
 ## License
 

package/app/home/home.vue

@@ -16,14 +16,17 @@
       </k-slot>
     </el-scrollbar>
     <div v-else>
-      <k-card class="connect">正在连接到 Koishi 服务器……</k-card>
+      <k-card class="connect">{{ t('home.connecting') }}</k-card>
     </div>
   </k-layout>
 </template>
 
 <script lang="ts" setup>
 import { global, socket } from "@koishi-ce/client";
+import { useI18n } from "vue-i18n";
 import Welcome from "./welcome.vue";
+
+const { t } = useI18n();
 </script>
 
 <style lang="scss">

package/app/home/index.ts

@@ -14,7 +14,8 @@ export default function (ctx: Context) {
 	ctx.page({
 		id: "home",
 		path: "/",
-		name: "欢迎",
+		// name 传 getter：渲染层解析（MaybeRefOrGetter），随界面语言切换
+		name: () => ctx.$i18n.t("pages.home"),
 		icon: "activity:home",
 		order: 1000,
 		component: Home,

package/app/home/welcome.vue

@@ -4,25 +4,25 @@
 
 <!--
   欢迎卡片：文档 / 社区论坛等入口链接。
-  自带 zh-CN 与 en-US 两套文案（局部 vue-i18n 实例，独立于全局语言包），
+  文案走宿主全局词典（client/locales/，7 语种），
   其余扩展可通过 "welcome-choice" 插槽追加自定义入口。
 -->
 <template>
   <div class="k-card welcome">
-    <h1>{{ t('title') }}</h1>
-    <p>{{ t('description') }}</p>
+    <h1>{{ t('welcome.title') }}</h1>
+    <p>{{ t('welcome.description') }}</p>
     <div class="choices">
       <k-slot name="welcome-choice">
         <k-slot-item :order="1000">
           <a class="choice" href="https://koishi.chat" rel="noopener noreferer" target="_blank">
-            <h2>{{ t('action.docs.title') }}</h2>
-            <p>{{ t('action.docs.description') }}</p>
+            <h2>{{ t('welcome.docs.title') }}</h2>
+            <p>{{ t('welcome.docs.description') }}</p>
           </a>
         </k-slot-item>
         <k-slot-item :order="500">
           <a class="choice" href="https://k.ilharp.cc" rel="noopener noreferer" target="_blank">
-            <h2>{{ t('action.forum.title') }}</h2>
-            <p>{{ t('action.forum.description') }}</p>
+            <h2>{{ t('welcome.forum.title') }}</h2>
+            <p>{{ t('welcome.forum.description') }}</p>
           </a>
         </k-slot-item>
       </k-slot>
@@ -32,26 +32,9 @@
 
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import enUS from "./welcome.en-US.yml";
-import zhCN from "./welcome.zh-CN.yml";
 
-// 组件私有的双语文案：不依赖全局 i18n，确保欢迎页在任何语言环境下可用
-const { t, setLocaleMessage } = useI18n({
-	messages: {
-		"zh-CN": zhCN,
-		"en-US": enUS,
-	},
-});
-
-// 开发模式下 yml 文案改动即时热替换，无需整页刷新
-if (import.meta.hot) {
-	import.meta.hot.accept("./welcome.zh-CN.yml", (module) => {
-		setLocaleMessage("zh-CN", module.default);
-	});
-	import.meta.hot.accept("./welcome.en-US.yml", (module) => {
-		setLocaleMessage("en-US", module.default);
-	});
-}
+// 全局 composer：词典由宿主 $i18n 服务在挂载前注入
+const { t } = useI18n();
 </script>
 
 <style lang="scss">

package/app/index.ts

@@ -31,6 +31,12 @@ root.start();
 
 if (!global.static) {
 	// global.static 为真表示纯静态构建（无后端），跳过连接
-	const endpoint = new URL(global.endpoint, location.origin).toString();
-	connect(root, () => new WebSocket(endpoint.replace(/^http/, "ws")));
+	const endpoint = new URL(
+		global.endpoint,
+		location.origin,
+	).toString();
+	connect(
+		root,
+		() => new WebSocket(endpoint.replace(/^http/, "ws")),
+	);
 }

package/app/layout/header.vue

@@ -38,7 +38,10 @@
 </template>
 
 <script lang="ts" setup>
-import { type ActionContext, useMenu } from "@koishi-ce/client";
+import {
+	type ActionContext,
+	useMenu,
+} from "@koishi-ce/client";
 import { useRoute } from "vue-router";
 
 const props = defineProps<{
@@ -50,9 +53,14 @@ const props = defineProps<{
 
 // 溢出菜单按钮的点击触发器：打开 menuKey 对应的上下文菜单
 // （menuKey 为运行期字符串，这里断言为菜单键类型以复用字面量重载）
-const trigger = useMenu(props.menuKey as keyof ActionContext);
-
-defineEmits(["update:isLeftAsideOpen", "update:isRightAsideOpen"]);
+const trigger = useMenu(
+	props.menuKey as keyof ActionContext,
+);
+
+defineEmits([
+	"update:isLeftAsideOpen",
+	"update:isRightAsideOpen",
+]);
 
 const route = useRoute();
 </script>

package/app/layout/layout.vue

@@ -54,7 +54,10 @@
 </template>
 
 <script lang="ts" setup>
-import { type LegacyMenuItem, useContext } from "@koishi-ce/client";
+import {
+	type LegacyMenuItem,
+	useContext,
+} from "@koishi-ce/client";
 import { computed, ref, useSlots } from "vue";
 import { useRoute } from "vue-router";
 import LayoutHeader from "./header.vue";

package/app/layout/menu-item.vue

@@ -54,7 +54,9 @@ const scope = computed(() =>
 function toValue<T>(getter: MaybeGetter<T>): T {
 	if (typeof getter !== "function") return getter;
 	// 收窄到 MaybeGetter 的函数分支（以作用域为参的 getter）
-	return (getter as (current: typeof scope.value) => T)(scope.value);
+	return (getter as (current: typeof scope.value) => T)(
+		scope.value,
+	);
 }
 
 function trigger() {

package/app/settings/index.ts

@@ -16,7 +16,8 @@ import Theme from "./theme.vue";
 export default function (ctx: Context) {
 	ctx.page({
 		path: "/settings/:name*",
-		name: "用户设置",
+		// name / title 传 getter：渲染层解析，随界面语言切换
+		name: () => ctx.$i18n.t("pages.settings"),
 		icon: "activity:settings",
 		position: "bottom",
 		order: -100,
@@ -31,7 +32,7 @@ export default function (ctx: Context) {
 
 	ctx.settings({
 		id: "status",
-		title: "状态栏设置",
+		title: () => ctx.$i18n.t("settings.status"),
 		order: 800,
 	});
 

package/app/settings/settings.vue

@@ -5,12 +5,12 @@
 <!--
   用户设置页：左侧 el-tree 分组导航 + 右侧当前分组的内容。
   分组内的条目三种形态二选一渲染：组件型（component）、表单型（schema），
-  disabled 的条目直接跳过。
+  disabled 的条目直接跳过。分区标题支持 getter（随界面语言实时切换）。
 -->
 <template>
   <k-layout main="page-settings">
     <template #header>
-      {{ ctx.internal.settings[path][0]?.title }}
+      {{ toValue(ctx.internal.settings[path][0]?.title) }}
     </template>
 
     <template #left>
@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
 import { useConfig, useContext } from "@koishi-ce/client";
-import { computed } from "vue";
+import { computed, toValue } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
@@ -56,10 +56,12 @@ interface Tree {
 }
 
 const data = computed(() =>
-	Object.entries(ctx.internal.settings).map<Tree>(([id, [{ title }]]) => ({
-		id,
-		label: title,
-	})),
+	Object.entries(ctx.internal.settings).map<Tree>(
+		([id, [{ title }]]) => ({
+			id,
+			label: toValue(title),
+		}),
+	),
 );
 
 function handleClick(tree: Tree) {

package/app/settings/theme.vue

@@ -35,7 +35,10 @@
 
 <script setup lang="ts">
 import { useContext, useI18nText } from "@koishi-ce/client";
-import { type Schema, SchemaBase } from "@koishi-ce/components";
+import {
+	type Schema,
+	SchemaBase,
+} from "@koishi-ce/components";
 import { computed, type PropType } from "vue";
 
 defineProps({

package/app/status/loading.vue

@@ -9,7 +9,7 @@
 <template>
   <k-status v-if="progress < 1">
     <el-progress :indeterminate="!store.entry" :percentage="progress * 100">
-      正在加载页面组件
+      {{ t('loading.page') }}
     </el-progress>
   </k-status>
 </template>
@@ -17,11 +17,16 @@
 <script lang="ts" setup>
 import { store, useContext } from "@koishi-ce/client";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 const ctx = useContext();
+const { t } = useI18n();
 
 const progress = computed(() => {
 	const states = Object.values(ctx.$loader.extensions);
-	return states.filter((state) => state.done.value).length / states.length;
+	return (
+		states.filter((state) => state.done.value).length /
+		states.length
+	);
 });
 </script>

package/app/theme/activity/button.vue

@@ -33,7 +33,10 @@ const isDragging = ref(false);
 function handleDragStart(event: DragEvent) {
 	isDragging.value = true;
 	// 约定的拖拽协议：以 "activity:" 前缀 + 活动 id 标识被拖动的活动项
-	event.dataTransfer.setData("text/plain", `activity:${props.data.id}`);
+	event.dataTransfer.setData(
+		"text/plain",
+		`activity:${props.data.id}`,
+	);
 }
 
 function handleDragEnd(event: DragEvent) {

package/app/theme/activity/index.vue

@@ -72,7 +72,9 @@ const groups = computed(() => {
 			delete available[id];
 		}
 	}
-	const list = Object.values(available).sort(([a], [b]) => a.order - b.order);
+	const list = Object.values(available).sort(
+		([a], [b]) => a.order - b.order,
+	);
 	// 放不下时：从头部取出溢出项折叠成一个组，top 位优先、同位再按 order 排，
 	// 并以 "..." 图标作为该组的展示入口
 	if (list.length * unit > total) {
@@ -86,11 +88,17 @@ const groups = computed(() => {
 				return scale;
 			})
 			.flat();
-		hidden.unshift({ icon: "activity:ellipsis" } as Activity);
+		hidden.unshift({
+			icon: "activity:ellipsis",
+		} as Activity);
 	}
 	// top 区按 order 逆序输出（order 大者靠上），bottom 区保持正序
-	const top = list.filter(([data]) => data.position !== "bottom").reverse();
-	const bottom = list.filter(([data]) => data.position === "bottom");
+	const top = list
+		.filter(([data]) => data.position !== "bottom")
+		.reverse();
+	const bottom = list.filter(
+		([data]) => data.position === "bottom",
+	);
 	return { top, bottom, hidden };
 });
 

package/app/theme/activity/item.vue

@@ -38,7 +38,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type Activity, useConfig, useMenu } from "@koishi-ce/client";
+import {
+	type Activity,
+	useConfig,
+	useMenu,
+} from "@koishi-ce/client";
 import type { Placement } from "element-plus";
 import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -84,13 +88,23 @@ const config = useConfig();
 
 // 原型链保留键：这类键在普通对象上会触发原型链存取器，禁止作为配置键读写
 // （id 来自拖拽事件的 dataTransfer 文本，属外部输入）
-const UNSAFE_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+const UNSAFE_KEYS = new Set([
+	"__proto__",
+	"constructor",
+	"prototype",
+]);
 
 /** 取某活动的覆盖配置（不存在则创建）；保留键返回一次性空对象，防原型污染。
  * 守卫须用显式字符串比较（Set.has 形式 CodeQL 无法识别为阻断） */
-function ensureOverride(id: string): Record<string, unknown> {
+function ensureOverride(
+	id: string,
+): Record<string, unknown> {
 	const activities = (config.value.activities ??= {});
-	if (id === "__proto__" || id === "constructor" || id === "prototype") {
+	if (
+		id === "__proto__" ||
+		id === "constructor" ||
+		id === "prototype"
+	) {
 		return {};
 	}
 	return (activities[id] ??= {});

package/app/theme/activity/separator.vue

@@ -18,7 +18,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type Activity, useConfig, useContext } from "@koishi-ce/client";
+import {
+	type Activity,
+	useConfig,
+	useContext,
+} from "@koishi-ce/client";
 import { type ComputedRef, inject, ref } from "vue";
 
 type Position = "top" | "bottom";
@@ -28,7 +32,9 @@ const props = defineProps<{
 	position: Position;
 }>();
 
-const groups = inject("groups") as ComputedRef<Record<Position, Activity[][]>>;
+const groups = inject("groups") as ComputedRef<
+	Record<Position, Activity[][]>
+>;
 
 const hasDragOver = ref(false);
 
@@ -45,13 +51,23 @@ const ctx = useContext();
 
 // 原型链保留键：这类键在普通对象上会触发原型链存取器，禁止作为配置键读写
 // （id 来自拖拽事件的 dataTransfer 文本，属外部输入）
-const UNSAFE_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+const UNSAFE_KEYS = new Set([
+	"__proto__",
+	"constructor",
+	"prototype",
+]);
 
 /** 取某活动的覆盖配置（不存在则创建）；保留键返回一次性空对象，防原型污染。
  * 守卫须用显式字符串比较（Set.has 形式 CodeQL 无法识别为阻断） */
-function ensureOverride(id: string): Record<string, unknown> {
+function ensureOverride(
+	id: string,
+): Record<string, unknown> {
 	const activities = (config.value.activities ??= {});
-	if (id === "__proto__" || id === "constructor" || id === "prototype") {
+	if (
+		id === "__proto__" ||
+		id === "constructor" ||
+		id === "prototype"
+	) {
 		return {};
 	}
 	return (activities[id] ??= {});
@@ -63,7 +79,9 @@ function handleDrop(event: DragEvent) {
 	// 只响应活动栏自身的拖拽协议
 	if (!text.startsWith("activity:")) return;
 	const id = text.slice(9);
-	const list = groups.value[props.position].map(([item]) => item);
+	const list = groups.value[props.position].map(
+		([item]) => item,
+	);
 	const oldIndex = list.findIndex((item) => item.id === id);
 	// 落点即原位（含紧邻原位的前一格）时无需移动
 	if (
@@ -99,10 +117,12 @@ function handleDrop(event: DragEvent) {
 	// 介于两锚点之间的项按线性插值重算 order；
 	// 只有一侧锚点时按步长 100 单向递增 / 递减；两侧都没有则恢复默认
 	const anchorL = list.findLastIndex(
-		(item, i) => i < index && item.order === item.options.order,
+		(item, i) =>
+			i < index && item.order === item.options.order,
 	);
 	const anchorR = list.findIndex(
-		(item, i) => i > index && item.order === item.options.order,
+		(item, i) =>
+			i > index && item.order === item.options.order,
 	);
 	if (anchorL === -1) {
 		if (anchorR === -1) {
@@ -117,24 +137,36 @@ function handleDrop(event: DragEvent) {
 	} else {
 		if (anchorR === -1) {
 			let order = list[anchorL].options.order;
-			for (let index = anchorL + 1; index < list.length; index++) {
+			for (
+				let index = anchorL + 1;
+				index < list.length;
+				index++
+			) {
 				const override = ensureOverride(list[index].id);
 				override.order = order -= 100;
 			}
 		} else {
 			let orderL = list[anchorL].options.order;
 			let orderR = list[anchorR].options.order;
-			for (let index = anchorL + 1; index < anchorR; index++) {
+			for (
+				let index = anchorL + 1;
+				index < anchorR;
+				index++
+			) {
 				const override = ensureOverride(list[index].id);
 				override.order =
 					orderL +
-					((orderR - orderL) * (index - anchorL)) / (anchorR - anchorL);
+					((orderR - orderL) * (index - anchorL)) /
+						(anchorR - anchorL);
 			}
 		}
 	}
 
 	// 覆盖配置为空对象时删除该键，避免残留无意义的配置项
-	if (!Object.keys(override).length && !UNSAFE_KEYS.has(id)) {
+	if (
+		!Object.keys(override).length &&
+		!UNSAFE_KEYS.has(id)
+	) {
 		delete config.value.activities[id];
 	}
 }

package/app/theme/blank.vue

@@ -6,10 +6,16 @@
 <template>
   <div class="blank">
     <h1>404</h1>
-    <p>如果你看到了这个页面，说明控制台插件已经加载成功，但你尚未安装任何控制台扩展。</p>
+    <p>{{ t('blank.hint') }}</p>
   </div>
 </template>
 
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
 <style lang="scss" scoped>
 
 .blank {

package/app/theme/index.ts

@@ -8,7 +8,11 @@
  * - 注册活动栏右键菜单 "theme.activity" 及其动作（重置活动栏自定义配置）。
  */
 
-import { type Context, router, useConfig } from "@koishi-ce/client";
+import {
+	type Context,
+	router,
+	useConfig,
+} from "@koishi-ce/client";
 import App from "./index.vue";
 
 export default function (ctx: Context) {
@@ -35,7 +39,8 @@ export default function (ctx: Context) {
 			//   label: '活动栏设置',
 			// }, {
 			id: ".reset",
-			label: "重置活动栏",
+			// label 支持 getter（menu-item 渲染层 toValue 解析），随界面语言切换
+			label: () => ctx.$i18n.t("menu.resetActivity"),
 		},
 	]);
 }

package/app/theme/index.vue

@@ -14,7 +14,7 @@
       <component :is="Component"></component>
     </keep-alive>
   </router-view>
-  <div class="loading" v-else v-loading="true" element-loading-text="正在加载数据……"></div>
+  <div class="loading" v-else v-loading="true" :element-loading-text="t('loading.data')"></div>
   <status-bar></status-bar>
   <menu-list></menu-list>
 </template>
@@ -22,17 +22,21 @@
 <script lang="ts" setup>
 import { store } from "@koishi-ce/client";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import ActivityBar from "./activity/index.vue";
 import MenuList from "./menu/index.vue";
 import StatusBar from "./status.vue";
 
+const { t } = useI18n();
 const route = useRoute();
 
 // 页面就绪判定：未声明所需字段的页面恒为已就绪；
 // 否则要求 meta.activity.fields 中每个 store 字段都有数据
 const loaded = computed(() => {
 	if (!route.meta.activity?.fields) return true;
-	return route.meta.activity.fields.every((key) => store[key]);
+	return route.meta.activity.fields.every(
+		(key) => store[key],
+	);
 });
 </script>

package/app/theme/menu/menu-item.vue

@@ -21,7 +21,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type MaybeGetter, type MenuItem, useContext } from "@koishi-ce/client";
+import {
+	type MaybeGetter,
+	type MenuItem,
+	useContext,
+} from "@koishi-ce/client";
 import { computed } from "vue";
 
 const props = defineProps<MenuItem & { prefix: string }>();
@@ -55,8 +59,10 @@ const icon = computed(() => toValue(props.icon));
 function toValue<T>(getter: MaybeGetter<T>): T {
 	if (typeof getter !== "function") return getter;
 	// 收窄到 MaybeGetter 的函数分支（以作用域为参的 getter）
-	return (getter as (current: ReturnType<typeof ctx.$action.createScope>) => T)(
-		ctx.$action.createScope(),
-	);
+	return (
+		getter as (
+			current: ReturnType<typeof ctx.$action.createScope>,
+		) => T
+	)(ctx.$action.createScope());
 }
 </script>

package/app/theme/menu/menu.vue

@@ -17,7 +17,10 @@
 </template>
 
 <script lang="ts" setup>
-import { type ActiveMenu, useContext } from "@koishi-ce/client";
+import {
+	type ActiveMenu,
+	useContext,
+} from "@koishi-ce/client";
 import { ref } from "vue";
 import MenuItem from "./menu-item.vue";
 
@@ -31,9 +34,11 @@ const el = ref<HTMLElement>();
 // 结合菜单自身渲染后的实际宽高计算定位；尚未挂载时先隐藏避免闪烁
 const getStyle = () => {
 	if (!el.value) return { visibility: "hidden" };
-	const { height, width } = el.value.getBoundingClientRect();
-	const style: Partial<Record<"top" | "right" | "bottom" | "left", string>> =
-		{};
+	const { height, width } =
+		el.value.getBoundingClientRect();
+	const style: Partial<
+		Record<"top" | "right" | "bottom" | "left", string>
+	> = {};
 	if (props.relative.right + width > window.innerWidth) {
 		style.right = `${window.innerWidth - props.relative.left}px`;
 	} else {