rewrite import dialog tables

src/views/Favorites/dialogs/AvatarImportDialog.vue

@@ -103,57 +103,13 @@
             </h2>
             <pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
         </template>
-        <DataTable :loading="avatarImportDialog.loading" v-bind="avatarImportTable" style="margin-top: 10px">
+        <DataTableLayout
-            <el-table-column :label="t('table.import.image')" width="70" prop="thumbnailImageUrl">
+            class="min-w-0 w-full"
-                <template #default="{ row }">
+            :table="table"
-                    <el-popover placement="right" :width="500" trigger="hover">
+            :loading="avatarImportDialog.loading"
-                        <template #reference>
+            :table-style="tableStyle"
-                            <img :src="row.thumbnailImageUrl" class="friends-list-avatar" loading="lazy" />
+            :show-pagination="false"
-                        </template>
+            style="margin-top: 10px" />
-                        <img
-                            :src="row.imageUrl"
-                            :class="['friends-list-avatar', 'x-popover-image']"
-                            style="cursor: pointer"
-                            @click="showFullscreenImageDialog(row.imageUrl)"
-                            loading="lazy" />
-                    </el-popover>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.name')" prop="name">
-                <template #default="{ row }">
-                    <span class="x-link" @click="showAvatarDialog(row.id)">
-                        {{ row.name }}
-                    </span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.author')" width="120" prop="authorName">
-                <template #default="{ row }">
-                    <span class="x-link" @click="showUserDialog(row.authorId)">
-                        {{ row.authorName }}
-                    </span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.status')" width="70" prop="releaseStatus">
-                <template #default="{ row }">
-                    <span
-                        :style="{
-                            color:
-                                row.releaseStatus === 'public'
-                                    ? '#67c23a'
-                                    : row.releaseStatus === 'private'
-                                      ? '#f56c6c'
-                                      : undefined
-                        }">
-                        {{ row.releaseStatus.charAt(0).toUpperCase() + row.releaseStatus.slice(1) }}
-                    </span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.action')" width="90" align="right">
-                <template #default="{ row }">
-                    <Button size="icon-sm" variant="ghost" @click="deleteItemAvatarImport(row)"><Trash2 /> </Button>
-                </template>
-            </el-table-column>
-        </DataTable>
     </el-dialog>
 </template>
 
@@ -161,17 +117,19 @@
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { Loading } from '@element-plus/icons-vue';
-    import { Trash2 } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useAvatarStore, useFavoriteStore, useGalleryStore, useUserStore } from '../../../stores';
     import { avatarRequest, favoriteRequest } from '../../../api';
+    import { createColumns } from './avatarImportColumns.jsx';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { removeFromArray } from '../../../shared/utils';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const emit = defineEmits(['update:avatarImportDialogInput']);
     const { t } = useI18n();
@@ -207,6 +165,30 @@
         layout: 'table'
     });
 
