feat(console): adjust empty and loading

packages/core/package.json

@@ -39,6 +39,6 @@
   "dependencies": {
     "@koishijs/utils": "^5.0.0",
     "fastest-levenshtein": "^1.0.12",
-    "schemastery": "^2.4.0"
+    "schemastery": "^2.4.1"
   }
 }

plugins/frontend/components/client/icons/index.ts

@@ -28,6 +28,7 @@ import HeartEmpty from './svg/heart-empty.vue'
 import HeartFull from './svg/heart-full.vue'
 import History from './svg/history.vue'
 import InfoFull from './svg/info-full.vue'
+import Koishi from './svg/koishi.vue'
 import LayerGroup from './svg/layer-group.vue'
 import Link from './svg/link.vue'
 import Moon from './svg/moon.vue'
@@ -81,6 +82,7 @@ registerIcon('heart-empty', HeartEmpty)
 registerIcon('heart-full', HeartFull)
 registerIcon('history', History)
 registerIcon('info-full', InfoFull)
+registerIcon('koishi', Koishi)
 registerIcon('layer-group', LayerGroup)
 registerIcon('link', Link)
 registerIcon('moon', Moon)

plugins/frontend/components/client/icons/svg/koishi.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M256,0C114.62,0,0,114.62,0,256S114.62,512,256,512,512,397.38,512,256,397.38,0,256,0ZM455.48,276a40,40,0,0,1-33.07,21.45,280.06,280.06,0,0,1-39.12,58.33,8,8,0,0,0-1.06,8.9L401,401l-36.37-18.77a8,8,0,0,0-8.9,1.06,280.06,280.06,0,0,1-58.33,39.12A40,40,0,0,1,276,455.48a40.16,40.16,0,0,0,4-25,278,278,0,0,1-61.42,17.71A25,25,0,0,1,193.87,471a25,25,0,0,0,8.69-20.66,281.77,281.77,0,0,1-56,.5C301.54,432,432,301.54,450.84,146.55a281.77,281.77,0,0,1-.5,56A25,25,0,0,0,471,193.87a25,25,0,0,1-22.85,24.65,278,278,0,0,1-17.71,61.42A40.16,40.16,0,0,0,455.48,276Z"/>
+  </svg>
+</template>

plugins/frontend/components/client/index.ts

