feat(ui): 添加层级拖动按钮并优化迷你地图显示逻辑
在TopNav组件中添加层级拖动功能按钮,支持切换层级拖动模式 调整迷你地图在移动端和桌面端的显示逻辑,移动端默认隐藏 新增项目配置文件和提示文件
This commit is contained in:
@@ -311,6 +311,7 @@ body {
|
||||
|
||||
.vue-flow__minimap {
|
||||
@apply !bg-white/80 !backdrop-blur-md !border-slate-200 !shadow-2xl !rounded-xl !overflow-hidden !transition-all;
|
||||
display: none !important;
|
||||
bottom: 130px !important;
|
||||
right: 1rem !important;
|
||||
width: 140px !important;
|
||||
@@ -326,6 +327,7 @@ body {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.vue-flow__minimap {
|
||||
display: block !important;
|
||||
bottom: 1.5rem !important;
|
||||
right: 1.5rem !important;
|
||||
width: 220px !important;
|
||||
|
||||
@@ -12,7 +12,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
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:
|
||||
@@ -146,6 +146,16 @@ const callAndClose = (fn: () => void) => {
|
||||
<span>{{ props.t('nav.center') }}</span>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
@click="props.config.showMiniMap = !props.config.showMiniMap"
|
||||
class="toolbar-btn border-slate-100"
|
||||
|
||||
Reference in New Issue
Block a user