feat(ui): 添加层级拖动按钮并优化迷你地图显示逻辑
在TopNav组件中添加层级拖动功能按钮,支持切换层级拖动模式 调整迷你地图在移动端和桌面端的显示逻辑,移动端默认隐藏 新增项目配置文件和提示文件
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user