@@ -3,9 +3,9 @@ import {
   ElButton,
   ElInput,
   ElInputNumber,
-  ElEmpty,
+  ElLoading,
+  ElMessage,
   ElRadio,
-  ElRadioGroup,
   ElScrollbar,
   ElSelect,
   ElSlider,
@@ -23,9 +23,8 @@ import notice from './notice'
 import 'element-plus/es/components/button/style/css'
 import 'element-plus/es/components/input/style/css'
 import 'element-plus/es/components/input-number/style/css'
-import 'element-plus/es/components/empty/style/css'
+import 'element-plus/es/components/loading/style/css'
 import 'element-plus/es/components/radio/style/css'
-import 'element-plus/es/components/radio-group/style/css'
 import 'element-plus/es/components/scrollbar/style/css'
 import 'element-plus/es/components/select/style/css'
 import 'element-plus/es/components/slider/style/css'
@@ -34,7 +33,8 @@ import 'element-plus/es/components/tooltip/style/css'
 import 'element-plus/es/components/tree/style/css'
 import './style.scss'
 
-export { ElMessage as message } from 'element-plus'
+export const loading = ElLoading.service
+export const message = ElMessage
 
 export * from './common'
 export * from './form'
@@ -46,7 +46,7 @@ export default function (app: App) {
   app.use(ElButton)
   app.use(ElInput)
   app.use(ElInputNumber)
-  app.use(ElEmpty)
+  app.use(ElLoading)
   app.use(ElRadio)
   app.use(ElScrollbar)
   app.use(ElSelect)

plugins/frontend/components/client/layout/empty.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="k-empty">
+    <div class="image">
+      <k-icon name="koishi"></k-icon>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+
+.k-empty {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 2rem 0;
+  gap: 1.5rem;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+
+  .image {
+    width: 10rem;
+    color: var(--page-bg);
+    transition: color 0.3s ease;
+
+    svg {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+</style>

plugins/frontend/components/client/layout/index.ts

@@ -3,6 +3,7 @@ import CardAside from './card-aside.vue'
 import CardNumeric from './card-numeric.vue'
 import Card from './card.vue'
 import Content from './content.vue'
+import Empty from './empty.vue'
 import TabGroup from './tab-group.vue'
 import TabItem from './tab-item.vue'
 
@@ -11,6 +12,7 @@ export default function (app: App) {
   app.component('k-numeric', CardNumeric)
   app.component('k-card', Card)
   app.component('k-content', Content)
+  app.component('k-empty', Empty)
   app.component('k-tab-group', TabGroup)
   app.component('k-tab-item', TabItem)
 }

plugins/frontend/components/client/style.scss

@@ -8,6 +8,8 @@ $white: #ffffff;
   --border: #e2e2e4;
   --border-dark: #c8c9cc;
   --card-bg: #ffffff;
+  --page-bg: #f2f3f5;
+  --loading-mask-bg: #f2f3f5bf;
 
   @mixin apply-color($name, $base) {
     --#{$name}: #{$base};
@@ -27,6 +29,8 @@ html.dark {
   --active: #ffffff;
   --border: #4f515cbf;
   --card-bg: #2f3034;
+  --page-bg: #202225;
+  --loading-mask-bg: #202225bf;
 
   @mixin apply-color($name, $base) {
     --#{$name}: #{$base};
@@ -60,6 +64,11 @@ html.dark {
   --el-input-bg-color: transparent;
 }
 
+.el-loading-mask {
+  background-color: var(--loading-mask-bg);
+  transition: 0.3s ease;
+}
+
 .el-radio {
   height: 1.2rem;
 }

plugins/frontend/components/index.d.ts

@@ -1,8 +1,11 @@
 import { App, Component } from 'vue'
+import { ElLoading, ElMessage } from 'element-plus'
 import Schema from 'schemastery'
 
 export { Schema }
-export { ElMessage as message } from 'element-plus'
+
+export declare const loading: typeof ElLoading['service']
+export declare const message: typeof ElMessage
 
 export function registerIcon(name: string, component: Component): void
 

plugins/frontend/components/package.json

@@ -23,7 +23,7 @@
     "vue": "^3.2.21"
   },
   "devDependencies": {
-    "schemastery": "^2.4.0",
+    "schemastery": "^2.4.1",
     "unplugin-element-plus": "^0.2.0"
   }
 }

plugins/frontend/console/client/index.scss

@@ -18,7 +18,6 @@ $white: #ffffff;
 
   --hover-inset: 0 0 2px inset #0002;
 
-  --page-bg: var(--bg2);
   --card-shadow: 0 6px 10px -4px rgb(0 0 0 / 15%);
 
   --menu-fg: var(--fg1);
@@ -49,16 +48,10 @@ html.dark {
   --fg2: #dcddde;
   --fg3: #b9bbbe;
 
-  --page-bg: var(--bg1);
-
   --menu-fg: var(--fg3);
   --hover-bg: var(--bg3);
 }
 
-.el-empty {
-  height: 100%;
-}
-
 .k-menu-item {
   display: block;
   position: relative;

plugins/frontend/console/client/layout/index.vue

@@ -6,7 +6,7 @@
         <component :is="Component"/>
       </keep-alive>
     </router-view>
-    <p v-else>正在加载数据……</p>
+    <div class="loading" v-else v-loading="true" element-loading-text="正在加载数据……"></div>
   </main>
   <k-view name="global"></k-view>
 </template>
@@ -65,6 +65,10 @@ main.layout-main {
   &.sidebar-hidden {
     margin-left: 0;
   }
+
+  .loading {
+    height: 100vh;
+  }
 }
 
 p, ul {

plugins/frontend/dataview/client/index.vue

@@ -11,9 +11,10 @@
     <div v-if="tables">
       {{ tables[current] }}
     </div>
-    <el-empty v-else description="你还没有安装数据库支持">
+    <k-empty v-else>
+      <div>你还没有安装数据库支持</div>
       <k-button solid>安装数据库</k-button>
-    </el-empty>
+    </k-empty>
   </k-card-aside>
 </template>
 

plugins/frontend/manager/client/bots/index.vue

@@ -9,10 +9,13 @@
       </el-scrollbar>
     </template>
     <template v-if="current === null">
-      <el-empty v-if="botCount" description="当前未选择机器人"></el-empty>
-      <el-empty v-else description="当前没有配置任何机器人">
+      <k-empty v-if="botCount">
+        <div>当前未选择机器人</div>
+      </k-empty>
+      <k-empty v-else>
+        <div>当前没有配置任何机器人</div>
         <k-button solid @click="current = ''">添加机器人</k-button>
-      </el-empty>
+      </k-empty>
     </template>
     <k-content v-else class="bot-profile">
       <bot-settings :current="current" :key="current"></bot-settings>

plugins/frontend/manager/client/dependencies/index.vue

@@ -27,8 +27,8 @@
 
 import { computed } from 'vue'
 import { store, send } from '~/client'
-import { config, state, overrideCount } from '../utils'
-import { message } from '~/components'
+import { config, overrideCount } from '../utils'
+import { message, loading } from '~/components'
 import PackageView from './package.vue'
 
 const names = computed(() => {
@@ -40,7 +40,9 @@ const names = computed(() => {
 })
 
 async function install() {
-  state.downloading = true
+  const instance = loading({
+    text: '正在更新依赖……',
+  })
   try {
     const code = await send('install', config.override)
     if (code === 0) {
@@ -51,7 +53,7 @@ async function install() {
   } catch (err) {
     message.error('安装超时！')
   } finally {
-    state.downloading = false
+    instance.close()
   }
 }
 

plugins/frontend/manager/client/index.ts

@@ -4,17 +4,11 @@ import Bots from './bots/index.vue'
 import Settings from './settings/index.vue'
 import Dependencies from './dependencies/index.vue'
 import Market from './market/index.vue'
-import Overlay from './dependencies/overlay.vue'
 import { overrideCount } from './utils'
 
 import './style.scss'
 
 export default (ctx: Context) => {
-  ctx.addView({
-    type: 'global',
-    component: Overlay,
-  })
-
   ctx.addView({
     type: 'numeric',
     order: 100,

plugins/frontend/manager/client/utils.ts

@@ -35,7 +35,6 @@ watch(store.packages, (value) => {
 }, { immediate: true })
 
 interface ManagerState {
-  downloading?: boolean
 }
 
 export const state = reactive<ManagerState>({})