@koishi-ce/client 1.0.0

package/app/theme/menu/menu.vue

@@ -0,0 +1,45 @@
+<!--
+  单个浮动上下文菜单（页面模板中 <k-menu> 的内置实现）：
+  依据触发点的锚点矩形（props.relative）与自身实际尺寸，
+  逐轴选择向左 / 向右、向上 / 向下展开，避免菜单溢出视口。
+-->
+<template>
+  <div ref="el" class="k-menu" :style="getStyle()">
+    <template v-for="item of ctx.internal.menus[id]">
+      <div class="k-menu-separator" v-if="item.id === '@separator'"></div>
+      <menu-item v-else v-bind="{ prefix: id, ...item }"></menu-item>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type ActiveMenu, useContext } from "@koishi-ce/client";
+import { ref } from "vue";
+import MenuItem from "./menu-item.vue";
+
+const props = defineProps<ActiveMenu>();
+
+const ctx = useContext();
+
+const el = ref<HTMLElement>();
+
+// relative 携带触发点矩形的 left / right / bottom（相对视口），
+// 结合菜单自身渲染后的实际宽高计算定位；尚未挂载时先隐藏避免闪烁
+const getStyle = () => {
+	if (!el.value) return { visibility: "hidden" };
+	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 {
+		style.left = `${props.relative.right}px`;
+	}
+	if (props.relative.bottom + height > window.innerHeight) {
+		style.bottom = `0px`;
+	} else {
+		style.top = `${props.relative.bottom}px`;
+	}
+	return style;
+};
+</script>

package/app/theme/status.vue

@@ -0,0 +1,45 @@
+<!--
+  底部状态栏容器：左右两组插槽（status-left / status-right），
+  移动端（<=768px）整条隐藏。
+-->
+<template>
+  <footer class="layout-status">
+    <div><k-slot name="status-left"></k-slot></div>
+    <div><k-slot name="status-right"></k-slot></div>
+  </footer>
+</template>
+
+<style lang="scss">
+
+.layout-status {
+  position: fixed;
+  box-sizing: border-box;
+  z-index: 50;
+  bottom: 0;
+  height: var(--footer-height);
+  left: var(--activity-width);
+  right: 0;
+  background-color: var(--k-status-bg, var(--k-side-bg));
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-top: var(--k-status-divider, var(--k-color-divider-dark)) 1px solid;
+  transition: var(--color-transition);
+  font-size: 0.875rem;
+  line-height: var(--footer-height);
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+
+  > * {
+    display: inline-flex;
+  }
+
+  .el-progress-bar {
+    width: 120px;
+    margin-right: 2px;
+  }
+}
+
+</style>

package/app/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"extends": "../../../../tsconfig.client",
+	"include": ["."],
+	"compilerOptions": {
+		"alwaysStrict": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitOverride": true,
+		"allowUnreachableCode": false,
+		"allowUnusedLabels": false
+	}
+}

package/client/components/chat/image.vue

@@ -0,0 +1,20 @@
+<!--
+  chat-image：聊天消息中的图片。
+  普通点击打开内置大图查看器（overlay.vue，经 global 插槽全局挂载）；
+  按住 meta 键（macOS 为 Cmd）点击则在新标签页直接打开原图。
+-->
+<template>
+  <img class="chat-image" :src="src" @click="handleClick"/>
+</template>
+
+<script lang="ts" setup>
+import { shared } from "./utils";
+
+const props = defineProps<{ src: string }>();
+
+function handleClick(ev: MouseEvent) {
+	ev.preventDefault();
+	if (ev.metaKey) return window.open(props.src, "_blank");
+	shared.overlayImage = ev.target as HTMLImageElement;
+}
+</script>

package/client/components/chat/overlay.vue