+    const tableStyle = { maxHeight: '400px' };
+
+    const rows = computed(() =>
+        Array.isArray(avatarImportTable.value?.data) ? avatarImportTable.value.data.slice() : []
+    );
+
+    const columns = computed(() =>
+        createColumns({
+            onShowAvatar: showAvatarDialog,
+            onShowUser: showUserDialog,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onDelete: deleteItemAvatarImport
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'avatarImportDialog',
+        data: rows,
+        columns: columns.value,
+        getRowId: (row) => String(row?.id ?? ''),
+        enablePagination: false,
+        enableSorting: false
+    });
+
     const avatarImportDialogIndex = ref(2000);
 
     const isVisible = computed({

src/views/Favorites/dialogs/FriendImportDialog.vue

@@ -84,34 +84,13 @@
             <h2 style="font-weight: bold; margin: 5px 0">{{ t('dialog.friend_import.errors') }}</h2>
             <pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
         </template>
-        <DataTable :loading="friendImportDialog.loading" v-bind="friendImportTable" style="margin-top: 10px">
+        <DataTableLayout
-            <el-table-column :label="t('table.import.image')" width="70" prop="currentAvatarThumbnailImageUrl">
+            class="min-w-0 w-full"
-                <template #default="{ row }">
+            :table="table"
-                    <el-popover placement="right" :width="500" trigger="hover">
+            :loading="friendImportDialog.loading"
-                        <template #reference>
+            :table-style="tableStyle"
-                            <img class="friends-list-avatar" :src="userImage(row)" />
+            :show-pagination="false"
-                        </template>
+            style="margin-top: 10px" />
-                        <img
-                            :src="userImageFull(row)"
-                            :class="['friends-list-avatar', 'x-popover-image']"
-                            style="cursor: pointer"
-                            @click="showFullscreenImageDialog(userImageFull(row))" />
-                    </el-popover>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.name')" prop="displayName">
-                <template #default="{ row }">
-                    <span class="x-link" :title="row.displayName" @click="showUserDialog(row.id)">
-                        {{ row.displayName }}
-                    </span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.action')" width="90" align="right">
-                <template #default="{ row }">
-                    <Button size="icon-sm" variant="ghost" @click="deleteItemFriendImport(row)"><Trash2 /></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
     </el-dialog>
 </template>
 
@@ -119,9 +98,9 @@
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { Loading } from '@element-plus/icons-vue';
-    import { Trash2 } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -129,7 +108,9 @@
     import { removeFromArray, userImage, userImageFull } from '../../../shared/utils';
     import { useFavoriteStore, useGalleryStore, useUserStore } from '../../../stores';
     import { favoriteRequest, userRequest } from '../../../api';
+    import { createColumns } from './friendImportColumns.jsx';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { t } = useI18n();
 
@@ -163,6 +144,31 @@
         layout: 'table'
     });
 
+    const tableStyle = { maxHeight: '400px' };
+
+    const rows = computed(() =>
+        Array.isArray(friendImportTable.value?.data) ? friendImportTable.value.data.slice() : []
+    );
+
+    const columns = computed(() =>
+        createColumns({
+            userImage,
+            userImageFull,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onShowUser: showUserDialog,
+            onDelete: deleteItemFriendImport
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'friendImportDialog',
+        data: rows,
+        columns: columns.value,
+        getRowId: (row) => String(row?.id ?? ''),
+        enablePagination: false,
+        enableSorting: false
+    });
+
     const friendImportDialogIndex = ref(2000);
 
     const isVisible = computed({

src/views/Favorites/dialogs/WorldImportDialog.vue

@@ -108,54 +108,13 @@
             </h2>
             <pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
         </template>
-        <DataTable :loading="worldImportDialog.loading" v-bind="worldImportTable" style="margin-top: 10px">
+        <DataTableLayout
-            <el-table-column :label="t('table.import.image')" width="70" prop="thumbnailImageUrl">
+            class="min-w-0 w-full"
-                <template #default="{ row }">
+            :table="table"
-                    <el-popover placement="right" :width="500" trigger="hover">
+            :loading="worldImportDialog.loading"
-                        <template #reference>
+            :table-style="tableStyle"
-                            <img :src="row.thumbnailImageUrl" class="friends-list-avatar" loading="lazy" />
+            :show-pagination="false"
-                        </template>
+            style="margin-top: 10px" />
-                        <img
-                            :src="row.imageUrl"
-                            :class="['friends-list-avatar', 'x-popover-image']"
-                            style="cursor: pointer"
-                            @click="showFullscreenImageDialog(row.imageUrl)"
-                            loading="lazy" />
-                    </el-popover>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.name')" prop="name">
-                <template #default="{ row }">
-                    <span class="x-link" @click="showWorldDialog(row.id)" v-text="row.name"></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.author')" width="120" prop="authorName">
-                <template #default="{ row }">
-                    <span class="x-link" @click="showUserDialog(row.authorId)" v-text="row.authorName"></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.status')" width="70" prop="releaseStatus">
-                <template #default="{ row }">
-                    <span
-                        :style="{
-                            color:
-                                row.releaseStatus === 'public'
-                                    ? '#67c23a'
-                                    : row.releaseStatus === 'private'
-                                      ? '#f56c6c'
-                                      : undefined
-                        }"
-                        v-text="row.releaseStatus.charAt(0).toUpperCase() + row.releaseStatus.slice(1)"></span>
-                </template>
-            </el-table-column>
-            <el-table-column :label="t('table.import.action')" width="90" align="right">
-                <template #default="{ row }">
-                    <Button size="icon-sm" class="w-6 h-6" variant="ghost" @click="deleteItemWorldImport(row)"
-                        ><Trash2
-                    /></Button>
-                </template>
-            </el-table-column>
-        </DataTable>
     </el-dialog>
 </template>
 
@@ -163,17 +122,19 @@
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
+    import { DataTableLayout } from '@/components/ui/data-table';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { Loading } from '@element-plus/icons-vue';
-    import { Trash2 } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
     import { useFavoriteStore, useGalleryStore, useUserStore, useWorldStore } from '../../../stores';
     import { favoriteRequest, worldRequest } from '../../../api';
+    import { createColumns } from './worldImportColumns.jsx';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { removeFromArray } from '../../../shared/utils';
+    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
     const { showUserDialog } = useUserStore();
     const { favoriteWorldGroups, worldImportDialogInput, worldImportDialogVisible, localWorldFavoriteGroups } =
@@ -213,6 +174,30 @@
         layout: 'table'
     });
 
+    const tableStyle = { maxHeight: '400px' };
+
+    const rows = computed(() =>
+        Array.isArray(worldImportTable.value?.data) ? worldImportTable.value.data.slice() : []
+    );
+
+    const columns = computed(() =>
+        createColumns({
+            onShowWorld: showWorldDialog,
+            onShowUser: showUserDialog,
+            onShowFullscreenImage: showFullscreenImageDialog,
+            onDelete: deleteItemWorldImport
+        })
+    );
+
+    const { table } = useVrcxVueTable({
+        persistKey: 'worldImportDialog',
+        data: rows,
+        columns: columns.value,
+        getRowId: (row) => String(row?.id ?? ''),
+        enablePagination: false,
+        enableSorting: false
+    });
+
     const isVisible = computed({
         get() {
             return worldImportDialogVisible.value;

src/views/Favorites/dialogs/avatarImportColumns.jsx

@@ -0,0 +1,137 @@
+import { Trash2 } from 'lucide-vue-next';
+
+import { Button } from '../../../components/ui/button';
+import { i18n } from '../../../plugin';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullscreenImage }) => [
+    {
+        id: 'image',
+        header: () => t('table.import.image'),
+        enableSorting: false,
+        size: 70,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = original?.thumbnailImageUrl;
+            const full = original?.imageUrl;
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                src={thumb}
+                                class="friends-list-avatar"
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        loading="lazy"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'name',
+        accessorKey: 'name',
+        header: () => t('table.import.name'),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    class="x-link"
+                    title={original?.name}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowAvatar?.(original?.id);
+                    }}
+                >
+                    {original?.name}
+                </span>
+            );
+        }
+    },
+    {
+        id: 'author',
+        header: () => t('table.import.author'),
+        size: 120,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    class="x-link"
+                    title={original?.authorName}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.authorId);
+                    }}
+                >
+                    {original?.authorName}
+                </span>
+            );
+        }
+    },
+    {
+        id: 'status',
+        header: () => t('table.import.status'),
+        size: 70,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const status = String(row.original?.releaseStatus ?? '');
+            const label = status
+                ? status.charAt(0).toUpperCase() + status.slice(1)
+                : '';
+            const color =
+                status === 'public'
+                    ? '#67c23a'
+                    : status === 'private'
+                      ? '#f56c6c'
+                      : undefined;
+            return <span style={{ color }}>{label}</span>;
+        }
+    },
+    {
+        id: 'action',
+        header: () => t('table.import.action'),
+        size: 90,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete?.(original);
+                    }}
+                >
+                    <Trash2 />
+                </Button>
+            );
+        }
+    }
+];

