feat: drive cleaner (#10366)
* feat: drive-cleaner * Update CHANGELOG.md
This commit is contained in:
CyberRex
GitHub
parent
4a989f7ebb
commit
1d6f43aa30
@ -43,6 +43,7 @@
|
||||
- Bookwyrmのユーザーのプロフィールページで「リモートで表示」をタップしても反応がない問題を修正
|
||||
- 非ログイン時の「Misskeyについて」の表示を修正
|
||||
- PC版にて「設定」「コントロールパネル」のリンクを2度以上続けてクリックした際に空白のページが表示される問題を修正
|
||||
- ドライブクリーナーを追加
|
||||
|
||||
### Server
|
||||
- OpenAPIエンドポイントを復旧
|
||||
|
||||
@ -977,6 +977,7 @@ notesSearchNotAvailable: "ノート検索は利用できません。"
|
||||
license: "ライセンス"
|
||||
unfavoriteConfirm: "お気に入り解除しますか？"
|
||||
myClips: "自分のクリップ"
|
||||
drivecleaner: "ドライブクリーナー"
|
||||
|
||||
_achievements:
|
||||
earnedAt: "獲得日時"
|
||||
@ -1922,3 +1923,7 @@ _dialog:
|
||||
_disabledTimeline:
|
||||
title: "無効化されたタイムライン"
|
||||
description: "現在のロールでは、このタイムラインを使用することはできません。"
|
||||
|
||||
_drivecleaner:
|
||||
orderBySizeDesc: "サイズが大きい順"
|
||||
orderByCreatedAtAsc: "追加日が古い順"
|
||||
@ -31,6 +31,7 @@ export const paramDef = {
|
||||
untilId: { type: 'string', format: 'misskey:id' },
|
||||
folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null },
|
||||
type: { type: 'string', nullable: true, pattern: /^[a-zA-Z\/\-*]+$/.toString().slice(1, -1) },
|
||||
sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size'] },
|
||||
},
|
||||
required: [],
|
||||
} as const;
|
||||
@ -63,6 +64,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
|
||||
}
|
||||
}
|
||||
|
||||
switch (ps.sort) {
|
||||
case '+createdAt': query.orderBy('file.createdAt', 'DESC'); break;
|
||||
case '-createdAt': query.orderBy('file.createdAt', 'ASC'); break;
|
||||
case '+name': query.orderBy('file.name', 'DESC'); break;
|
||||
case '-name': query.orderBy('file.name', 'ASC'); break;
|
||||
case '+size': query.orderBy('file.size', 'DESC'); break;
|
||||
case '-size': query.orderBy('file.size', 'ASC'); break;
|
||||
}
|
||||
|
||||
const files = await query.take(ps.limit).getMany();
|
||||
|
||||
return await this.driveFileEntityService.packMany(files, { detail: false, self: true });
|
||||
|
||||
193
packages/frontend/src/pages/settings/drive-cleaner.vue
Normal file
193
packages/frontend/src/pages/settings/drive-cleaner.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<MkSelect v-model="sortModeSelect">
|
||||
<template #label>{{ i18n.ts.sort }}</template>
|
||||
<option v-for="x in sortOptions" :key="x.value" :value="x.value">{{ x.displayName }}</option>
|
||||
</MkSelect>
|
||||
<br>
|
||||
<div v-if="!fetching" class="_gap_m">
|
||||
<MkPagination v-slot="{items}" :pagination="pagination" class="driveitem list">
|
||||
<div
|
||||
v-for="file in items"
|
||||
:key="file.id"
|
||||
>
|
||||
<MkA
|
||||
v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${dateString(file.createdAt)}`"
|
||||
class="_button"
|
||||
:to="`${file.url}`"
|
||||
behavior="browser"
|
||||
@contextmenu.stop="$event => onContextMenu($event, file.id)"
|
||||
>
|
||||
<div class="file">
|
||||
<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
|
||||
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
|
||||
<div class="body">
|
||||
<div style="margin-bottom: 4px;">
|
||||
{{ file.name }}
|
||||
</div>
|
||||
<div>
|
||||
<span style="margin-right: 1em;">{{ file.type }}</span>
|
||||
<span>{{ bytes(file.size) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
|
||||
</div>
|
||||
<div v-if="sortModeSelect === 'sizeDesc'">
|
||||
<div class="uawsfosz">
|
||||
<div class="meter"><div :style="genUsageBar(file.size)"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</MkPagination>
|
||||
</div>
|
||||
<div v-else class="gap_m">
|
||||
{{ i18n.ts.checking }} <MkEllipsis/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import * as os from '@/os';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import bytes from '@/filters/bytes';
|
||||
import { dateString } from '@/filters/date';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import MkSelect from '@/components/MkSelect.vue';
|
||||
|
||||
let sortMode = '+size';
|
||||
const pagination = {
|
||||
endpoint: 'drive/files' as const,
|
||||
limit: 10,
|
||||
params: { sort: sortMode },
|
||||
};
|
||||
|
||||
const sortOptions = [
|
||||
{ value: 'sizeDesc', displayName: i18n.ts._drivecleaner.orderBySizeDesc },
|
||||
{ value: 'createdAtAsc', displayName: i18n.ts._drivecleaner.orderByCreatedAtAsc },
|
||||
];
|
||||
|
||||
const capacity = ref<number>(0);
|
||||
const usage = ref<number>(0);
|
||||
const fetching = ref(true);
|
||||
const sortModeSelect = ref('sizeDesc');
|
||||
|
||||
fetchDriveInfo();
|
||||
|
||||
watch(fetching, () => {
|
||||
if (fetching.value) {
|
||||
fetchDriveInfo();
|
||||
}
|
||||
});
|
||||
|
||||
watch(sortModeSelect, () => {
|
||||
switch (sortModeSelect.value) {
|
||||
case 'sizeDesc':
|
||||
sortMode = '+size';
|
||||
fetching.value = true;
|
||||
break;
|
||||
|
||||
case 'createdAtAsc':
|
||||
sortMode = '-createdAt';
|
||||
fetching.value = true;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
function fetchDriveInfo(): void {
|
||||
os.api('drive').then(info => {
|
||||
capacity.value = info.capacity;
|
||||
usage.value = info.usage;
|
||||
fetching.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function genUsageBar(fsize: number): object {
|
||||
return {
|
||||
width: `${fsize / usage.value * 100}%`,
|
||||
background: tinycolor({ h: 180 - (fsize / usage.value * 180), s: 0.7, l: 0.5 }),
|
||||
};
|
||||
}
|
||||
|
||||
function onContextMenu(ev: MouseEvent, fileId: string): void {
|
||||
const target = ev.target as HTMLElement;
|
||||
const items = [
|
||||
{
|
||||
text: i18n.ts.delete,
|
||||
icon: 'ti ti-trash-x',
|
||||
danger: true,
|
||||
action: async (): Promise<void> => {
|
||||
const res = await os.confirm({
|
||||
type: 'warning',
|
||||
title: i18n.ts.delete,
|
||||
text: i18n.ts.deleteConfirm,
|
||||
});
|
||||
if (!res.canceled) {
|
||||
await os.apiWithDialog('drive/files/delete', { fileId: fileId });
|
||||
fetching.value = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
ev.preventDefault();
|
||||
os.popupMenu(items, target, {
|
||||
viaKeyboard: false,
|
||||
});
|
||||
}
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.drivecleaner,
|
||||
icon: 'ti ti-trash',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
.file {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .thumbnail {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
> .body {
|
||||
margin-left: 0.3em;
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uawsfosz {
|
||||
> .meter {
|
||||
$size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: math.div($size, 2);
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
height: $size;
|
||||
border-radius: math.div($size, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -32,6 +32,9 @@
|
||||
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
|
||||
<template #suffixIcon><i class="ti ti-folder"></i></template>
|
||||
</FormLink>
|
||||
<FormLink to="/settings/drive/cleaner">
|
||||
{{ i18n.ts.drivecleaner }}
|
||||
</FormLink>
|
||||
<MkSwitch v-model="keepOriginalUploading">
|
||||
<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
|
||||
<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
|
||||
|
||||
@ -65,6 +65,10 @@ export const routes = [{
|
||||
path: '/drive',
|
||||
name: 'drive',
|
||||
component: page(() => import('./pages/settings/drive.vue')),
|
||||
}, {
|
||||
path: '/drive/cleaner',
|
||||
name: 'drive',
|
||||
component: page(() => import('./pages/settings/drive-cleaner.vue')),
|
||||
}, {
|
||||
path: '/notifications',
|
||||
name: 'notifications',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user