fix:大量tooltip对象

This commit is contained in:
jxxghp
2025-04-11 15:20:36 +08:00
parent 96a0ce8c5f
commit 16d62642f6
6 changed files with 82 additions and 173 deletions

View File

@@ -228,41 +228,18 @@ onMounted(() => {
<!-- 站点特性图标 -->
<div class="site-features flex items-center gap-1 ml-auto">
<VTooltip>
<template #activator="{ props }">
<div v-if="cardProps.site?.limit_interval" v-bind="props" class="feature-icon-wrapper">
<VIcon icon="mdi-speedometer" size="16" class="site-feature-icon" />
</div>
</template>
<span>流控</span>
</VTooltip>
<VTooltip>
<template #activator="{ props }">
<div v-if="cardProps.site?.proxy === 1" v-bind="props" class="feature-icon-wrapper">
<VIcon icon="mdi-network-outline" size="16" class="site-feature-icon" />
</div>
</template>
<span>代理</span>
</VTooltip>
<VTooltip>
<template #activator="{ props }">
<div v-if="cardProps.site?.render === 1" v-bind="props" class="feature-icon-wrapper">
<VIcon icon="mdi-apple-safari" size="16" class="site-feature-icon" />
</div>
</template>
<span>仿真</span>
</VTooltip>
<VTooltip>
<template #activator="{ props }">
<div v-if="cardProps.site?.filter" v-bind="props" class="feature-icon-wrapper">
<VIcon icon="mdi-filter-cog-outline" size="16" class="site-feature-icon" />
</div>
</template>
<span>过滤</span>
</VTooltip>
<div v-if="cardProps.site?.limit_interval" class="feature-icon-wrapper">
<VIcon icon="mdi-speedometer" size="16" class="site-feature-icon" />
</div>
<div v-if="cardProps.site?.proxy === 1" class="feature-icon-wrapper">
<VIcon icon="mdi-network-outline" size="16" class="site-feature-icon" />
</div>
<div v-if="cardProps.site?.render === 1" class="feature-icon-wrapper">
<VIcon icon="mdi-apple-safari" size="16" class="site-feature-icon" />
</div>
<div v-if="cardProps.site?.filter" class="feature-icon-wrapper">
<VIcon icon="mdi-filter-cog-outline" size="16" class="site-feature-icon" />
</div>
</div>
</div>
</div>
@@ -309,69 +286,48 @@ onMounted(() => {
<!-- 右侧操作按钮区 -->
<div class="site-card-actions">
<VTooltip>
<template #activator="{ props }">
<IconBtn
v-bind="props"
elevation="0"
class="site-action-btn test-btn"
@click.stop="testSite"
:class="{ 'testing': testButtonDisable }"
>
<div class="test-btn-content">
<div class="pulse-dot" :class="statColor"></div>
</div>
<div v-if="testButtonDisable" class="loading-overlay">
<div class="loading-spinner">
<div class="spinner-circle"></div>
<div class="spinner-circle-dot"></div>
</div>
<span class="loading-text">测试中</span>
</div>
</IconBtn>
</template>
<span>测试站点连通性</span>
</VTooltip>
<VTooltip v-if="!cardProps.site?.public">
<template #activator="{ props }">
<IconBtn v-bind="props" elevation="0" class="site-action-btn" @click.stop="handleSiteUserData">
<VIcon icon="mdi-chart-bell-curve" size="18" />
</IconBtn>
</template>
<span>查看站点数据</span>
</VTooltip>
<VTooltip v-if="!cardProps.site?.public">
<template #activator="{ props }">
<IconBtn v-bind="props" elevation="0" class="site-action-btn" @click.stop="handleSiteUpdate">
<VIcon icon="mdi-refresh" size="18" />
</IconBtn>
</template>
<span>更新Cookie/UA</span>
</VTooltip>
<VTooltip>
<template #activator="{ props }">
<IconBtn v-bind="props" elevation="0" class="site-action-btn more-btn">
<VIcon icon="mdi-dots-vertical" size="18" />
<VMenu activator="parent" close-on-content-click location="left">
<VList density="compact" nav class="dropdown-menu">
<VListItem @click="siteEditDialog = true" base-color="info">
<template #prepend>
<VIcon icon="mdi-file-edit-outline" size="small" />
</template>
<VListItemTitle>编辑站点</VListItemTitle>
</VListItem>
<VListItem @click="deleteSiteInfo">
<template #prepend>
<VIcon icon="mdi-delete-outline" size="small" color="error" />
</template>
<VListItemTitle class="text-error">删除站点</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</IconBtn>
</template>
<span>更多操作</span>
</VTooltip>
<IconBtn
elevation="0"
class="site-action-btn test-btn"
@click.stop="testSite"
:class="{ 'testing': testButtonDisable }"
>
<div class="test-btn-content">
<div class="pulse-dot" :class="statColor"></div>
</div>
<div v-if="testButtonDisable" class="loading-overlay">
<div class="loading-spinner">
<div class="spinner-circle"></div>
<div class="spinner-circle-dot"></div>
</div>
<span class="loading-text">测试中</span>
</div>
</IconBtn>
<IconBtn elevation="0" class="site-action-btn" @click.stop="handleSiteUserData">
<VIcon icon="mdi-chart-bell-curve" size="18" />
</IconBtn>
<IconBtn elevation="0" class="site-action-btn" @click.stop="handleSiteUpdate">
<VIcon icon="mdi-refresh" size="18" />
</IconBtn>
<IconBtn elevation="0" class="site-action-btn more-btn">
<VIcon icon="mdi-dots-vertical" size="18" />
<VMenu activator="parent" close-on-content-click location="left">
<VList density="compact" nav class="dropdown-menu">
<VListItem @click="siteEditDialog = true" base-color="info">
<template #prepend>
<VIcon icon="mdi-file-edit-outline" size="small" />
</template>
<VListItemTitle>编辑站点</VListItemTitle>
</VListItem>
<VListItem @click="deleteSiteInfo">
<template #prepend>
<VIcon icon="mdi-delete-outline" size="small" color="error" />
</template>
<VListItemTitle class="text-error">删除站点</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</IconBtn>
</div>
</VCard>

View File

@@ -216,7 +216,6 @@ onUnmounted(() => {
class="action-btn"
>
<VIcon icon="mdi-pencil" />
<VTooltip v-if="!isMobile" activator="parent" location="bottom">编辑用户</VTooltip>
</VBtn>
<VBtn
@@ -229,7 +228,6 @@ onUnmounted(() => {
class="action-btn"
>
<VIcon icon="mdi-delete" />
<VTooltip v-if="!isMobile" activator="parent" location="bottom">删除用户</VTooltip>
</VBtn>
</div>
</div>

View File

@@ -207,15 +207,12 @@ const isMacOS = computed(() => {
<VToolbarItems>
<VBtn icon variant="text" @click="importCodeDialog = true" class="ms-2">
<VIcon size="24" color="white" icon="mdi-import" />
<VTooltip activator="parent" location="bottom">导入流程代码</VTooltip>
</VBtn>
<VBtn icon variant="text" @click="shareWorkflow" class="ms-2">
<VIcon size="24" color="white" icon="mdi-share" />
<VTooltip activator="parent" location="bottom">分享流程代码</VTooltip>
</VBtn>
<VBtn icon variant="text" @click="updateWorkflow" class="ms-2 me-3">
<VIcon size="24" color="white" icon="mdi-content-save" />
<VTooltip activator="parent" location="bottom">保存流程</VTooltip>
</VBtn>
</VToolbarItems>
</VToolbar>

View File

@@ -656,41 +656,21 @@ onMounted(() => {
</VMenu>
</IconBtn>
<span v-if="hover.isHovering && display.mdAndUp.value && !selectMode" class="flex">
<VTooltip text="识别">
<template #activator="{ props }">
<IconBtn v-bind="props" @click.stop="recognize(item.path)">
<VIcon icon="mdi-text-recognition" />
</IconBtn>
</template>
</VTooltip>
<VTooltip text="刮削">
<template #activator="{ props }">
<IconBtn v-bind="props" @click.stop="scrape(item)">
<VIcon icon="mdi-auto-fix" />
</IconBtn>
</template>
</VTooltip>
<VTooltip text="重命名">
<template #activator="{ props }">
<IconBtn v-bind="props" @click.stop="showRenmae(item)">
<VIcon icon="mdi-rename" />
</IconBtn>
</template>
</VTooltip>
<VTooltip text="整理">
<template #activator="{ props }">
<IconBtn v-bind="props" @click.stop="showTransfer(item)">
<VIcon icon="mdi-folder-arrow-right" />
</IconBtn>
</template>
</VTooltip>
<VTooltip text="删除">
<template #activator="{ props }">
<IconBtn v-bind="props" @click.stop="deleteItem(item)">
<VIcon icon="mdi-delete-outline" color="error" />
</IconBtn>
</template>
</VTooltip>
<IconBtn @click.stop="recognize(item.path)">
<VIcon icon="mdi-text-recognition" />
</IconBtn>
<IconBtn @click.stop="scrape(item)">
<VIcon icon="mdi-auto-fix" />
</IconBtn>
<IconBtn @click.stop="showRenmae(item)">
<VIcon icon="mdi-rename" />
</IconBtn>
<IconBtn @click.stop="showTransfer(item)">
<VIcon icon="mdi-folder-arrow-right" />
</IconBtn>
<IconBtn @click.stop="deleteItem(item)">
<VIcon icon="mdi-delete-outline" color="error" />
</IconBtn>
</span>
</template>
</VListItem>

View File

@@ -313,14 +313,9 @@ function getIndentLevel(path: string, ancestorPath: string) {
:color="currentPath === directory.path ? 'primary' : 'amber-darken-1'"
class="me-1"
/>
<VTooltip :disabled="directory.name.length <= 18">
<template #activator="{ props: tooltipProps }">
<span class="folder-name" v-bind="tooltipProps">
{{ directory.name }}
</span>
</template>
<span class="folder-name">
{{ directory.name }}
</VTooltip>
</span>
</div>
</div>
@@ -367,14 +362,9 @@ function getIndentLevel(path: string, ancestorPath: string) {
:color="currentPath === item.dir.path ? 'primary' : 'amber-darken-1'"
class="me-1"
/>
<VTooltip :disabled="item.dir.name.length <= 18">
<template #activator="{ props: tooltipProps }">
<span class="folder-name" v-bind="tooltipProps">
{{ item.dir.name }}
</span>
</template>
<span class="folder-name">
{{ item.dir.name }}
</VTooltip>
</span>
</div>
</div>
</div>

View File

@@ -119,7 +119,7 @@ const sortIcon = computed(() => {
<VToolbarItems class="overflow-hidden">
<VMenu v-if="inProps.storages?.length || 0 > 1" offset-y>
<template #activator="{ props }">
<VBtn v-bind="props">
<VBtn>
<VIcon icon="mdi-arrow-down-drop-circle-outline" />
</VBtn>
</template>
@@ -155,28 +155,16 @@ const sortIcon = computed(() => {
</template>
</VToolbarItems>
<div class="flex-grow-1" />
<VTooltip text="调整排序">
<template #activator="{ props }">
<IconBtn v-bind="props" @click="changeSort">
<VIcon :icon="sortIcon" />
</IconBtn>
</template>
</VTooltip>
<VTooltip text="返回上一级" v-if="pathSegments.length > 0">
<template #activator="{ props }">
<IconBtn v-bind="props" @click="goUp">
<VIcon icon="mdi-arrow-up-bold-outline" />
</IconBtn>
</template>
</VTooltip>
<IconBtn @click="changeSort">
<VIcon :icon="sortIcon" />
</IconBtn>
<IconBtn @click="goUp">
<VIcon icon="mdi-arrow-up-bold-outline" />
</IconBtn>
<VDialog v-model="newFolderPopper" max-width="50rem">
<template #activator="{ props }">
<IconBtn v-bind="props">
<VTooltip text="新建文件夹">
<template #activator="{ props: _props }">
<VIcon v-bind="_props" icon="mdi-folder-plus-outline" />
</template>
</VTooltip>
<IconBtn>
<VIcon v-bind="_props" icon="mdi-folder-plus-outline" />
</IconBtn>
</template>
<VCard title="新建文件夹">