src/views/Favorites/dialogs/friendImportColumns.jsx

@@ -0,0 +1,96 @@
+import { Trash2 } from 'lucide-vue-next';
+
+import { Button } from '../../../components/ui/button';
+import { i18n } from '../../../plugin';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ userImage, userImageFull, onShowFullscreenImage, onShowUser, onDelete }) => [
+    {
+        id: 'image',
+        header: () => t('table.import.image'),
+        enableSorting: false,
+        size: 70,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = userImage?.(original);
+            const full = userImageFull?.(original);
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                class="friends-list-avatar"
+                                src={thumb}
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'name',
+        accessorKey: 'displayName',
+        header: () => t('table.import.name'),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    class="x-link"
+                    title={original?.displayName}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.id);
+                    }}
+                >
+                    {original?.displayName}
+                </span>
+            );
+        }
+    },
+    {
+        id: 'action',
+        header: () => t('table.import.action'),
+        size: 90,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete?.(original);
+                    }}
+                >
+                    <Trash2 />
+                </Button>
+            );
+        }
+    }
+];

src/views/Favorites/dialogs/worldImportColumns.jsx

@@ -0,0 +1,138 @@
+import { Trash2 } from 'lucide-vue-next';
+
+import { Button } from '../../../components/ui/button';
+import { i18n } from '../../../plugin';
+
+const { t } = i18n.global;
+
+export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscreenImage }) => [
+    {
+        id: 'image',
+        header: () => t('table.import.image'),
+        enableSorting: false,
+        size: 70,
+        cell: ({ row }) => {
+            const original = row.original;
+            const thumb = original?.thumbnailImageUrl;
+            const full = original?.imageUrl;
+
+            return (
+                <el-popover
+                    placement="right"
+                    width={500}
+                    trigger="hover"
+                    v-slots={{
+                        reference: () => (
+                            <img
+                                src={thumb}
+                                class="friends-list-avatar"
+                                loading="lazy"
+                            />
+                        )
+                    }}
+                >
+                    <img
+                        src={full}
+                        class={['friends-list-avatar', 'x-popover-image']}
+                        style="cursor: pointer"
+                        loading="lazy"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            if (full) {
+                                onShowFullscreenImage?.(full);
+                            }
+                        }}
+                    />
+                </el-popover>
+            );
+        }
+    },
+    {
+        id: 'name',
+        accessorKey: 'name',
+        header: () => t('table.import.name'),
+        meta: {
+            stretch: true
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    class="x-link"
+                    title={original?.name}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowWorld?.(original?.id);
+                    }}
+                >
+                    {original?.name}
+                </span>
+            );
+        }
+    },
+    {
+        id: 'author',
+        header: () => t('table.import.author'),
+        size: 120,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <span
+                    class="x-link"
+                    title={original?.authorName}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onShowUser?.(original?.authorId);
+                    }}
+                >
+                    {original?.authorName}
+                </span>
+            );
+        }
+    },
+    {
+        id: 'status',
+        header: () => t('table.import.status'),
+        size: 70,
+        enableSorting: false,
+        cell: ({ row }) => {
+            const status = String(row.original?.releaseStatus ?? '');
+            const label = status
+                ? status.charAt(0).toUpperCase() + status.slice(1)
+                : '';
+            const color =
+                status === 'public'
+                    ? '#67c23a'
+                    : status === 'private'
+                      ? '#f56c6c'
+                      : undefined;
+            return <span style={{ color }}>{label}</span>;
+        }
+    },
+    {
+        id: 'action',
+        header: () => t('table.import.action'),
+        size: 90,
+        enableSorting: false,
+        meta: {
+            tdClass: 'text-right'
+        },
+        cell: ({ row }) => {
+            const original = row.original;
+            return (
+                <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    class="w-6 h-6"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onDelete?.(original);
+                    }}
+                >
+                    <Trash2 />
+                </Button>
+            );
+        }
+    }
+];