mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-08 23:23:08 +02:00
feat(client): 自インスタンス情報ページでチャートを見れるように
This commit is contained in:
parent
5792eea1b1
commit
3197390ed4
2 changed files with 28 additions and 6 deletions
|
@ -10,6 +10,13 @@
|
||||||
You should also include the user name that made the change.
|
You should also include the user name that made the change.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
## 12.x.x (unreleased)
|
||||||
|
|
||||||
|
### Improvements
|
||||||
|
- クライアント: 自インスタンス情報ページでチャートを見れるように @syuilo
|
||||||
|
|
||||||
|
### Bugfixes
|
||||||
|
|
||||||
## 12.103.1 (2022/02/02)
|
## 12.103.1 (2022/02/02)
|
||||||
|
|
||||||
### Bugfixes
|
### Bugfixes
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<MkSpacer :content-max="600" :margin-min="20">
|
<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20">
|
||||||
<div class="_formRoot">
|
<div class="_formRoot">
|
||||||
<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
|
<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
@ -65,35 +65,50 @@
|
||||||
</FormSection>
|
</FormSection>
|
||||||
</div>
|
</div>
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
|
<MkSpacer v-else-if="tab === 'charts'" :content-max="1200" :margin-min="20">
|
||||||
|
<MkInstanceStats :chart-limit="500" :detailed="true"/>
|
||||||
|
</MkSpacer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { version, instanceName } from '@/config';
|
import { version, instanceName } from '@/config';
|
||||||
import FormLink from '@/components/form/link.vue';
|
import FormLink from '@/components/form/link.vue';
|
||||||
import FormSection from '@/components/form/section.vue';
|
import FormSection from '@/components/form/section.vue';
|
||||||
import FormSuspense from '@/components/form/suspense.vue';
|
import FormSuspense from '@/components/form/suspense.vue';
|
||||||
import FormSplit from '@/components/form/split.vue';
|
import FormSplit from '@/components/form/split.vue';
|
||||||
import MkKeyValue from '@/components/key-value.vue';
|
import MkKeyValue from '@/components/key-value.vue';
|
||||||
|
import MkInstanceStats from '@/components/instance-stats.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import number from '@/filters/number';
|
import number from '@/filters/number';
|
||||||
import * as symbols from '@/symbols';
|
import * as symbols from '@/symbols';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
const stats = ref(null);
|
let stats = $ref(null);
|
||||||
|
let tab = $ref('overview');
|
||||||
|
|
||||||
const initStats = () => os.api('stats', {
|
const initStats = () => os.api('stats', {
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
stats.value = res;
|
stats = res;
|
||||||
});
|
});
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
[symbols.PAGE_INFO]: {
|
[symbols.PAGE_INFO]: computed(() => ({
|
||||||
title: i18n.ts.instanceInfo,
|
title: i18n.ts.instanceInfo,
|
||||||
icon: 'fas fa-info-circle',
|
icon: 'fas fa-info-circle',
|
||||||
bg: 'var(--bg)',
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue