refactor css

This commit is contained in:
pa
2026-03-08 20:22:24 +09:00
parent eeb5288027
commit b9c874bed0
7 changed files with 241 additions and 70 deletions

View File

@@ -65,17 +65,26 @@
> >
<Spinner v-if="setAvatarTagsDialog.loading" class="inline-block ml-2" /> <Spinner v-if="setAvatarTagsDialog.loading" class="inline-block ml-2" />
<br /> <br />
<div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 280px"> <div
class="flex flex-wrap items-start max-h-[300px] overflow-hidden auto"
style="margin-top: 10px; min-height: 60px">
<div <div
v-for="avatar in setAvatarTagsDialog.ownAvatars" v-for="avatar in setAvatarTagsDialog.ownAvatars"
:key="avatar.id" :key="avatar.id"
:class="['item-width', 'x-friend-item', 'x-friend-item-border']" :class="[
'item-width',
'box-border flex items-center p-1.5 text-[13px] cursor-pointer border border-border rounded'
]"
@click="showAvatarDialog(avatar.id)"> @click="showAvatarDialog(avatar.id)">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" /> <img
v-if="avatar.thumbnailImageUrl"
class="size-full rounded-full object-cover"
:src="avatar.thumbnailImageUrl"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" v-text="avatar.name"></span> <span class="block truncate font-medium leading-[18px]" v-text="avatar.name"></span>
<span <span
v-if="avatar.releaseStatus === 'public'" v-if="avatar.releaseStatus === 'public'"
class="block truncate text-xs" class="block truncate text-xs"

View File

@@ -37,8 +37,7 @@
<div <div
v-for="image in galleryTable" v-for="image in galleryTable"
:key="image.id" :key="image.id"
class="x-friend-item" class="box-border inline-block mt-2.5 cursor-default">
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
<template v-if="image.versions && image.versions.length > 0"> <template v-if="image.versions && image.versions.length > 0">
<div <div
v-if="image.versions[image.versions.length - 1].file.url" v-if="image.versions[image.versions.length - 1].file.url"

View File

