online: fix compatibility issues

packages/client/client/components/layout/content.vue

@@ -12,7 +12,7 @@
   --content-padding: 3rem;
 
   margin: auto;
-  max-width: 60rem;
+  max-width: 55rem;
   box-sizing: border-box;
   padding: 3rem var(--content-padding);
 

packages/online/app/components/home.vue

@@ -61,10 +61,6 @@ import { global, socket } from '@koishijs/client'
 
 <style lang="scss" scoped>
 
-.k-content {
-  max-width: 55rem;
-}
-
 h1 {
   line-height: 40px;
   font-size: 32px;
@@ -103,6 +99,11 @@ p a {
 .k-card {
   width: 200px;
   display: inline-block;
+  transition: var(--color-transition);
+
+  &:hover {
+    background-color: var(--k-hover-bg);
+  }
 
   :deep(.k-card-body) {
     margin: 1rem 0;

packages/online/app/components/instances.vue

@@ -1,24 +1,28 @@
 <template>
-  <k-card class="instances">
-    <template #header>
-      <span>实例管理</span>
-      <k-button class="right" @click="activate()">添加</k-button>
-    </template>
-    <table>
-      <tr class="instance" v-for="key in instances" :key="key">
-        <td class="name">
-          {{ key }}
-          <template v-if="data.current === key">(运行中)</template>
-        </td>
-        <td class="actions">
-          <span>
-            <k-icon v-if="data.current !== key" name="start" @click="activate(key)"></k-icon>
-            <k-icon v-if="data.current !== key" name="delete" @click="remove(key)"></k-icon>
-          </span>
-        </td>
-      </tr>
-    </table>
-  </k-card>
+  <k-layout>
+    <k-content>
+      <k-card class="instances">
+        <template #header>
+          <span>实例管理</span>
+          <k-button class="right" @click="activate()">添加</k-button>
+        </template>
+        <table>
+          <tr class="instance" v-for="key in instances" :key="key">
+            <td class="name">
+              {{ key }}
+              <template v-if="data.current === key">(运行中)</template>
+            </td>
+            <td class="actions">
+              <span>
+                <k-icon v-if="data.current !== key" name="start" @click="activate(key)"></k-icon>
+                <k-icon v-if="data.current !== key" name="delete" @click="remove(key)"></k-icon>
+              </span>
+            </td>
+          </tr>
+        </table>
+      </k-card>
+    </k-content>
+  </k-layout>
 </template>
 
 <script lang="ts" setup>

packages/online/scripts/dev.ts

@@ -114,7 +114,9 @@ async function createVite() {
         '@minatojs/driver-sqlite': '@minatojs/driver-sqlite/src/index.ts',
         '@minatojs/sql-utils': '@minatojs/sql-utils/src/index.ts',
         'path': 'rollup-plugin-node-polyfills/polyfills/path',
-        'fs/promises': '@koishijs/fs/src/promises/index.ts',
+        'chokidar': '@koishijs/fs/src/index.ts',
+        'fs/constants': '@koishijs/fs/src/constants.ts',
+        'fs/promises': '@koishijs/fs/src/promises.ts',
         'fs': '@koishijs/fs/src/index.ts',
         'os': '@koishijs/os/src/index.ts',
         'url': '@koishijs/url/src/index.ts',

plugins/commands/src/service.ts

@@ -60,7 +60,13 @@ export default class CommandProvider extends DataService<CommandData[]> {
     ctx.on('command-removed', this.update)
     ctx.on('dispose', this.update.cancel)
 
-    ctx.console.addEntry({
+    ctx.console.addEntry(process.env.KOISHI_BASE ? [
+      process.env.KOISHI_BASE + '/dist/index.js',
+      process.env.KOISHI_BASE + '/dist/style.css',
+    ] : process.env.KOISHI_ENV === 'browser' ? [
+      // @ts-ignore
+      import.meta.url.replace(/\/src\/[^/]+$/, '/client/index.ts'),
+    ] : {
       dev: resolve(__dirname, '../client/index.ts'),
       prod: resolve(__dirname, '../dist'),
     })

plugins/config/src/node/packages.ts

@@ -10,7 +10,7 @@ class PackageScanner extends LocalScanner {
     super(service.ctx.baseDir)
   }
 
-  async onError(error: any) {
+  async onError(error: any, name: string) {
     logger.warn('failed to resolve %c', name)
     logger.warn(error)
   }

plugins/market/client/components/install.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-if="store.dependencies" v-model="showDialog" class="install-panel" @closed="active = ''">
+  <el-dialog v-model="showDialog" class="install-panel" @closed="active = ''">
     <template v-if="active" #header="{ titleId, titleClass }">
       <span :id="titleId" :class="[titleClass, '']">
         {{ active.replace(/(koishi-|^@koishijs\/)plugin-/, '') + (workspace ? ' (工作区)' : '') }}
@@ -99,7 +99,7 @@ const version = ref<string>()
 
 const selectVersion = computed({
   get() {
-    if (store.dependencies[active.value]?.request === version.value) {
+    if (store.dependencies?.[active.value]?.request === version.value) {
       return version.value + ' (当前)'
     } else {
       return version.value
@@ -110,7 +110,7 @@ const selectVersion = computed({
   },
 })
 
-const unchanged = computed(() => version.value === store.dependencies[active.value]?.request)
+const unchanged = computed(() => version.value === store.dependencies?.[active.value]?.request)
 const current = computed(() => store.dependencies?.[active.value]?.resolved)
 const local = computed(() => store.packages?.[active.value])
 const versions = computed(() => store.registry?.[active.value])
@@ -124,7 +124,7 @@ watch(active, (name) => {
 const workspace = computed(() => {
   // workspace plugins:     dependencies ? packages √
   // workspace non-plugins: dependencies √ packages ×
-  return store.dependencies[active.value]?.workspace || local.value?.workspace
+  return store.dependencies?.[active.value]?.workspace || local.value?.workspace
 })
 
 const data = computed(() => {
@@ -164,7 +164,7 @@ watch(() => active.value, (value) => {
   showDialog.value = !!value
   if (!value) return
   version.value = config.value.override[active.value]
-    || store.dependencies[active.value]?.request
+    || store.dependencies?.[active.value]?.request
     || store.market.data[value].package.version
 }, { immediate: true })