feat(ui): 添加层级拖动按钮并优化迷你地图显示逻辑

在TopNav组件中添加层级拖动功能按钮,支持切换层级拖动模式
调整迷你地图在移动端和桌面端的显示逻辑,移动端默认隐藏
新增项目配置文件和提示文件
This commit is contained in:
liuziting
2026-01-22 13:03:25 +08:00
parent 2708ccd864
commit a66dc9b42d
2 changed files with 23 additions and 1 deletions

View File

@@ -311,6 +311,7 @@ body {
.vue-flow__minimap { .vue-flow__minimap {
@apply !bg-white/80 !backdrop-blur-md !border-slate-200 !shadow-2xl !rounded-xl !overflow-hidden !transition-all; @apply !bg-white/80 !backdrop-blur-md !border-slate-200 !shadow-2xl !rounded-xl !overflow-hidden !transition-all;
display: none !important;
bottom: 130px !important; bottom: 130px !important;
right: 1rem !important; right: 1rem !important;
width: 140px !important; width: 140px !important;
@@ -326,6 +327,7 @@ body {
@media (min-width: 768px) { @media (min-width: 768px) {
.vue-flow__minimap { .vue-flow__minimap {
display: block !important;
bottom: 1.5rem !important; bottom: 1.5rem !important;
right: 1.5rem !important; right: 1.5rem !important;
width: 220px !important; width: 220px !important;

View File

@@ -12,7 +12,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { BackgroundVariant } from '@vue-flow/background' import { BackgroundVariant } from '@vue-flow/background'
// 图标:所有按钮与状态展示 // 图标:所有按钮与状态展示
import { ChevronDown, ChevronUp, Download, Focus, LayoutDashboard, Menu, Sparkles, Target, X, Trash2, Globe, Settings } from 'lucide-vue-next' import { ChevronDown, ChevronUp, Download, Focus, LayoutDashboard, Menu, Sparkles, Target, X, Trash2, Globe, Settings, ArrowLeftRight, Map, Palette } from 'lucide-vue-next'
/** /**
* props * props
@@ -146,6 +146,16 @@ const callAndClose = (fn: () => void) => {
<span>{{ props.t('nav.center') }}</span> <span>{{ props.t('nav.center') }}</span>
</button> </button>
<button
@click="props.config.hierarchicalDragging = !props.config.hierarchicalDragging"
class="toolbar-btn flex-shrink-0"
:class="props.config.hierarchicalDragging ? 'text-orange-500 bg-orange-50 border-orange-100' : 'text-slate-400 hover:text-slate-600'"
:title="props.t('nav.hierarchicalDragging')"
>
<ArrowLeftRight class="w-3.5 h-3.5 md:w-4 h-4" />
<span>{{ props.t('nav.hierarchicalDragging') }}</span>
</button>
<div class="h-4 w-[1px] bg-slate-100 mx-1 flex-shrink-0"></div> <div class="h-4 w-[1px] bg-slate-100 mx-1 flex-shrink-0"></div>
<button @click="props.onGenerateSummary" class="toolbar-btn text-orange-600 hover:bg-orange-50 border-orange-100 flex-shrink-0" :title="props.t('nav.summary')"> <button @click="props.onGenerateSummary" class="toolbar-btn text-orange-600 hover:bg-orange-50 border-orange-100 flex-shrink-0" :title="props.t('nav.summary')">
@@ -277,6 +287,16 @@ const callAndClose = (fn: () => void) => {
</div> </div>
</div> </div>
<button
@click="props.config.hierarchicalDragging = !props.config.hierarchicalDragging"
class="toolbar-btn"
:class="props.config.hierarchicalDragging ? 'text-orange-500 bg-orange-50 border-orange-100' : 'text-slate-400 hover:text-slate-600'"
:title="props.t('nav.hierarchicalDragging')"
>
<ArrowLeftRight class="w-4 h-4" />
<span>{{ props.t('nav.hierarchicalDragging') }}</span>
</button>
<button <button
@click="props.config.showMiniMap = !props.config.showMiniMap" @click="props.config.showMiniMap = !props.config.showMiniMap"
class="toolbar-btn border-slate-100" class="toolbar-btn border-slate-100"