mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 06:43:51 +02:00
jsx
This commit is contained in:
pa
Natsumi
@@ -1,137 +0,0 @@
|
||||
import { ElTag, ElTooltip } from 'element-plus';
|
||||
import { h, resolveComponent } from 'vue';
|
||||
|
||||
import { formatDateFilter, statusClass } from '../../shared/utils';
|
||||
import { i18n } from '../../plugin';
|
||||
import { useUserStore } from '../../stores';
|
||||
|
||||
const { t } = i18n.global;
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: () => t('table.feed.date'),
|
||||
cell: ({ row }) => {
|
||||
const createdAt = row.getValue('created_at');
|
||||
return h(
|
||||
ElTooltip,
|
||||
{ placement: 'right' },
|
||||
{
|
||||
content: () =>
|
||||
h('span', formatDateFilter(createdAt, 'long')),
|
||||
default: () =>
|
||||
h('span', formatDateFilter(createdAt, 'short'))
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'type',
|
||||
header: () => t('table.feed.type'),
|
||||
cell: ({ row }) => {
|
||||
const type = row.getValue('type');
|
||||
return h(
|
||||
ElTag,
|
||||
{ type: 'info', effect: 'plain', size: 'small' },
|
||||
() => t(`view.feed.filters.${type}`)
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'displayName',
|
||||
header: () => t('table.feed.user'),
|
||||
cell: ({ row }) => {
|
||||
const { showUserDialog } = useUserStore();
|
||||
const original = row.original;
|
||||
return h(
|
||||
'span',
|
||||
{
|
||||
class: 'x-link table-user',
|
||||
style: 'padding-right: 10px',
|
||||
onClick: () => showUserDialog(original.userId)
|
||||
},
|
||||
original.displayName
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'detail',
|
||||
header: () => t('table.feed.detail'),
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
const type = original.type;
|
||||
const Location = resolveComponent('Location');
|
||||
const AvatarInfo = resolveComponent('AvatarInfo');
|
||||
|
||||
if (type === 'GPS') {
|
||||
return original.location
|
||||
? h(Location, {
|
||||
location: original.location,
|
||||
hint: original.worldName,
|
||||
grouphint: original.groupName
|
||||
})
|
||||
: null;
|
||||
}
|
||||
|
||||
if (type === 'Offline' || type === 'Online') {
|
||||
return original.location
|
||||
? h(Location, {
|
||||
location: original.location,
|
||||
hint: original.worldName,
|
||||
grouphint: original.groupName
|
||||
})
|
||||
: null;
|
||||
}
|
||||
|
||||
if (type === 'Status') {
|
||||
if (
|
||||
original.statusDescription ===
|
||||
original.previousStatusDescription
|
||||
) {
|
||||
return h('span', [
|
||||
h('i', {
|
||||
class: [
|
||||
'x-user-status',
|
||||
statusClass(original.previousStatus)
|
||||
]
|
||||
}),
|
||||
h('span', { class: 'mx-2' }, ' → '),
|
||||
h('i', {
|
||||
class: [
|
||||
'x-user-status',
|
||||
statusClass(original.status)
|
||||
]
|
||||
})
|
||||
]);
|
||||
}
|
||||
|
||||
return h('span', [
|
||||
h('i', {
|
||||
class: [
|
||||
'x-user-status',
|
||||
'mr-2',
|
||||
statusClass(original.status)
|
||||
]
|
||||
}),
|
||||
h('span', original.statusDescription)
|
||||
]);
|
||||
}
|
||||
|
||||
if (type === 'Avatar') {
|
||||
return h(AvatarInfo, {
|
||||
imageurl: original.currentAvatarImageUrl,
|
||||
userid: original.userId,
|
||||
hintownerid: original.ownerId,
|
||||
hintavatarname: original.avatarName,
|
||||
avatartags: original.currentAvatarTags
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'Bio') {
|
||||
return h('span', original.bio);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
];
|
||||
154
src/views/Feed/columns.jsx
Normal file
154
src/views/Feed/columns.jsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { ElTag } from 'element-plus';
|
||||
import { resolveComponent } from 'vue';
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger
|
||||
} from '../../components/ui/tooltip';
|
||||
import { formatDateFilter, statusClass } from '../../shared/utils';
|
||||
import { i18n } from '../../plugin';
|
||||
import { useUserStore } from '../../stores';
|
||||
|
||||
const { t } = i18n.global;
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: () => t('table.feed.date'),
|
||||
cell: ({ row }) => {
|
||||
const createdAt = row.getValue('created_at');
|
||||
const shortText = formatDateFilter(createdAt, 'short');
|
||||
const longText = formatDateFilter(createdAt, 'long');
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span>{shortText}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<span>{longText}</span>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'type',
|
||||
header: () => t('table.feed.type'),
|
||||
cell: ({ row }) => {
|
||||
const type = row.getValue('type');
|
||||
return (
|
||||
<ElTag type="info" effect="plain" size="small">
|
||||
{t(`view.feed.filters.${type}`)}
|
||||
</ElTag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'displayName',
|
||||
header: () => t('table.feed.user'),
|
||||
cell: ({ row }) => {
|
||||
const { showUserDialog } = useUserStore();
|
||||
const original = row.original;
|
||||
return (
|
||||
<span
|
||||
class="x-link table-user"
|
||||
style="padding-right: 10px"
|
||||
onClick={() => showUserDialog(original.userId)}
|
||||
>
|
||||
{original.displayName}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'detail',
|
||||
header: () => t('table.feed.detail'),
|
||||
cell: ({ row }) => {
|
||||
const original = row.original;
|
||||
const type = original.type;
|
||||
const Location = resolveComponent('Location');
|
||||
const AvatarInfo = resolveComponent('AvatarInfo');
|
||||
|
||||
if (type === 'GPS') {
|
||||
return original.location ? (
|
||||
<Location
|
||||
location={original.location}
|
||||
hint={original.worldName}
|
||||
grouphint={original.groupName}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
||||
if (type === 'Offline' || type === 'Online') {
|
||||
return original.location ? (
|
||||
<Location
|
||||
location={original.location}
|
||||
hint={original.worldName}
|
||||
grouphint={original.groupName}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
||||
if (type === 'Status') {
|
||||
if (
|
||||
original.statusDescription ===
|
||||
original.previousStatusDescription
|
||||
) {
|
||||
return (
|
||||
<span>
|
||||
<i
|
||||
class={[
|
||||
'x-user-status',
|
||||
statusClass(original.previousStatus)
|
||||
]}
|
||||
></i>
|
||||
<span class="mx-2"> Ўъ </span>
|
||||
<i
|
||||
class={[
|
||||
'x-user-status',
|
||||
statusClass(original.status)
|
||||
]}
|
||||
></i>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span>
|
||||
<i
|
||||
class={[
|
||||
'x-user-status',
|
||||
'mr-2',
|
||||
statusClass(original.status)
|
||||
]}
|
||||
></i>
|
||||
<span>{original.statusDescription}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'Avatar') {
|
||||
return (
|
||||
<AvatarInfo
|
||||
imageurl={original.currentAvatarImageUrl}
|
||||
userid={original.userId}
|
||||
hintownerid={original.ownerId}
|
||||
hintavatarname={original.avatarName}
|
||||
avatartags={original.currentAvatarTags}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'Bio') {
|
||||
return <span>{original.bio}</span>;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -6,6 +6,7 @@ import { defineConfig, loadEnv } from 'vite';
|
||||
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
|
||||
import { languageCodes } from './localization/locales';
|
||||
|
||||
@@ -66,6 +67,9 @@ export default defineConfig(({ mode }) => {
|
||||
base: '',
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx({
|
||||
tsTransform: 'built-in'
|
||||
}),
|
||||
tailwindcss(),
|
||||
buildAndUploadSourceMaps &&
|
||||
import('@sentry/vite-plugin').then(({ sentryVitePlugin }) =>
|
||||
|
||||
Reference in New Issue
Block a user