feat(client): add client package

packages/client/.eslintrc.yml

@@ -0,0 +1,2 @@
+rules:
+  no-console: off

packages/client/app/home/home.vue

@@ -0,0 +1,49 @@
+<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">{{ global.messages?.connecting || '正在连接到 Koishi 服务器……' }}</k-card>
+    </div>
+  </k-layout>
+</template>
+
+<script lang="ts" setup>
+
+import { global, socket } from '@cordisjs/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>

packages/client/app/home/index.ts

@@ -0,0 +1,13 @@
+import { Context } from '@cordisjs/client'
+import Home from './home.vue'
+
+export default function (ctx: Context) {
+  ctx.page({
+    id: 'home',
+    path: '/',
+    name: '欢迎',
+    icon: 'activity:home',
+    order: 1000,
+    component: Home,
+  })
+}

packages/client/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.

packages/client/app/home/welcome.vue

@@ -0,0 +1,106 @@
+<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 zhCN from './welcome.zh-CN.yml'
+import enUS from './welcome.en-US.yml'
+
+const { t, setLocaleMessage } = useI18n({
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS,
+  },
+})
+
+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>

packages/client/app/home/welcome.zh-CN.yml

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

packages/client/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>

packages/client/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;
+  }
+}

packages/client/app/index.ts

@@ -0,0 +1,24 @@
+import { connect, global, root } from '@koishijs/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) {
+  const endpoint = new URL(global.endpoint, location.origin).toString()
+  connect(root, () => new WebSocket(endpoint.replace(/^http/, 'ws')))
+}