From 89583a357814ce286637da45e8d1f25d99d5fb23 Mon Sep 17 00:00:00 2001 From: Shigma <1700011071@pku.edu.cn> Date: Sun, 14 Mar 2021 23:50:19 +0800 Subject: [PATCH 01/23] feat(status): init router --- .../plugin-status/client/components/card.vue | 51 +++++++++++++++++++ .../client/components/layout/index.vue | 25 +++++++++ .../client/components/load-bar.vue | 22 ++++---- .../client/components/load-chart.vue | 4 +- .../client/components/plugin-list.vue | 17 ------- packages/plugin-status/client/index.ts | 3 +- packages/plugin-status/client/main.ts | 20 +++++++- .../client/{app.vue => views/home.vue} | 22 ++------ .../client/views/plugin/index.vue | 20 ++++++++ .../plugin}/plugin-view.vue | 0 packages/plugin-status/package.json | 2 + 11 files changed, 131 insertions(+), 55 deletions(-) create mode 100644 packages/plugin-status/client/components/card.vue create mode 100644 packages/plugin-status/client/components/layout/index.vue delete mode 100644 packages/plugin-status/client/components/plugin-list.vue rename packages/plugin-status/client/{app.vue => views/home.vue} (52%) create mode 100644 packages/plugin-status/client/views/plugin/index.vue rename packages/plugin-status/client/{components => views/plugin}/plugin-view.vue (100%) diff --git a/packages/plugin-status/client/components/card.vue b/packages/plugin-status/client/components/card.vue new file mode 100644 index 0000000000..2070d09a7e --- /dev/null +++ b/packages/plugin-status/client/components/card.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/plugin-status/client/components/layout/index.vue b/packages/plugin-status/client/components/layout/index.vue new file mode 100644 index 0000000000..366b6fad4b --- /dev/null +++ b/packages/plugin-status/client/components/layout/index.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/plugin-status/client/components/load-bar.vue b/packages/plugin-status/client/components/load-bar.vue index 2f181d5337..9b049da8ab 100644 --- a/packages/plugin-status/client/components/load-bar.vue +++ b/packages/plugin-status/client/components/load-bar.vue @@ -47,10 +47,12 @@ const caption = computed(() => { .body { width: 100%; - height: 1.6rem; + height: 1.2rem; position: relative; display: inline; - background-color: #f6f8fa; + background-color: #474d84; + border-radius: 4px; + overflow: hidden; &.busy > .caption, &.free .used > .caption { display: none; } @@ -61,31 +63,25 @@ const caption = computed(() => { position: relative; float: left; transition: 0.6s ease; - &:hover { - z-index: 10; - cursor: pointer; - box-shadow: 0 0 4px #000c; - } } .used { - background-color: rgb(50,197,233); + background-color: #2477ff; color: white; &:hover { - background-color: rgb(55,216,255); + background-color: lighten(#2477ff, 10%); } } .app { - background-color: rgb(255,159,127); + background-color: #e49400; &:hover { - background-color: rgb(255,174,139); + background-color: lighten(#e49400, 10%); } } .caption { - left: 0.6rem; - line-height: 1.7; + left: 1rem; position: relative; } } diff --git a/packages/plugin-status/client/components/load-chart.vue b/packages/plugin-status/client/components/load-chart.vue index da53efde3b..20d1215822 100644 --- a/packages/plugin-status/client/components/load-chart.vue +++ b/packages/plugin-status/client/components/load-chart.vue @@ -1,8 +1,8 @@ diff --git a/packages/plugin-status/client/index.ts b/packages/plugin-status/client/index.ts index 9969a59f4a..f785bb7a1a 100644 --- a/packages/plugin-status/client/index.ts +++ b/packages/plugin-status/client/index.ts @@ -5,7 +5,6 @@ import GroupChart from './components/group-chart.vue' import HistoryChart from './components/history-chart.vue' import HourChart from './components/hour-chart.vue' import LoadChart from './components/load-chart.vue' -import PluginList from './components/plugin-list.vue' import WordCloud from './components/word-cloud.vue' export { @@ -14,7 +13,6 @@ export { HistoryChart, HourChart, LoadChart, - PluginList, WordCloud, } @@ -22,6 +20,7 @@ export function useStatus() { const status = ref(null) onMounted(async () => { + // eslint-disable-next-line no-undef const socket = new WebSocket(KOISHI_ENDPOINT) socket.onmessage = (ev) => { const data = JSON.parse(ev.data) diff --git a/packages/plugin-status/client/main.ts b/packages/plugin-status/client/main.ts index 3d5240b0e5..f5e5c693cc 100644 --- a/packages/plugin-status/client/main.ts +++ b/packages/plugin-status/client/main.ts @@ -1,7 +1,10 @@ import { createApp } from 'vue' import { ElCard, ElButton, ElCollapseTransition } from 'element-plus' import { THEME_KEY } from 'vue-echarts' -import Layout from '~/layout' +import { createRouter, createWebHistory } from 'vue-router' +import Card from './components/card.vue' +import Layout from './components/layout/index.vue' +import Home from './views/home.vue' // for el-collapse-transition import 'element-plus/lib/theme-chalk/base.css' @@ -11,7 +14,18 @@ import 'element-plus/lib/theme-chalk/el-button.css' import './index.scss' -const app = createApp(Layout) +const app = createApp(Home) + +const router = createRouter({ + history: createWebHistory(), + routes: [ + { path: '/', component: Home }, + { path: '/plugin', component: () => import('./views/plugin/index.vue') }, + ], +}) + +app.component('k-layout', Layout) +app.component('k-card', Card) app.provide(THEME_KEY, 'light') @@ -19,4 +33,6 @@ app.use(ElCard) app.use(ElButton) app.use(ElCollapseTransition) +app.use(router) + app.mount('#app') diff --git a/packages/plugin-status/client/app.vue b/packages/plugin-status/client/views/home.vue similarity index 52% rename from packages/plugin-status/client/app.vue rename to packages/plugin-status/client/views/home.vue index 60bbb8a1d6..e39d7e0a59 100644 --- a/packages/plugin-status/client/app.vue +++ b/packages/plugin-status/client/views/home.vue @@ -1,34 +1,18 @@ - - diff --git a/packages/plugin-status/client/views/plugin/index.vue b/packages/plugin-status/client/views/plugin/index.vue new file mode 100644 index 0000000000..8362425657 --- /dev/null +++ b/packages/plugin-status/client/views/plugin/index.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/plugin-status/client/components/plugin-view.vue b/packages/plugin-status/client/views/plugin/plugin-view.vue similarity index 100% rename from packages/plugin-status/client/components/plugin-view.vue rename to packages/plugin-status/client/views/plugin/plugin-view.vue diff --git a/packages/plugin-status/package.json b/packages/plugin-status/package.json index 1e1eb0eff8..bab736be59 100644 --- a/packages/plugin-status/package.json +++ b/packages/plugin-status/package.json @@ -36,6 +36,7 @@ "koishi-test-utils": "^6.0.0-beta.10" }, "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.2", "@types/ws": "^7.4.0", "@vitejs/plugin-vue": "^1.1.5", "@vue/compiler-sfc": "^3.0.7", @@ -47,6 +48,7 @@ "vite": "^2.0.5", "vue": "^3.0.7", "vue-echarts": "^6.0.0-rc.3", + "vue-router": "^4.0.5", "ws": "^7.4.3" } } From c8df0fa9f27e6373603d5fa0c5ed02ae3b4dbe72 Mon Sep 17 00:00:00 2001 From: Shigma <1700011071@pku.edu.cn> Date: Mon, 15 Mar 2021 02:18:04 +0800 Subject: [PATCH 02/23] feat(status): use custom card component --- .../client/components/bot-table.vue | 14 +++++------ .../plugin-status/client/components/card.vue | 14 +++++++---- .../client/components/group-chart.vue | 4 ++-- .../client/components/history-chart.vue | 4 ++-- .../client/components/hour-chart.vue | 4 ++-- .../client/components/layout/index.vue | 11 ++++----- .../client/components/load-bar.vue | 14 ++++++----- .../client/components/word-cloud.vue | 4 ++-- packages/plugin-status/client/index.ts | 20 ++-------------- packages/plugin-status/client/main.ts | 23 ++++++++++++++----- packages/plugin-status/client/views/home.vue | 8 +++---- .../client/views/plugin/index.vue | 18 +++++---------- .../client/views/plugin/plugin-view.vue | 2 +- 13 files changed, 65 insertions(+), 75 deletions(-) diff --git a/packages/plugin-status/client/components/bot-table.vue b/packages/plugin-status/client/components/bot-table.vue index 972a41ab28..3185b7779f 100644 --- a/packages/plugin-status/client/components/bot-table.vue +++ b/packages/plugin-status/client/components/bot-table.vue @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/packages/plugin-status/client/components/word-cloud.vue b/packages/plugin-status/client/components/word-cloud.vue index 374d9ca148..9f0c338678 100644 --- a/packages/plugin-status/client/components/word-cloud.vue +++ b/packages/plugin-status/client/components/word-cloud.vue @@ -1,5 +1,5 @@