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

use tailwind class

Browse Source
This commit is contained in:
pa
2026-03-08 22:46:26 +09:00
parent be2f07f24e
commit 9b564303a4
85 changed files with 1167 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Charts/components/InstanceActivity.vue
+41 -12
View File
@@ -2,12 +2,12 @@
<div id="chart" class="x-container">
<div ref="instanceActivityRef" class="pt-12">
<BackToTop :target="instanceActivityRef" :right="30" :bottom="30" :teleport="false" />
<div class="options-container instance-activity" style="margin-top: 0">
<div class="options-container instance-activity mt-0">
<div>
<span>{{ t('view.charts.instance_activity.header') }}</span>
<HoverCard>
<HoverCardTrigger as-child>
<Info style="margin-left: 4px; font-size: 12px; opacity: 0.7" />
<Info class="ml-1" style="font-size: 12px; opacity: 0.7" />
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start" class="w-75">
<div class="tips-popover">
@@ -21,12 +21,7 @@
<div>
<TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
<Button
class="rounded-full"
size="icon"
variant="ghost"
style="margin-right: 5px"
@click="reloadData">
<Button class="rounded-full mr-1.5" size="icon" variant="ghost" @click="reloadData">
<RefreshCcw />
</Button>
</TooltipWrapper>
@@ -37,7 +32,7 @@
<TooltipWrapper
:content="t('view.charts.instance_activity.settings.header')"
side="top">
<Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
<Button class="rounded-full mr-1.5" size="icon" variant="ghost">
<Settings />
</Button>
</TooltipWrapper>
@@ -215,6 +210,9 @@
setInstanceActivityHeight();
});
/**
*
*/
function setInstanceActivityHeight() {
if (instanceActivityRef.value) {
const availableHeight = window.innerHeight - 110;
@@ -259,6 +257,10 @@
}
});
/**
*
* @param value
*/
function handleBarWidthCommit(value) {
changeBarWidth(value?.[0] ?? barWidthDraft.value, () => handleEchartsRerender());
}
@@ -303,6 +305,10 @@
return fromDate(selectedDate.value ?? new Date(), calendarTimeZone);
});
/**
*
* @param dateValue
*/
function isCalendarDateDisabled(dateValue) {
try {
return getDatePickerDisabledDate(toDate(dateValue, calendarTimeZone));
@@ -311,6 +317,10 @@
}
}
/**
*
* @param dateValue
*/
function handleCalendarModelUpdate(dateValue) {
if (!dateValue) return;
selectedDate.value = toDate(dateValue, calendarTimeZone);
@@ -430,6 +440,10 @@
}
};
/**
*
* @param params
*/
function handleYAxisLabelClick(params) {
const targetActivity = activityData.value[params?.dataIndex];
if (!targetActivity) {
@@ -463,6 +477,9 @@
}
}
/**
*
*/
function getYAxisData() {
return worldNameArray.value.map((worldName, index) => {
const activityItem = activityData.value[index];
@@ -479,6 +496,9 @@
});
}
/**
*
*/
function initEcharts() {
const chartsHeight = activityData.value.length * (barWidth.value + 10) + 200;
const chartDom = activityChartRef.value;
@@ -533,6 +553,9 @@
}
afterInit();
}
/**
*
*/
function getNewOption() {
const getTooltip = (params) => {
const activityDataArray = activityData.value;
@@ -560,7 +583,7 @@
return `
<div style="display: flex; align-items: center;">
<div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 5px;"></div>
<div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 6px;"></div>
<div>
<div>${name} #${location.instanceName} ${location.accessTypeName}</div>
<div>${formattedJoinDateTime} - ${formattedLeftDateTime}</div>
@@ -673,10 +696,16 @@
return echartsOption;
}
/**
*
*/
function handleEchartsRerender() {
initEcharts();
handleSettingsChange();
}
/**
*
*/
function handleSettingsChange() {
handleChangeSettings(activityDetailChartRef);
@@ -716,12 +745,12 @@
}
.tips-popover {
& > div {
margin-bottom: 5px;
margin-bottom: 6px;
font-size: 12px;
}
& > div:last-child {
@extend %flex;
margin-top: 10px;
margin-top: 8px;
i {
margin-right: 3px;
}
src/views/Charts/components/InstanceActivityDetail.vue
+15 -2
View File
@@ -1,6 +1,6 @@
<template>
<div style="width: 100%">
<div style="height: 25px; margin-top: 60px">
<div class="mt-15" style="height: 25px">
<transition name="el-fade-in-linear">
<Location
v-show="!isLoading"
@@ -106,6 +106,9 @@
}
});
/**
*
*/
function initResizeObserver() {
resizeObserver.value = new ResizeObserver((entries) => {
if (!echartsInstance) {
@@ -126,6 +129,9 @@
});
}
/**
*
*/
async function initEcharts() {
if (!activityDetailChartRef.value || !props.activityDetailData || props.activityDetailData.length === 0) {
isLoading.value = false;
@@ -183,6 +189,10 @@
setTimeout(afterInit, 50);
}
/**
*
* @param params
*/
function handleClickYAxisLabel(params) {
const userData = usersFirstActivity.value[params.dataIndex];
if (userData?.user_id) {
@@ -190,6 +200,9 @@
}
}
/**
*
*/
function getNewOption() {
if (!props.activityDetailData || props.activityDetailData.length === 0) {
return {
@@ -346,7 +359,7 @@
return `
<div style="display: flex; align-items: center;">
<div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 5px;"></div>
<div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 6px;"></div>
<div>
<div>${instanceData.display_name} ${friendOrFavIcon(instanceData.display_name)}</div>
<div>${formattedJoinDateTime} - ${formattedLeftDateTime}</div>