MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-23 08:43:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

rewrite tables

Browse Source
This commit is contained in:
pa
2026-01-13 17:49:38 +09:00
committed by Natsumi
parent 7649390939
commit 6e3aa44710
7 changed files with 746 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/views/Settings/dialogs/RegistryBackupDialog.vue
View File

@@ -22,50 +22,18 @@
<span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.ask_to_restore') }}</span>
<Switch :model-value="vrcRegistryAskRestore" @update:modelValue="setVrcRegistryAskRestore" />
</div>
<DataTable v-bind="registryBackupTable" style="margin-top: 10px">
<el-table-column :label="t('dialog.registry_backup.name')" prop="name"></el-table-column>
<el-table-column :label="t('dialog.registry_backup.date')" prop="date">
<template #default="scope">
<span>{{ formatDateFilter(scope.row.date, 'long') }}</span>
</template>
</el-table-column>
<el-table-column :label="t('dialog.registry_backup.action')" width="90" align="right">
<template #default="scope">
<TooltipWrapper side="top" :content="t('dialog.registry_backup.restore')">
<Button
size="sm"
variant="ghost"
class="button-pd-0"
@click="restoreVrcRegistryBackup(scope.row)">
<RotateCcw
/></Button>
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.registry_backup.save_to_file')">
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0"
@click="saveVrcRegistryBackupToFile(scope.row)">
<Download
/></Button>
</TooltipWrapper>
<TooltipWrapper side="top" :content="t('dialog.registry_backup.delete')">
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0"
@click="deleteVrcRegistryBackup(scope.row)"
><Trash2
/></Button>
</TooltipWrapper>
</template>
</el-table-column>
</DataTable>
<DataTableLayout
class="min-w-0 w-full"
:table="table"
:loading="false"
:table-style="tableStyle"
:show-pagination="false"
style="margin-top: 10px" />
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">
<Button size="sm" variant="destructive" @click="deleteVrcRegistry">{{
t('dialog.registry_backup.reset')
}}</Button>
<div>
<div class="flex gap-2">
<Button size="sm" variant="outline" @click="promptVrcRegistryBackupName">{{
t('dialog.registry_backup.backup')
}}</Button>
@@ -79,17 +47,19 @@
</template>
<script setup>
import { Download, RotateCcw, Trash2 } from 'lucide-vue-next';
import { ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { DataTableLayout } from '@/components/ui/data-table';
import { ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import { downloadAndSaveJson, formatDateFilter, removeFromArray } from '../../../shared/utils';
import { downloadAndSaveJson, removeFromArray } from '../../../shared/utils';
import { useAdvancedSettingsStore, useVrcxStore } from '../../../stores';
import { Switch } from '../../../components/ui/switch';
import { createColumns } from './registryBackupColumns.jsx';
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
import configRepository from '../../../service/config';
@@ -113,6 +83,29 @@
layout: 'table'
});
const tableStyle = { maxHeight: '320px' };
const rows = computed(() =>
Array.isArray(registryBackupTable.value?.data) ? registryBackupTable.value.data.slice() : []
);
const columns = computed(() =>
createColumns({
onRestore: restoreVrcRegistryBackup,
onSaveToFile: saveVrcRegistryBackupToFile,
onDelete: deleteVrcRegistryBackup
})
);
const { table } = useVrcxVueTable({
persistKey: 'registryBackupDialog',
data: rows,
columns: columns.value,
getRowId: (row) => String(row?.name ?? ''),
enablePagination: false,
initialSorting: [{ id: 'date', desc: true }]
});
watch(
() => isRegistryBackupDialogVisible.value,
(newVal) => {

110
src/views/Settings/dialogs/registryBackupColumns.jsx Normal file
View File

@@ -0,0 +1,110 @@
import { Download, RotateCcw, Trash2 } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { TooltipWrapper } from '@/components/ui/tooltip';
import { i18n } from '@/plugin';
import { formatDateFilter } from '@/shared/utils';
const { t } = i18n.global;
export const createColumns = ({ onRestore, onSaveToFile, onDelete }) => [
{
id: 'name',
accessorKey: 'name',
header: () => t('dialog.registry_backup.name'),
meta: {
stretch: true
},
cell: ({ row }) => <span>{row.original?.name}</span>
},
{
id: 'date',
accessorFn: (row) => {
const v = row?.date;
if (typeof v === 'number') return v;
const ts = Date.parse(String(v ?? ''));
return Number.isFinite(ts) ? ts : 0;
},
header: ({ column }) => (
<button
class="inline-flex items-center"
onClick={() => {
const sorted = column.getIsSorted();
column.toggleSorting(sorted === 'asc');
}}
>
{t('dialog.registry_backup.date')}
</button>
),
size: 170,
cell: ({ row }) => (
<span>{formatDateFilter(row.original?.date, 'long')}</span>
)
},
{
id: 'action',
header: () => t('dialog.registry_backup.action'),
enableSorting: false,
size: 90,
meta: {
tdClass: 'text-right'
},
cell: ({ row }) => {
const original = row.original;
return (
<div class="inline-flex items-center justify-end gap-1">
<TooltipWrapper
side="top"
content={t('dialog.registry_backup.restore')}
>
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0"
onClick={(e) => {
e.stopPropagation();
onRestore?.(original);
}}
>
<RotateCcw />
</Button>
</TooltipWrapper>
<TooltipWrapper
side="top"
content={t('dialog.registry_backup.save_to_file')}
>
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0"
onClick={(e) => {
e.stopPropagation();
onSaveToFile?.(original);
}}
>
<Download />
</Button>
</TooltipWrapper>
<TooltipWrapper
side="top"
content={t('dialog.registry_backup.delete')}
>
<Button
size="icon-sm"
variant="ghost"
class="button-pd-0"
onClick={(e) => {
e.stopPropagation();
onDelete?.(original);
}}
>
<Trash2 />
</Button>
</TooltipWrapper>
</div>
);
}
}
];