mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-20 22:15:28 +02:00
Code Releases Activity

fix(frontend): 一部のグリッドのページネーションが正しく表示されない問題を修正 (#16147)

Browse Source 
* fix(frontend): 一部のグリッドのページネーションが正しく表示されない問題を修正

* update changelog

* fix
This commit is contained in:
かっこかり
2025-06-03 17:20:11 +09:00
committed by GitHub
parent 5537558fa7
commit 810a609df4
4 changed files with 130 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/src/pages/admin/files.vue
View File

@@ -34,6 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
@@ -41,12 +42,13 @@ import * as os from '@/os.js';
import { lookupFile } from '@/utility/admin-lookup.js';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import type { PagingCtx } from '@/composables/use-pagination.js';
const origin = ref('local');
const origin = ref<Misskey.entities.AdminDriveFilesRequest['origin']>('local');
const type = ref<string | null>(null);
const searchHost = ref('');
const userId = ref('');
const viewMode = ref('grid');
const viewMode = ref<'grid' | 'list'>('grid');
const pagination = {
endpoint: 'admin/drive/files' as const,
limit: 10,
@@ -56,7 +58,7 @@ const pagination = {
origin: origin.value,
hostname: (searchHost.value && searchHost.value !== '') ? searchHost.value : null,
})),
};
} satisfies PagingCtx<'admin/drive/files'>;
function clear() {
os.confirm({

85
packages/frontend/src/pages/instance-info.vue
View File

@@ -7,9 +7,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<div v-if="instance" class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div v-if="tab === 'overview'" class="_gaps_m">
<div class="fnfelxur">
<img :src="faviconUrl" alt="" class="icon"/>
<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
<div :class="$style.faviconAndName">
<img :src="faviconUrl" alt="" :class="$style.icon"/>
<span :class="$style.name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
</div>
<div style="display: flex; flex-direction: column; gap: 1em;">
<MkKeyValue :copy="host" oneline>
@@ -90,8 +90,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</FormSection>
</div>
<div v-else-if="tab === 'chart'" class="_gaps_m">
<div class="cmhjzshl">
<div class="selects">
<div>
<div :class="$style.selects">
<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
@@ -106,19 +106,21 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
</MkSelect>
</div>
<div class="charts">
<div class="label">{{ i18n.tsx.recentNHours({ n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
<div class="label">{{ i18n.tsx.recentNDays({ n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
<div>
<div :class="$style.label">{{ i18n.tsx.recentNHours({ n: 90 }) }}</div>
<MkChart :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
<div :class="$style.label">{{ i18n.tsx.recentNDays({ n: 90 }) }}</div>
<MkChart :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
</div>
</div>
</div>
<div v-else-if="tab === 'users'" class="_gaps_m">
<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
<MkUserCardMini :user="user"/>
</MkA>
<MkPagination v-slot="{ items }" :pagination="usersPagination">
<div :class="$style.users">
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${user.updatedAt ? dateString(user.updatedAt) : 'unknown'}`" :to="`/admin/user/${user.id}`">
<MkUserCardMini :user="user"/>
</MkA>
</div>
</MkPagination>
</div>
<div v-else-if="tab === 'raw'" class="_gaps_m">
@@ -180,7 +182,7 @@ const usersPagination = {
hostname: props.host,
},
offsetMode: true,
} satisfies PagingCtx;
} satisfies PagingCtx<'admin/show-users' | 'users'>;
if (iAmModerator) {
watch(moderationNote, async () => {
@@ -281,7 +283,7 @@ const headerTabs = computed(() => [{
key: 'overview',
title: i18n.ts.overview,
icon: 'ti ti-info-circle',
}, {
}, ...(iAmModerator ? [{
key: 'chart',
title: i18n.ts.charts,
icon: 'ti ti-chart-line',
@@ -289,7 +291,7 @@ const headerTabs = computed(() => [{
key: 'users',
title: i18n.ts.users,
icon: 'ti ti-users',
}, {
}] : []), {
key: 'raw',
title: 'Raw',
icon: 'ti ti-code',
@@ -301,34 +303,31 @@ definePage(() => ({
}));
</script>
<style lang="scss" scoped>
.fnfelxur {
<style lang="scss" module>
.faviconAndName {
display: flex;
align-items: center;
> .icon {
display: block;
margin: 0 16px 0 0;
height: 64px;
border-radius: 8px;
}
> .name {
word-break: break-all;
}
}
.cmhjzshl {
> .selects {
display: flex;
margin: 0 0 16px 0;
}
> .charts {
> .label {
margin-bottom: 12px;
font-weight: bold;
}
}
.icon {
display: block;
margin: 0 16px 0 0;
height: 64px;
border-radius: 8px;
}
.name {
word-break: break-all;
}
.selects {
display: flex;
margin: 0 0 16px 0;
}
.label {
margin-bottom: 12px;
font-weight: bold;
}
.users {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
grid-gap: 12px;
}
</style>