feat(status): view refactor

packages/plugin-status/client/index.ts

@@ -1,19 +1,4 @@
 import { ref } from 'vue'
 import type { Payload } from '~/server'
-import BotTable from './components/bot-table.vue'
-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 WordCloud from './components/word-cloud.vue'
-
-export {
-  BotTable,
-  GroupChart,
-  HistoryChart,
-  HourChart,
-  LoadChart,
-  WordCloud,
-}
 
 export const status = ref<Payload>(null)

packages/plugin-status/client/main.ts

@@ -1,15 +1,14 @@
-import { createApp, h } from 'vue'
-import { ElCard, ElButton, ElCollapseTransition } from 'element-plus'
+import { createApp } from 'vue'
+import { ElButton, ElCollapseTransition } from 'element-plus'
 import { THEME_KEY } from 'vue-echarts'
-import { createRouter, createWebHistory, RouterView } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Card from './components/card.vue'
-import Layout from './components/layout/index.vue'
+import App from './views/layout/index.vue'
 import { status } from '.'
 
 // for el-collapse-transition
 import 'element-plus/lib/theme-chalk/base.css'
 import 'element-plus/lib/theme-chalk/el-icon.css'
-import 'element-plus/lib/theme-chalk/el-card.css'
 import 'element-plus/lib/theme-chalk/el-button.css'
 
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
@@ -24,23 +23,21 @@ declare module 'vue-router' {
   }
 }
 
-const app = createApp(() => {
-  return h(Layout, [h(RouterView)])
-})
+const app = createApp(App)
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { path: '/', name: '仪表盘', meta: { icon: 'tachometer-alt' }, component: () => import('./views/home.vue') },
-    { path: '/plugin', name: '插件', meta: { icon: 'plug' }, component: () => import('./views/plugin/index.vue') },
+    { path: '/', name: '仪表盘', meta: { icon: 'tachometer-alt' }, component: () => import('./views/home/index.vue') },
+    { path: '/bots', name: '机器人', meta: { icon: 'robot' }, component: () => import('./views/bots.vue') },
+    { path: '/plugins', name: '插件', meta: { icon: 'plug' }, component: () => import('./views/plugins/index.vue') },
   ],
 })
 
 app.component('k-card', Card)
 
 app.provide(THEME_KEY, 'light')
 
-app.use(ElCard)
 app.use(ElButton)
 app.use(ElCollapseTransition)
 

packages/plugin-status/client/components/bot-table.vue → packages/plugin-status/client/views/bots.vue

@@ -1,5 +1,5 @@
 <template>
-  <k-card class="bot-table" title="账号数据">
+  <k-card v-if="status" class="bot-table" title="账号数据">
     <table v-if="status.bots.length">
       <tr>
         <th>平台名</th>
@@ -22,11 +22,9 @@
 
 <script lang="ts" setup>
 
-import type { Payload } from '~/server'
+import { status } from '~/client'
 import { defineProps } from 'vue'
 
-defineProps<{ status: Payload }>()
-
 const codes = ['运行中', '闲置', '离线', '网络异常', '服务器异常', '封禁中', '尝试连接']
 
 </script>

packages/plugin-status/client/views/home.vue → packages/plugin-status/client/views/home/index.vue

@@ -1,7 +1,6 @@
 <template>
   <template v-if="status">
     <load-chart :status="status"/>
-    <bot-table :status="status"/>
     <history-chart :status="status"/>
     <hour-chart :status="status"/>
     <group-chart :status="status"/>
@@ -11,6 +10,11 @@
 
 <script setup lang="ts">
 
-import { status, BotTable, GroupChart, HistoryChart, HourChart, LoadChart, WordCloud } from '..'
+import { status } from '~/client'
+import GroupChart from './group-chart.vue'
+import HistoryChart from './history-chart.vue'
+import HourChart from './hour-chart.vue'
+import LoadChart from './load-chart.vue'
+import WordCloud from './word-cloud.vue'
 
 </script>

packages/plugin-status/client/components/layout/index.vue → packages/plugin-status/client/views/layout/index.vue

@@ -12,7 +12,9 @@
       </li>
     </ul>
   </aside>
-  <main><slot/></main>
+  <main>
+    <router-view/>
+  </main>
 </template>
 
 <script lang="ts" setup>
@@ -73,7 +75,7 @@ aside {
 
   i {
     width: 1rem;
-    margin-right: 0.5rem;
+    margin-right: 1rem;
     text-align: center;
   }