@@ -46,15 +46,22 @@
:search-placeholder="t('dialog.invite.select_placeholder')" :search-placeholder="t('dialog.invite.select_placeholder')"
:clearable="true"> :clearable="true">
<template #item="{ item, selected }"> <template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center"> <div class="flex w-full items-center p-1.5 text-[13px]">
<template v-if="item.user"> <template v-if="item.user">
<div :class="['avatar', userStatusClass(item.user)]"> <div
<img :src="userImage(item.user)" loading="lazy" /> class="relative inline-block flex-none size-9 mr-2.5"
:class="userStatusClass(item.user)">
<img
class="size-full rounded-full object-cover"
:src="userImage(item.user)"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" :style="{ color: item.user.$userColour }">{{ <span
item.user.displayName class="block truncate font-medium leading-[18px]"
}}</span> :style="{ color: item.user.$userColour }"
>{{ item.user.displayName }}</span
>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@@ -178,6 +185,10 @@
return groups; return groups;
}); });
/**
*
* @param value
*/
function setInviteUserIds(value) { function setInviteUserIds(value) {
const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : []; const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
const ids = Array.isArray(props.inviteDialog.userIds) ? props.inviteDialog.userIds : []; const ids = Array.isArray(props.inviteDialog.userIds) ? props.inviteDialog.userIds : [];
@@ -193,6 +204,10 @@
return map; return map;
}); });
/**
*
* @param userId
*/
function resolveUserDisplayName(userId) { function resolveUserDisplayName(userId) {
if (currentUser.value?.id && currentUser.value.id === userId) { if (currentUser.value?.id && currentUser.value.id === userId) {
return currentUser.value.displayName; return currentUser.value.displayName;
@@ -201,10 +216,18 @@
return friend?.ref?.displayName ?? friend?.name ?? String(userId); return friend?.ref?.displayName ?? friend?.name ?? String(userId);
} }
/**
*
*/
function closeInviteDialog() { function closeInviteDialog() {
emit('closeInviteDialog'); emit('closeInviteDialog');
} }
/**
*
* @param params
* @param userId
*/
function showSendInviteDialog(params, userId) { function showSendInviteDialog(params, userId) {
sendInviteDialog.value = { sendInviteDialog.value = {
params, params,
@@ -216,6 +239,9 @@
sendInviteDialogVisible.value = true; sendInviteDialogVisible.value = true;
} }
/**
*
*/
function addSelfToInvite() { function addSelfToInvite() {
const D = props.inviteDialog; const D = props.inviteDialog;
if (!D.userIds.includes(currentUser.value.id)) { if (!D.userIds.includes(currentUser.value.id)) {
@@ -223,6 +249,9 @@
} }
} }
/**
*
*/
function addFriendsInInstanceToInvite() { function addFriendsInInstanceToInvite() {
const D = props.inviteDialog; const D = props.inviteDialog;
for (const friend of D.friendsInInstance) { for (const friend of D.friendsInInstance) {
@@ -232,6 +261,9 @@
} }
} }
/**
*
*/
function addFavoriteFriendsToInvite() { function addFavoriteFriendsToInvite() {
const D = props.inviteDialog; const D = props.inviteDialog;
for (const friend of vipFriends.value) { for (const friend of vipFriends.value) {
@@ -241,6 +273,9 @@
} }
} }
/**
*
*/
function sendInvite() { function sendInvite() {
modalStore modalStore
.confirm({ .confirm({

View File

@@ -20,12 +20,15 @@
:close-on-select="true" :close-on-select="true"
:deselect-on-reselect="true"> :deselect-on-reselect="true">
<template #item="{ item, selected }"> <template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center"> <div class="flex w-full items-center p-1.5 text-[13px]">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img :src="item.iconUrl" loading="lazy" /> <img
class="size-full rounded-full object-cover"
:src="item.iconUrl"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" v-text="item.label"></span> <span class="block truncate font-medium leading-[18px]" v-text="item.label"></span>
</div> </div>
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" /> <CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
</div> </div>
@@ -43,14 +46,19 @@
:search-placeholder="t('dialog.invite_to_group.choose_friends_placeholder')" :search-placeholder="t('dialog.invite_to_group.choose_friends_placeholder')"
:clearable="true"> :clearable="true">
<template #item="{ item, selected }"> <template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center"> <div class="flex w-full items-center p-1.5 text-[13px]">
<template v-if="item.user"> <template v-if="item.user">
<div class="avatar" :class="userStatusClass(item.user)"> <div
<img :src="userImage(item.user)" loading="lazy" /> class="relative inline-block flex-none size-9 mr-2.5"
:class="userStatusClass(item.user)">
<img
class="size-full rounded-full object-cover"
:src="userImage(item.user)"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span <span
class="name" class="block truncate font-medium leading-[18px]"
:style="{ color: item.user.$userColour }" :style="{ color: item.user.$userColour }"
v-text="item.user.displayName"></span> v-text="item.user.displayName"></span>
</div> </div>
@@ -141,6 +149,10 @@
return map; return map;
}); });
/**
*
* @param userId
*/
function resolveUserDisplayName(userId) { function resolveUserDisplayName(userId) {
const D = inviteGroupDialog.value; const D = inviteGroupDialog.value;
if (D?.userObject?.id && D.userObject.id === userId) { if (D?.userObject?.id && D.userObject.id === userId) {
@@ -224,6 +236,9 @@
} }
); );
/**
*
*/
function initDialog() { function initDialog() {
const D = inviteGroupDialog.value; const D = inviteGroupDialog.value;
if (D.groupId) { if (D.groupId) {
@@ -247,6 +262,9 @@
}); });
} }
} }
/**
*
*/
function isAllowedToInviteToGroup() { function isAllowedToInviteToGroup() {
const D = inviteGroupDialog.value; const D = inviteGroupDialog.value;
const groupId = D.groupId; const groupId = D.groupId;
@@ -270,6 +288,9 @@
inviteGroupDialog.value.loading = false; inviteGroupDialog.value.loading = false;
}); });
} }
/**
*
*/
function sendGroupInvite() { function sendGroupInvite() {
modalStore modalStore
.confirm({ .confirm({

View File

@@ -6,14 +6,17 @@
</DialogHeader> </DialogHeader>
<div v-if="moderateGroupDialog.visible"> <div v-if="moderateGroupDialog.visible">
<div class="x-friend-item" style="cursor: default"> <div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img :src="userImage(moderateGroupDialog.userObject)" loading="lazy" /> <img
class="size-full rounded-full object-cover"
:src="userImage(moderateGroupDialog.userObject)"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span <span
v-if="moderateGroupDialog.userObject.id" v-if="moderateGroupDialog.userObject.id"
class="name" class="block truncate font-medium leading-[18px]"
:style="{ color: moderateGroupDialog.userObject.$userColour }" :style="{ color: moderateGroupDialog.userObject.$userColour }"
v-text="moderateGroupDialog.userObject.displayName"></span> v-text="moderateGroupDialog.userObject.displayName"></span>
<span v-else v-text="moderateGroupDialog.userId"></span> <span v-else v-text="moderateGroupDialog.userId"></span>
@@ -86,6 +89,10 @@
} }
]); ]);
/**
*
* @param value
*/
function setGroupId(value) { function setGroupId(value) {
moderateGroupDialog.value.groupId = String(value ?? ''); moderateGroupDialog.value.groupId = String(value ?? '');
} }
@@ -101,6 +108,9 @@
} }
); );
/**
*
*/
function initDialog() { function initDialog() {
const D = moderateGroupDialog.value; const D = moderateGroupDialog.value;
if (D.groupId) { if (D.groupId) {

View File

@@ -170,12 +170,17 @@
:deselect-on-reselect="true" :deselect-on-reselect="true"
@change="buildInstance"> @change="buildInstance">
<template #item="{ item, selected }"> <template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center"> <div class="flex w-full items-center p-1.5 text-[13px]">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img :src="item.iconUrl" loading="lazy" /> <img
class="size-full rounded-full object-cover"
:src="item.iconUrl"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" v-text="item.label"></span> <span
class="block truncate font-medium leading-[18px]"
v-text="item.label"></span>
</div> </div>
<CheckIcon <CheckIcon
:class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" /> :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
@@ -378,14 +383,19 @@
:deselect-on-reselect="true" :deselect-on-reselect="true"
@change="buildLegacyInstance"> @change="buildLegacyInstance">
<template #item="{ item, selected }"> <template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center"> <div class="flex w-full items-center p-1.5 text-[13px]">
<template v-if="item.user"> <template v-if="item.user">
<div class="avatar" :class="userStatusClass(item.user)"> <div
<img :src="userImage(item.user)" loading="lazy" /> class="relative inline-block flex-none size-9 mr-2.5"
:class="userStatusClass(item.user)">
<img
class="size-full rounded-full object-cover"
:src="userImage(item.user)"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span <span
class="name" class="block truncate font-medium leading-[18px]"
:style="{ color: item.user.$userColour }" :style="{ color: item.user.$userColour }"
v-text="item.user.displayName"></span> v-text="item.user.displayName"></span>
</div> </div>
@@ -414,12 +424,17 @@
:deselect-on-reselect="true" :deselect-on-reselect="true"
@change="buildLegacyInstance"> @change="buildLegacyInstance">
<template #item="{ item, selected }"> <template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center"> <div class="flex w-full items-center p-1.5 text-[13px]">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img :src="item.iconUrl" loading="lazy" /> <img
class="size-full rounded-full object-cover"
:src="item.iconUrl"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" v-text="item.label"></span> <span
class="block truncate font-medium leading-[18px]"
v-text="item.label"></span>
</div> </div>
<CheckIcon <CheckIcon
:class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" /> :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />

View File

@@ -30,17 +30,22 @@
<Checkbox v-model="searchUserSortByLastLoggedIn" /> <Checkbox v-model="searchUserSortByLastLoggedIn" />
<span>{{ t('view.search.user.sort_by_last_logged_in') }}</span> <span>{{ t('view.search.user.sort_by_last_logged_in') }}</span>
</label> </label>
<div class="x-friend-list" style="min-height: 500px"> <div style="min-height: 500px">
<div <div
v-for="user in searchUserResults" v-for="user in searchUserResults"
:key="user.id" :key="user.id"
class="x-friend-item" class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
@click="showUserDialog(user.id)"> @click="showUserDialog(user.id)">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img :src="userImage(user, true)" loading="lazy" /> <img
class="size-full rounded-full object-cover"
:src="userImage(user, true)"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" v-text="user.displayName"></span> <span
class="block truncate font-medium leading-[18px]"
v-text="user.displayName"></span>
<span <span
v-if="randomUserColours" v-if="randomUserColours"
class="block truncate text-xs" class="block truncate text-xs"
@@ -100,17 +105,20 @@
<span>{{ t('view.search.world.community_lab') }}</span> <span>{{ t('view.search.world.community_lab') }}</span>
</label> </label>
</div> </div>
<div class="x-friend-list" style="min-height: 500px"> <div style="min-height: 500px">
<div <div
v-for="world in searchWorldResults" v-for="world in searchWorldResults"
:key="world.id" :key="world.id"
class="x-friend-item" class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
@click="showWorldDialog(world.id)"> @click="showWorldDialog(world.id)">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img :src="world.thumbnailImageUrl" loading="lazy" /> <img
class="size-full rounded-full object-cover"
:src="world.thumbnailImageUrl"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" v-text="world.name"></span> <span class="block truncate font-medium leading-[18px]" v-text="world.name"></span>
<span v-if="world.occupants" class="block truncate text-xs" <span v-if="world.occupants" class="block truncate text-xs"
>{{ world.authorName }} ({{ world.occupants }})</span >{{ world.authorName }} ({{ world.occupants }})</span
> >
@@ -251,18 +259,26 @@
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div class="x-friend-list" style="margin-top: 20px; min-height: 500px"> <div style="margin-top: 20px; min-height: 500px">
<div <div
v-for="avatar in searchAvatarPage" v-for="avatar in searchAvatarPage"
:key="avatar.id" :key="avatar.id"
class="x-friend-item" class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
@click="showAvatarDialog(avatar.id)"> @click="showAvatarDialog(avatar.id)">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" /> <img
<img v-else-if="avatar.imageUrl" :src="avatar.imageUrl" loading="lazy" /> v-if="avatar.thumbnailImageUrl"
class="size-full rounded-full object-cover"
:src="avatar.thumbnailImageUrl"
loading="lazy" />
<img
v-else-if="avatar.imageUrl"
class="size-full rounded-full object-cover"
:src="avatar.imageUrl"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name" v-text="avatar.name"></span> <span class="block truncate font-medium leading-[18px]" v-text="avatar.name"></span>
<span <span
v-if="avatar.releaseStatus === 'public'" v-if="avatar.releaseStatus === 'public'"
class="block truncate text-xs" class="block truncate text-xs"
@@ -301,17 +317,20 @@
</template> </template>
<template #group> <template #group>
<div style="min-height: 60px"> <div style="min-height: 60px">
<div class="x-friend-list" style="min-height: 500px"> <div style="min-height: 500px">
<div <div
v-for="group in searchGroupResults" v-for="group in searchGroupResults"
:key="group.id" :key="group.id"
class="x-friend-item" class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted/50 hover:rounded-lg"
@click="showGroupDialog(group.id)"> @click="showGroupDialog(group.id)">
<div class="avatar"> <div class="relative inline-block flex-none size-9 mr-2.5">
<img :src="getSmallThumbnailUrl(group.iconUrl)" loading="lazy" /> <img
class="size-full rounded-full object-cover"
:src="getSmallThumbnailUrl(group.iconUrl)"
loading="lazy" />
</div> </div>
<div class="detail"> <div class="flex-1 overflow-hidden">
<span class="name"> <span class="block truncate font-medium leading-[18px]">
<span v-text="group.name"></span> <span v-text="group.name"></span>
<span style="margin-left: 5px; font-weight: normal">({{ group.memberCount }})</span> <span style="margin-left: 5px; font-weight: normal">({{ group.memberCount }})</span>
<span <span
@@ -428,16 +447,28 @@
const searchWorldCategoryIndex = ref(null); const searchWorldCategoryIndex = ref(null);
const searchWorldResults = ref([]); const searchWorldResults = ref([]);
/**
*
* @param value
*/
function handleSearchAvatarFilterChange(value) { function handleSearchAvatarFilterChange(value) {
searchAvatarFilter.value = value; searchAvatarFilter.value = value;
searchAvatar(); searchAvatar();
} }
/**
*
* @param value
*/
function handleSearchAvatarFilterRemoteChange(value) { function handleSearchAvatarFilterRemoteChange(value) {
searchAvatarFilterRemote.value = value; searchAvatarFilterRemote.value = value;
searchAvatar(); searchAvatar();
} }
/**
*
* @param value
*/
function handleSearchAvatarSortChange(value) { function handleSearchAvatarSortChange(value) {
searchAvatarSort.value = value; searchAvatarSort.value = value;
searchAvatar(); searchAvatar();
@@ -453,10 +484,17 @@
const searchGroupParams = ref({}); const searchGroupParams = ref({});
const searchGroupResults = ref([]); const searchGroupResults = ref([]);
/**
*
* @param url
*/
function getSmallThumbnailUrl(url) { function getSmallThumbnailUrl(url) {
return convertFileUrlToImageUrl(url); return convertFileUrlToImageUrl(url);
} }
/**
*
*/
function handleClearSearch() { function handleClearSearch() {
searchUserParams.value = {}; searchUserParams.value = {};
searchWorldParams.value = {}; searchWorldParams.value = {};
@@ -469,15 +507,26 @@
clearSearch(); clearSearch();
} }
/**
*
* @param text
*/
function updateSearchText(text) { function updateSearchText(text) {
searchText.value = text; searchText.value = text;
} }
/**
*
* @param tabName
*/
function handleSearchTabChange(tabName) { function handleSearchTabChange(tabName) {
searchText.value = ''; searchText.value = '';
activeSearchTab.value = tabName; activeSearchTab.value = tabName;
} }
/**
*
*/
function search() { function search() {
switch (activeSearchTab.value) { switch (activeSearchTab.value) {
case 'user': case 'user':
@@ -495,6 +544,9 @@
} }
} }
/**
*
*/
async function searchUser() { async function searchUser() {
searchUserParams.value = { searchUserParams.value = {
n: 10, n: 10,
@@ -506,12 +558,20 @@
await handleMoreSearchUser(); await handleMoreSearchUser();
} }
/**
*
* @param go
*/
async function handleMoreSearchUser(go = null) { async function handleMoreSearchUser(go = null) {
isSearchUserLoading.value = true; isSearchUserLoading.value = true;
await moreSearchUser(go, searchUserParams.value); await moreSearchUser(go, searchUserParams.value);
isSearchUserLoading.value = false; isSearchUserLoading.value = false;
} }
/**
*
* @param ref
*/
function searchWorld(ref) { function searchWorld(ref) {
searchWorldOption.value = ''; searchWorldOption.value = '';
searchWorldCategoryIndex.value = ref?.index ?? null; searchWorldCategoryIndex.value = ref?.index ?? null;
@@ -581,12 +641,20 @@
moreSearchWorld(); moreSearchWorld();
} }
/**
*
* @param index
*/
function handleSearchWorldCategorySelect(index) { function handleSearchWorldCategorySelect(index) {
searchWorldCategoryIndex.value = index; searchWorldCategoryIndex.value = index;
const row = cachedConfig.value?.dynamicWorldRows?.find((r) => r.index === index); const row = cachedConfig.value?.dynamicWorldRows?.find((r) => r.index === index);
searchWorld(row || {}); searchWorld(row || {});
} }
/**
*
* @param go
*/
function moreSearchWorld(go) { function moreSearchWorld(go) {
const params = searchWorldParams.value; const params = searchWorldParams.value;
if (go) { if (go) {
@@ -614,6 +682,9 @@
}); });
} }
/**
*
*/
async function searchAvatar() { async function searchAvatar() {
let ref; let ref;
isSearchAvatarLoading.value = true; isSearchAvatarLoading.value = true;
@@ -712,6 +783,10 @@
searchAvatarResults.value = avatarsArray; searchAvatarResults.value = avatarsArray;
searchAvatarPage.value = avatarsArray.slice(0, 10); searchAvatarPage.value = avatarsArray.slice(0, 10);
} }
/**
*
* @param n
*/
function moreSearchAvatar(n) { function moreSearchAvatar(n) {
let offset; let offset;
if (n === -1) { if (n === -1) {
@@ -724,6 +799,9 @@
} }
searchAvatarPage.value = searchAvatarResults.value.slice(offset, offset + 10); searchAvatarPage.value = searchAvatarResults.value.slice(offset, offset + 10);
} }
/**
*
*/
async function searchGroup() { async function searchGroup() {
searchGroupParams.value = { searchGroupParams.value = {
n: 10, n: 10,
@@ -732,6 +810,10 @@
}; };
await moreSearchGroup(); await moreSearchGroup();
} }
/**
*
* @param go
*/
async function moreSearchGroup(go) { async function moreSearchGroup(go) {
const params = searchGroupParams.value; const params = searchGroupParams.value;
if (go) { if (go) {