From 3197390ed48365ce67c72948b6451602a2fc918d Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Tue, 8 Feb 2022 15:50:26 +0900 Subject: [PATCH] =?UTF-8?q?feat(client):=20=E8=87=AA=E3=82=A4=E3=83=B3?= =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=83=B3=E3=82=B9=E6=83=85=E5=A0=B1=E3=83=9A?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=A7=E3=83=81=E3=83=A3=E3=83=BC=E3=83=88?= =?UTF-8?q?=E3=82=92=E8=A6=8B=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 7 +++++++ packages/client/src/pages/about.vue | 27 +++++++++++++++++++++------ 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0fc416468..2e0ab4c24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,13 @@ You should also include the user name that made the change. --> +## 12.x.x (unreleased) + +### Improvements +- クライアント: 自インスタンス情報ページでチャートを見れるように @syuilo + +### Bugfixes + ## 12.103.1 (2022/02/02) ### Bugfixes diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index d5bab4baf..6cc2e387e 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -1,5 +1,5 @@ <template> -<MkSpacer :content-max="600" :margin-min="20"> +<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20"> <div class="_formRoot"> <div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"> <div class="content"> @@ -65,35 +65,50 @@ </FormSection> </div> </MkSpacer> +<MkSpacer v-else-if="tab === 'charts'" :content-max="1200" :margin-min="20"> + <MkInstanceStats :chart-limit="500" :detailed="true"/> +</MkSpacer> </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { ref, computed } from 'vue'; import { version, instanceName } from '@/config'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; import FormSuspense from '@/components/form/suspense.vue'; import FormSplit from '@/components/form/split.vue'; import MkKeyValue from '@/components/key-value.vue'; +import MkInstanceStats from '@/components/instance-stats.vue'; import * as os from '@/os'; import number from '@/filters/number'; import * as symbols from '@/symbols'; import { host } from '@/config'; import { i18n } from '@/i18n'; -const stats = ref(null); +let stats = $ref(null); +let tab = $ref('overview'); const initStats = () => os.api('stats', { }).then((res) => { - stats.value = res; + stats = res; }); defineExpose({ - [symbols.PAGE_INFO]: { + [symbols.PAGE_INFO]: computed(() => ({ title: i18n.ts.instanceInfo, icon: 'fas fa-info-circle', bg: 'var(--bg)', - }, + tabs: [{ + active: tab === 'overview', + title: i18n.ts.overview, + onClick: () => { tab = 'overview'; }, + }, { + active: tab === 'charts', + title: i18n.ts.charts, + icon: 'fas fa-chart-bar', + onClick: () => { tab = 'charts'; }, + },], + })), }); </script>