@@ -0,0 +1,231 @@
+<!--
+  overlay.vue：全屏图片查看器（经 router 的 global 插槽挂载）。
+  打开时把图片从原位"飞入"屏幕中心（appear 阶段从原坐标过渡到居中），
+  关闭时回到原坐标；支持放大/缩小/旋转/复原，左右切换页面内相邻图片，
+  键盘操作：方向键切换、Esc 关闭、Enter 关闭并滚动定位到原图片。
+-->
+<template>
+  <transition name="overlay">
+    <div class="overlay-image-viewer" v-if="shared.overlayImage" @click="setImage(null)">
+      <span class="button left" :class="{ disabled: !siblings.prev }" @click.stop="setImage(siblings.prev)">
+        <k-icon name="chevron-left"/>
+      </span>
+      <span class="button right" :class="{ disabled: !siblings.next }" @click.stop="setImage(siblings.next)">
+        <k-icon name="chevron-right"/>
+      </span>
+      <span class="button bottom" @click.stop>
+        <el-tooltip placement="top" content="缩小" :offset="20">
+          <k-icon name="search-minus" @click="scale -= 0.2"/>
+        </el-tooltip>
+        <el-tooltip placement="top" content="放大" :offset="20">
+          <k-icon name="search-plus" @click="scale += 0.2"/>
+        </el-tooltip>
+        <el-tooltip placement="top" content="复原" :offset="20">
+          <k-icon name="expand" @click="scale = 1, rotate = 0"/>
+        </el-tooltip>
+        <el-tooltip placement="top" content="逆时针旋转" :offset="20">
+          <k-icon name="undo" @click="rotate -= 90"/>
+        </el-tooltip>
+        <el-tooltip placement="top" content="逆时针旋转" :offset="20">
+          <k-icon name="redo" @click="rotate += 90"/>
+        </el-tooltip>
+      </span>
+      <transition appear :duration="1" @before-appear="moveToOrigin" @after-appear="moveToCenter">
+        <img ref="img" :style="{ transform }" :src="shared.overlayImage.src"/>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { shared } from "./utils";
+
+// 用户手动调整的缩放与旋转量（复原即回到 1 / 0）
+const scale = ref(1);
+const rotate = ref(0);
+const img = ref<HTMLImageElement>(null);
+
+const transform = computed(() => {
+	return `scale(${scale.value}) rotate(${rotate.value}deg)`;
+});
+
+// 相邻图片：以文档中 .chat-image（chat/image.vue 渲染）的出现顺序为准
+const siblings = computed(() => {
+	if (!shared.overlayImage) return;
+	const elements = Array.from(
+		document.querySelectorAll<HTMLImageElement>(".chat-image"),
+	);
+	const index = elements.indexOf(shared.overlayImage);
+	return {
+		prev: elements[index - 1],
+		next: elements[index + 1],
+	};
+});
+
+// 初始（适配屏幕）缩放比：按视口剩余空间把图片等比缩小，不放大
+const defaultScale = computed(() => {
+	const { naturalHeight, naturalWidth } = shared.overlayImage;
+	const maxHeight = innerHeight - paddingVertical * 2;
+	const maxWidth = innerWidth - paddingHorizontal * 2;
+	return Math.min(1, maxHeight / naturalHeight, maxWidth / naturalWidth);
+});
+
+// 切换/关闭查看器时重置手动缩放与旋转；
+// 关闭（el 为空）时把图片移回原位，切换则平滑过渡到新图居中
+watch(
+	() => shared.overlayImage,
+	(el, origin) => {
+		scale.value = 1;
+		rotate.value = 0;
+		if (!el) return moveToOrigin(img.value, origin);
+		if (img.value) {
+			img.value.style.transition = "0.3s transform ease";
+			moveToCenter(img.value);
+		}
+	},
+);
+
+function setImage(el: HTMLImageElement) {
+	if (el === undefined) return;
+	shared.overlayImage = el;
+}
+
+/** 把大图元素摆到原图片所在的位置与尺寸（关闭时的"飞回"动画终点） */
+function moveToOrigin(el: HTMLImageElement, origin = shared.overlayImage) {
+	const { height, width } = origin;
+	const { left, top } = origin.getBoundingClientRect();
+	el.style.width = `${width}px`;
+	el.style.height = `${height}px`;
+	el.style.left = `${left}px`;
+	el.style.top = `${top}px`;
+	el.style.transition = "0.3s ease";
+}
+
+// 视口四周预留的边距（当前为 0，即允许图片占满视口）
+const paddingVertical = 0;
+const paddingHorizontal = 0;
+
+/** 把图片按适配缩放比居中摆放到视口中央 */
+function moveToCenter(el: HTMLImageElement) {
+	const { naturalHeight, naturalWidth } = shared.overlayImage;
+	const scale = defaultScale.value;
+	const width = naturalWidth * scale;
+	const height = naturalHeight * scale;
+	el.style.width = `${width}px`;
+	el.style.height = `${height}px`;
+	el.style.left = `${(innerWidth - width) / 2}px`;
+	el.style.top = `${(innerHeight - height) / 2}px`;
+}
+
+onMounted(() => {
+	document.addEventListener("keydown", onKeyDown);
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener("keydown", onKeyDown);
+});
+
+// 全局键盘操作：查看器打开期间接管方向键 / Esc / Enter
+function onKeyDown(ev: KeyboardEvent) {
+	if (!shared.overlayImage) return;
+	ev.preventDefault();
+	if (ev.key === "ArrowUp" || ev.key === "ArrowLeft") {
+		setImage(siblings.value.prev);
+	} else if (ev.key === "ArrowDown" || ev.key === "ArrowRight") {
+		setImage(siblings.value.next);
+	} else if (ev.key === "Escape") {
+		setImage(null);
+	} else if (ev.key === "Enter") {
+		// 关闭并把页面滚动到原图所在位置，便于继续浏览消息
+		shared.overlayImage.offsetParent.scrollIntoView({ behavior: "smooth" });
+		setImage(null);
+	}
+}
+</script>
+
+<style lang="scss">
+
+@use "sass:math";
+
+$buttonSize: 3rem;
+$buttonBg: #303133;
+
+.overlay-enter-from, .overlay-leave-to {
+  opacity: 0;
+}
+
+.overlay-enter, .overlay-leave {
+  opacity: 1;
+}
+
+.overlay-image-viewer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  transition: 0.4s opacity ease;
+  user-select: none;
+  background-color: #0006;
+
+  .button {
+    position: absolute;
+    border-radius: $buttonSize;
+    cursor: pointer;
+    user-select: none;
+    opacity: 0.5;
+    font-size: math.div($buttonSize, 2);
+    height: $buttonSize;
+    background-color: $buttonBg;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    transition: 0.4s ease;
+
+    .k-icon {
+      transition: 0.4s ease;
+      height: 1.25rem;
+    }
+
+    &:not(.disabled):hover {
+      opacity: 0.8;
+    }
+
+    &:not(.disabled) .k-icon:hover {
+      color: rgba(244, 244, 245, .8);
+    }
+
+    @each $tag in left, right {
+      &.#{$tag} {
+        top: 50%;
+        z-index: 2000;
+        transform: translateY(-50%);
+        width: $buttonSize;
+        #{$tag}: $buttonSize;
+        .k-icon {
+          margin-#{$tag}: -3px;
+        }
+      }
+    }
+
+    &.bottom {
+      z-index: 2000;
+      bottom: $buttonSize;
+      width: $buttonSize * 6;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  img {
+    position: absolute;
+  }
+}
+
+</style>

