@koishi-ce/client 1.0.0

package/app/home/home.vue

@@ -0,0 +1,51 @@
+<!--
+  控制台首页：WebSocket 就绪后渲染 "home" 插槽内容（默认为欢迎卡片），
+  未连接时显示连接提示卡片。
+-->
+<template>
+  <k-layout :main="`darker page-home${socket ? '' : ' loading'}`">
+    <el-scrollbar v-if="socket">
+      <k-slot name="home">
+        <k-slot-item :order="1000">
+          <welcome></welcome>
+        </k-slot-item>
+      </k-slot>
+    </el-scrollbar>
+    <div v-else>
+      <k-card class="connect">正在连接到 Koishi 服务器……</k-card>
+    </div>
+  </k-layout>
+</template>
+
+<script lang="ts" setup>
+import { global, socket } from "@koishi-ce/client";
+import Welcome from "./welcome.vue";
+</script>
+
+<style lang="scss">
+
+.page-home {
+  &.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .k-card.welcome {
+    margin: var(--card-margin);
+  }
+
+  .k-card.connect {
+    width: 400px;
+    max-width: 400px;
+    text-align: center;
+    line-height: 2;
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+</style>

package/app/home/index.ts

@@ -0,0 +1,18 @@
+/**
+ * 首页插件：将 welcome 欢迎页注册为根路由 "/"。
+ * order 取极大值（活动栏 top 组渲染时按 order 逆序输出，故首页位于最顶部）。
+ */
+
+import type { Context } from "@koishi-ce/client";
+import Home from "./home.vue";
+
+export default function (ctx: Context) {
+	ctx.page({
+		id: "home",
+		path: "/",
+		name: "欢迎",
+		icon: "activity:home",
+		order: 1000,
+		component: Home,
+	});
+}

package/app/home/welcome.en-US.yml

@@ -0,0 +1,9 @@
+title: Welcome to Koishi！
+description: Your chatbot is ready to go. 点击下面的任一选项，开启你的 Koishi 之旅吧。
+action:
+  docs:
+    title: Documentation
+    description: The official documentation contains everything you want to know.
+  forum:
+    title: Forum
+    description: If you run into problems, you can always ask for help on the forum.

package/app/home/welcome.vue

@@ -0,0 +1,111 @@
+<!--
+  欢迎卡片：文档 / 社区论坛等入口链接。
+  自带 zh-CN 与 en-US 两套文案（局部 vue-i18n 实例，独立于全局语言包），
+  其余扩展可通过 "welcome-choice" 插槽追加自定义入口。
+-->
+<template>
+  <div class="k-card welcome">
+    <h1>{{ t('title') }}</h1>
+    <p>{{ t('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>
+          </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>
+          </a>
+        </k-slot-item>
+      </k-slot>
+    </div>
+  </div>
+</template>
+
+<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);
+	});
+}
+</script>
+
+<style lang="scss">
+
+.page-home .welcome {
+  --welcome-title: 2.5rem;
+  --welcome-padding: 3rem 3rem;
+  --welcome-choice-padding: 0.5rem 1.5rem;
+  --welcome-gap: 2rem;
+
+  padding: var(--welcome-padding);
+
+  h1 {
+    font-size: var(--welcome-title);
+    margin-top: 0;
+  }
+
+  h1 + p {
+    margin: var(--welcome-gap) 0;
+  }
+
+  .choices {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--welcome-gap);
+  }
+
+  .choice {
+    flex: 1 0 auto;
+    display: inline-block;
+    width: 280px;
+    box-sizing: border-box;
+    padding: var(--welcome-choice-padding);
+    border: 1px solid var(--k-color-divider);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: var(--color-transition);
+
+    &:hover {
+      background-color: var(--k-side-color);
+    }
+
+    h2 {
+      font-size: 1.25rem;
+      margin-top: 1rem;
+    }
+
+    p {
+      font-size: 0.9375rem;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    --welcome-title: 2rem;
+    --welcome-padding: 1.5rem 1.5rem;
+    --welcome-gap: 1.5rem;
+    --welcome-choice-padding: 0.5rem 1.5rem;
+  }
+}
+
+</style>

package/app/home/welcome.zh-CN.yml

@@ -0,0 +1,9 @@
+title: 欢迎使用 Koishi！
+description: 你的机器人已经准备就绪。点击下面的任一选项，开启你的 Koishi 之旅吧。
+action:
+  docs:
+    title: 阅读文档
+    description: 开始阅读官方文档。官方文档里包含了你想要了解的全部内容。
+  forum:
+    title: 前往论坛
+    description: 前往论坛与其他用户交流。如果你遇到了问题，可以在这里寻求帮助。

package/app/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Koishi 控制台</title>
+    <link rel="icon" href="/assets/logo.png" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/index.ts"></script>
+  </body>
+</html>

package/app/index.scss

@@ -0,0 +1,64 @@
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-family);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--fg1);
+  background-color: var(--k-page-bg);
+  position: relative;
+  transition: color 0.3s ease, background-color 0.3s ease;
+}
+
+code {
+  font-family: var(--font-family-code);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+p, ul {
+  margin: 1em 0;
+  line-height: 1.7;
+}
+
+table {
+  text-align: center;
+  width: 100%;
+  border-collapse: collapse;
+
+  td, th {
+    padding: .5em 1em;
+  }
+
+  tr {
+    border-top: 1px solid var(--k-color-divider);
+    transition: border-color 0.3s ease;
+  }
+
+  tr:last-child {
+    border-bottom: 1px solid var(--k-color-divider);
+  }
+}
+
+.markdown {
+  a, code a {
+    color: var(--k-text-active);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  code {
+    color: var(--k-text-normal);
+    padding: 0.25rem 0.5rem;
+    background-color: var(--k-page-bg);
+    border-radius: 3px;
+    overflow-wrap: break-word;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+}

package/app/index.ts

@@ -0,0 +1,32 @@
+/**
+ * 控制台前端宿主应用入口（scripts/client.ts 总装构建的主入口）。
+ *
+ * 依次注册内置的功能插件（首页 / 布局 / 设置 / 状态栏 / 全局样式 / 主题），
+ * 启动应用根上下文后，在非静态模式下与 Koishi 服务端建立 WebSocket 连接。
+ */
+
+import { connect, global, root } from "@koishi-ce/client";
+import home from "./home";
+import layout from "./layout";
+import settings from "./settings";
+import status from "./status";
+import styles from "./styles";
+import theme from "./theme";
+
+import "virtual:uno.css";
+import "./index.scss";
+
+root.plugin(home);
+root.plugin(layout);
+root.plugin(settings);
+root.plugin(status);
+root.plugin(styles);
+root.plugin(theme);
+
+root.start();
+
+if (!global.static) {
+	// global.static 为真表示纯静态构建（无后端），跳过连接
+	const endpoint = new URL(global.endpoint, location.origin).toString();
+	connect(root, () => new WebSocket(endpoint.replace(/^http/, "ws")));
+}

package/app/layout/header.vue

@@ -0,0 +1,187 @@
+<!--
+  布局顶栏：左侧标题（默认取当前路由名）、右侧菜单区，
+  移动端额外提供侧栏开关按钮与溢出菜单（"..."）按钮。
+-->
+<template>
+  <div class="layout-header" :class="{ 'has-menu': menuKey }">
+    <div
+      class="toggle-sidebar-button"
+      role="button"
+      tabindex="0"
+      @click="$emit('update:isLeftAsideOpen', !isLeftAsideOpen)"
+    >
+      <div class="icon">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+    <div class="left">
+      <slot name="left">{{ route.name }}</slot>
+    </div>
+    <div class="right">
+      <slot name="right"></slot>
+    </div>
+    <div class="toggle-menu-button"
+      v-if="menuKey"
+      role="button"
+      tabindex="1"
+      @click.stop="trigger($event, menuData)"
+    >
+      <k-icon name="ellipsis"></k-icon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type ActionContext, useMenu } from "@koishi-ce/client";
+import { useRoute } from "vue-router";
+
+const props = defineProps<{
+	isLeftAsideOpen: boolean;
+	isRightAsideOpen: boolean;
+	menuKey?: string;
+	menuData?: unknown;
+}>();
+
+// 溢出菜单按钮的点击触发器：打开 menuKey 对应的上下文菜单
+// （menuKey 为运行期字符串，这里断言为菜单键类型以复用字面量重载）
+const trigger = useMenu(props.menuKey as keyof ActionContext);
+
+defineEmits(["update:isLeftAsideOpen", "update:isRightAsideOpen"]);
+
+const route = useRoute();
+</script>
+
+<style lang="scss">
+
+.toggle-sidebar-button {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 1rem;
+  display: none;
+  cursor: pointer;
+}
+
+.toggle-sidebar-button .icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 1.25rem;
+  height: 100%;
+  cursor: inherit;
+
+  span {
+    display: inline-block;
+    width: 100%;
+    height: 2px;
+    border-radius: 2px;
+    background-color: var(--fg1);
+    transition: transform 0.3s ease;
+
+    &:nth-child(2) {
+      margin: 6px 0;
+    }
+  }
+}
+
+.toggle-menu-button {
+  display: none;
+  height: 100%;
+  width: var(--header-height);
+  align-items: center;
+  justify-content: center;
+
+  .k-icon {
+    height: 1.25rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .toggle-sidebar-button {
+    display: block;
+  }
+
+  .toggle-menu-button {
+    display: flex;
+  }
+
+  .layout-header.has-menu .right {
+    display: none;
+  }
+}
+
+.layout-header {
+  position: relative;
+  box-sizing: border-box;
+  height: var(--header-height);
+  flex: 0 0 auto;
+  background-color: inherit;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: var(--k-color-divider-dark) 1px solid;
+  transition: var(--color-transition);
+  font-weight: bolder;
+
+  .left {
+    margin-left: var(--header-height);
+    padding-left: 0.5rem;
+  }
+
+  .right {
+    margin-right: 0.5rem;
+    flex: 0 0 auto;
+  }
+
+  .menu-item {
+    position: relative;
+    width: 4rem;
+    height: var(--header-height);
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: var(--color-transition);
+
+    &.active {
+      color: var(--k-color-primary);
+    }
+
+    &.spin {
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    &.disabled {
+      opacity: 0.3;
+      pointer-events: none;
+
+      @media screen and (max-width: 768px) {
+        display: none;
+      }
+    }
+
+    .menu-icon {
+      height: 1.125rem;
+    }
+
+    @media screen and (max-width: 768px) {
+      width: 3rem;
+    }
+  }
+}
+
+</style>

package/app/layout/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 布局插件：向全局 "layout" 插槽注册三栏布局组件。
+ * order 取极小值保证它先于其它同插槽内容排序（作为页面骨架）。
+ */
+
+import type { Context } from "@koishi-ce/client";
+import Layout from "./layout.vue";
+
+export default function (ctx: Context) {
+	ctx.slot({
+		type: "layout",
+		component: Layout,
+		order: -1000,
+	});
+}