package/client/components/chat/utils.ts

@@ -0,0 +1,6 @@
+import { reactive } from "vue";
+
+/** chat 子模块的跨组件共享状态：当前在大图查看器（overlay）中展示的图片 */
+export const shared = reactive({
+	overlayImage: null as HTMLImageElement | null,
+});

package/client/components/common/index.ts

@@ -0,0 +1,11 @@
+import type { App } from "vue";
+import Button from "./k-button.vue";
+import Hint from "./k-hint.vue";
+import Tab from "./k-tab.vue";
+
+/** 注册公共基础组件（k-button / k-hint / k-tab） */
+export default function (app: App) {
+	app.component("k-button", Button);
+	app.component("k-hint", Hint);
+	app.component("k-tab", Tab);
+}

package/client/components/common/k-button.vue

@@ -0,0 +1,127 @@
+<!--
+  k-button：通用按钮组件。
+  通过 type（primary / warning / success / error）着色，支持 solid（实心）、
+  frameless（无边框）、round（圆形）与 disabled（禁用）等形态；
+  禁用时不触发 click 事件、不显示 title 提示。
+-->
+<template>
+  <button
+    @click.prevent="onClick"
+    :title="disabled ? '' : title"
+    :class="['k-button', type, { disabled, solid, round, frameless }]">
+    <slot/>
+  </button>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+	type: {
+		type: String,
+		default: "primary",
+	},
+	solid: Boolean,
+	frameless: Boolean,
+	title: String,
+	round: Boolean,
+	disabled: Boolean,
+});
+
+const emit = defineEmits(["click"]);
+
+function onClick(event: MouseEvent) {
+	// 禁用态吞掉点击，不向外发 click 事件
+	if (props.disabled) return;
+	emit("click", event);
+}
+</script>
+
+<style lang="scss">
+
+@mixin apply-color($name) {
+  &.#{$name} {
+    background-color: var(--#{$name}) !important;
+    &:hover {
+      background-color: var(--#{$name}-tint) !important;
+    }
+    &:active {
+      background-color: var(--#{$name}-shade) !important;
+    }
+  }
+}
+
+.k-button {
+  font-size: 14px;
+  font-weight: bolder;
+  line-height: 20px;
+  appearance: none;
+  user-select: none;
+  border: none;
+  border-radius: 0.4em;
+  cursor: pointer;
+  padding: 0.4em 1em;
+  transition: var(--color-transition);
+  display: inline-block;
+
+  // 默认形态：透明背景 + 描边
+  color: var(--el-button-text-color);
+  border: 1px solid var(--k-color-border);
+  background-color: transparent;
+
+  &.round {
+    border-radius: 50%;
+  }
+  &:focus {
+    outline: 0;
+  }
+  &.disabled {
+    cursor: default;
+  }
+
+  &.disabled {
+    color: var(--k-color-disabled);
+    border-color: var(--k-color-border);
+  }
+  &:hover:not(.disabled) {
+    color: var(--k-text-dark);
+    border: 1px solid var(--k-color-border);
+  }
+
+  &.solid {
+    color: #ffffff !important;
+    border-color: transparent !important;
+    &.disabled {
+      background-color: var(--k-color-disabled) !important;
+    }
+    &:not(.disabled) {
+      @include apply-color(primary);
+      @include apply-color(warning);
+      @include apply-color(success);
+      @include apply-color(error);
+    }
+  }
+
+  // 无边框形态：常用于行内文字按钮
+  &.frameless {
+    padding: 0;
+    border-color: transparent;
+    background-color: transparent;
+    &:hover {
+      border-color: transparent;
+      background-color: transparent;
+    }
+    &.primary {
+      color: var(--el-color-primary);
+    }
+    &.error {
+      color: var(--el-color-error);
+    }
+    &.success {
+      color: var(--el-color-success);
+    }
+    &.disabled {
+      color: var(--k-color-disabled);
+    }
+  }
+}
+
+</style>

package/client/components/common/k-hint.vue

@@ -0,0 +1,62 @@
+<!--
+  k-hint：带悬浮提示（tooltip）的问号图标。
+  默认是纯展示的提示图标；当传入 v-model（modelValue 有值）时变为
+  可点击的开关图标（常用于控制帮助文案或更多信息的显隐）。
+-->
+<template>
+  <el-tooltip :placement="placement">
+    <template #content>
+      <div class="k-hint-content">
+        <slot></slot>
+      </div>
+    </template>
+    <span class="k-hint" :class="{ active: modelValue, pointer }" @click="onClick">
+      <k-icon :name="name"/>
+    </span>
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps({
+	placement: String,
+	modelValue: {},
+	name: { type: String, default: "question-empty" },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// modelValue 被显式传入时才呈现手型光标并响应点击（开关语义）
+const pointer = computed(() => props.modelValue !== undefined);
+
+function onClick() {
+	if (!pointer.value) return;
+	emit("update:modelValue", !props.modelValue);
+}
+</script>
+
+<style lang="scss">
+
+.k-hint {
+  opacity: 0.5;
+  color: var(--k-text-normal);
+  margin-left: 0.25rem;
+  transition: 0.3s ease;
+  vertical-align: -2px;
+
+  &:hover, &.active {
+    opacity: 1;
+  }
+}
+
+.k-hint.pointer {
+  cursor: pointer;
+}
+
+.k-hint-content {
+  line-height: 1.5;
+  max-width: 20rem;
+}
+
+</style>

package/client/components/common/k-tab.vue

@@ -0,0 +1,50 @@
+<!--
+  k-tab：水平选项卡（文字式切换器）。
+  data 为 "键 → 文案" 映射，点击某项时通过 v-model 更新选中键；
+  相邻项之间以 "|" 分隔，选中项高亮。
+-->
+<template>
+  <span class="k-horizontal-tab">
+    <span class="k-horizontal-tab-item"
+      v-for="(label, key) in data" :key="key"
+      :class="{ active: modelValue === key }"
+      @click="$emit('update:modelValue', key)">{{ label }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+	data: Record<string | number, string>;
+	modelValue: string | number;
+}>();
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss">
+
+.k-horizontal-tab-item {
+  cursor: pointer;
+  position: relative;
+  color: var(--k-color-disabled);
+  transition: color 0.3s ease;
+
+  & + & {
+    margin-left: 2rem;
+
+    &::before {
+      content: '|';
+      color: var(--k-color-disabled);
+      left: -1rem;
+      position: absolute;
+      transition: color 0.3s ease;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.active {
+    color: var(--fg1);
+  }
+}
+
+</style>

package/client/components/dynamic.vue

@@ -0,0 +1,61 @@
+<!--
+  dynamic.vue：动态 schema 表单控件（any + dynamic 角色）。
+  适用于"具体结构由服务端决定"的配置项：本地 schema 只带 meta.extra.name，
+  实际 schema 由服务端经 schema 数据服务下发（store.schema），
+  在此"水合"为完整 Schema 后转交 k-schema 渲染；
+  未取到时回退到 schema-base 按本地（不完整）schema 渲染。
+-->
+<template>
+  <k-schema
+    v-if="inner"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    :schema="{ ...inner, meta: { ...schema.meta, ...inner.meta } }"
+    :initial="initial"
+    :disabled="disabled"
+    :prefix="prefix"
+  >
+    <template #title><slot name="title"></slot></template>
+    <template #prefix><slot name="prefix"></slot></template>
+    <template #suffix><slot name="suffix"></slot></template>
+  </k-schema>
+
+  <schema-base
+    v-else
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    :schema="schema"
+    :initial="initial"
+    :disabled="disabled"
+    :prefix="prefix"
+  >
+    <template #title><slot name="title"></slot></template>
+    <template #desc><slot name="desc"></slot></template>
+    <template #menu><slot name="menu"></slot></template>
+  </schema-base>
+</template>
+
+<script setup lang="ts">
+import { Schema, SchemaBase } from "@koishi-ce/components";
+import { computed, type PropType } from "vue";
+import { store } from "../data";
+
+const props = defineProps({
+	schema: {} as PropType<Schema>,
+	modelValue: {} as PropType<unknown>,
+	disabled: {} as PropType<boolean>,
+	prefix: {} as PropType<string>,
+	initial: {} as PropType<unknown>,
+	extra: {} as PropType<unknown>,
+});
+
+defineEmits(["update:modelValue"]);
+
+// 按本地 schema 标注的名称，从服务端下发的 schema 仓库中取出完整定义；
+// 元信息做一层合并，保留本地的 meta 覆盖权
+const inner = computed(() => {
+	const hydrated = store.schema?.[props.schema?.meta.extra?.name];
+	return hydrated && new Schema(hydrated);
+});
+</script>
+

package/client/components/icons/activity/default.vue

@@ -0,0 +1,6 @@
+<!-- activity 侧栏页面默认图标（注册名 "activity:default"）：仪表盘样式 -->
+<template>
+  <svg class="k-icon" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M0 80C0 53.49 21.49 32 48 32H144C170.5 32 192 53.49 192 80V176C192 202.5 170.5 224 144 224H48C21.49 224 0 202.5 0 176V80zM32 80V176C32 184.8 39.16 192 48 192H144C152.8 192 160 184.8 160 176V80C160 71.16 152.8 64 144 64H48C39.16 64 32 71.16 32 80zM0 336C0 309.5 21.49 288 48 288H144C170.5 288 192 309.5 192 336V432C192 458.5 170.5 480 144 480H48C21.49 480 0 458.5 0 432V336zM32 336V432C32 440.8 39.16 448 48 448H144C152.8 448 160 440.8 160 432V336C160 327.2 152.8 320 144 320H48C39.16 320 32 327.2 32 336zM400 32C426.5 32 448 53.49 448 80V176C448 202.5 426.5 224 400 224H304C277.5 224 256 202.5 256 176V80C256 53.49 277.5 32 304 32H400zM400 64H304C295.2 64 288 71.16 288 80V176C288 184.8 295.2 192 304 192H400C408.8 192 416 184.8 416 176V80C416 71.16 408.8 64 400 64zM256 336C256 309.5 277.5 288 304 288H400C426.5 288 448 309.5 448 336V432C448 458.5 426.5 480 400 480H304C277.5 480 256 458.5 256 432V336zM288 336V432C288 440.8 295.2 448 304 448H400C408.8 448 416 440.8 416 432V336C416 327.2 408.8 320 400 320H304C295.2 320 288 327.2 288 336z"/>
+  </svg>
+</template>