You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
524 lines
11 KiB
524 lines
11 KiB
<template>
|
|
<div>
|
|
<div
|
|
class="floating-left-menu"
|
|
:class="{ 'hidden': isHidden, 'edit-mode': isEditMode, 'position-top': position === 'top', 'position-bottom': position === 'bottom', 'position-left': position === 'left' }"
|
|
@mouseenter="showTooltip = true"
|
|
@mouseleave="showTooltip = false"
|
|
>
|
|
<!-- 隐藏按钮（>箭头）。 -->
|
|
<div class="hide-btn" @click="handleHide" title="隐藏菜单">
|
|
<i class="el-icon-arrow-left"></i>
|
|
</div>
|
|
|
|
<!-- 一级菜单 -->
|
|
<draggable
|
|
v-model="localMenuItems"
|
|
class="menu-icons"
|
|
:options="dragOptions"
|
|
:disabled="!isEditMode"
|
|
@end="onDragEnd"
|
|
@wheel.native="handleWheel"
|
|
>
|
|
<div
|
|
v-for="item in localMenuItems"
|
|
:key="item.id"
|
|
class="menu-item"
|
|
:class="{ active: activeMenu === item.id, 'dragging': isDragging, 'edit-mode': isEditMode }"
|
|
@click="handleSelectMenu(item)"
|
|
@contextmenu.prevent="handleRightClick(item)"
|
|
:title="item.name"
|
|
>
|
|
<i :class="item.icon"></i>
|
|
<div v-if="isEditMode" class="delete-icon" @click.stop="quickDelete(item)">
|
|
<i class="el-icon-close"></i>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
|
|
<!-- 新增按钮（仅在编辑模式下显示） -->
|
|
<div v-if="isEditMode" class="add-btn" @click="handleAdd" title="添加新菜单">
|
|
<i class="el-icon-plus"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 删除确认弹窗 -->
|
|
<el-dialog
|
|
title="确认删除"
|
|
:visible.sync="showDeleteDialog"
|
|
width="300px"
|
|
:modal="true"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
>
|
|
<div class="delete-dialog-content">
|
|
<i class="el-icon-warning" style="color: #E6A23C; font-size: 24px; margin-right: 10px;"></i>
|
|
<span>确定要删除菜单项 "{{ itemToDelete ? itemToDelete.name : '' }}" 吗？</span>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="showDeleteDialog = false" size="small">取消</el-button>
|
|
<el-button type="danger" @click="confirmDelete" size="small">删除</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 图标选择弹窗 -->
|
|
<icon-select-dialog
|
|
:visible.sync="showIconSelectDialog"
|
|
:available-icons="availableIcons"
|
|
@confirm="confirmAddIcons"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import draggable from 'vuedraggable'
|
|
import IconSelectDialog from '../dialogs/IconSelectDialog'
|
|
|
|
export default {
|
|
name: 'LeftMenu',
|
|
components: {
|
|
draggable,
|
|
IconSelectDialog
|
|
},
|
|
props: {
|
|
isHidden: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
menuItems: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
activeMenu: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isEditMode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
availableIcons: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'left'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
localMenuItems: [],
|
|
isDragging: false,
|
|
showDeleteDialog: false,
|
|
itemToDelete: null,
|
|
showIconSelectDialog: false,
|
|
dragOptions: {
|
|
animation: 200,
|
|
ghostClass: 'ghost-item',
|
|
chosenClass: 'chosen-item',
|
|
dragClass: 'dragging-item',
|
|
handle: '.menu-item',
|
|
delay: 0
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
menuItems: {
|
|
handler(newVal) {
|
|
this.localMenuItems = [...newVal]
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleHide() {
|
|
this.$emit('hide')
|
|
},
|
|
|
|
handleSelectMenu(item) {
|
|
if (this.isEditMode) {
|
|
return
|
|
}
|
|
if (item.action) {
|
|
this.$emit('menu-action', item.action)
|
|
}
|
|
this.$emit('select', item)
|
|
},
|
|
|
|
onDragEnd(evt) {
|
|
this.isDragging = false
|
|
this.$emit('update:menuItems', this.localMenuItems)
|
|
this.$emit('drag-end', this.localMenuItems)
|
|
},
|
|
|
|
handleAdd() {
|
|
this.showIconSelectDialog = true
|
|
},
|
|
|
|
confirmAddIcons(selectedItems) {
|
|
selectedItems.forEach(item => {
|
|
const newId = Date.now().toString() + Math.random().toString(36).substr(2, 9)
|
|
const newMenuItem = {
|
|
id: newId,
|
|
name: item.name,
|
|
icon: item.icon,
|
|
action: item.id
|
|
}
|
|
this.localMenuItems.push(newMenuItem)
|
|
})
|
|
this.$emit('update:menuItems', this.localMenuItems)
|
|
this.$emit('add-items', selectedItems)
|
|
},
|
|
|
|
quickDelete(item) {
|
|
const index = this.localMenuItems.findIndex(menuItem => menuItem.id === item.id)
|
|
if (index > -1) {
|
|
this.localMenuItems.splice(index, 1)
|
|
this.$emit('update:menuItems', this.localMenuItems)
|
|
this.$emit('delete', item)
|
|
}
|
|
},
|
|
|
|
handleRightClick(item) {
|
|
this.itemToDelete = item
|
|
this.showDeleteDialog = true
|
|
},
|
|
|
|
handleWheel(event) {
|
|
if (this.position === 'top' || this.position === 'bottom') {
|
|
event.preventDefault()
|
|
const container = event.currentTarget
|
|
container.scrollLeft += event.deltaY
|
|
}
|
|
},
|
|
|
|
confirmDelete() {
|
|
if (this.itemToDelete) {
|
|
const index = this.localMenuItems.findIndex(item => item.id === this.itemToDelete.id)
|
|
if (index > -1) {
|
|
this.localMenuItems.splice(index, 1)
|
|
this.$emit('update:menuItems', this.localMenuItems)
|
|
this.$emit('delete', this.itemToDelete)
|
|
}
|
|
}
|
|
this.showDeleteDialog = false
|
|
this.itemToDelete = null
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 左侧菜单栏 - 蓝色主题 。*/
|
|
.floating-left-menu {
|
|
position: absolute;
|
|
top: 70px;
|
|
left: 20px;
|
|
width: 42px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(0, 138, 255, 0.1);
|
|
border-radius: 8px;
|
|
z-index: 90;
|
|
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
|
|
padding: 12px 5px;
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.floating-left-menu.edit-mode {
|
|
width: 50px;
|
|
}
|
|
|
|
.floating-left-menu.position-top {
|
|
top: 60px;
|
|
bottom: auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: auto;
|
|
min-width: 200px;
|
|
max-width: 800px;
|
|
height: 40px;
|
|
flex-direction: row;
|
|
padding: 5px 4px 5px 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.floating-left-menu.position-bottom {
|
|
bottom: 10px;
|
|
top: auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: auto;
|
|
min-width: 200px;
|
|
max-width: 1100px;
|
|
height: 40px;
|
|
flex-direction: row;
|
|
padding: 5px 5px 5px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.floating-left-menu.position-left {
|
|
top: 70px;
|
|
left: 20px;
|
|
width: 42px;
|
|
}
|
|
|
|
.floating-left-menu.hidden {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.floating-left-menu.position-top.hidden,
|
|
.floating-left-menu.position-bottom.hidden {
|
|
transform: translateX(-50%) translateY(-100%);
|
|
}
|
|
|
|
.hide-btn {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
color: #008aff;
|
|
font-size: 16px;
|
|
transition: all 0.3s;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border-radius: 4px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.position-top .hide-btn,
|
|
.position-bottom .hide-btn {
|
|
top: 50%;
|
|
left: 10px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.position-top .hide-btn i,
|
|
.position-bottom .hide-btn i {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.position-left .hide-btn i {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.menu-icons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
max-height: calc(100vh - 280px);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.position-top .menu-icons,
|
|
.position-bottom .menu-icons {
|
|
flex-direction: row;
|
|
margin: 0 0 0 40px;
|
|
max-height: 40px;
|
|
max-width: calc(100% - 50px);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex: 1;
|
|
padding-right: 10px;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.position-left .menu-icons {
|
|
flex-direction: column;
|
|
margin-top: 30px;
|
|
max-height: calc(100vh - 280px);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.menu-icons::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.menu-icons::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
}
|
|
|
|
.menu-icons::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
|
|
.position-top .menu-icons::-webkit-scrollbar,
|
|
.position-bottom .menu-icons::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.position-top .menu-icons::-webkit-scrollbar-thumb,
|
|
.position-bottom .menu-icons::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
}
|
|
|
|
.position-top .menu-icons::-webkit-scrollbar-track,
|
|
.position-bottom .menu-icons::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
color: #555;
|
|
font-size: 16px;
|
|
position: relative;
|
|
transition: all 0.3s;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(5px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.menu-item.edit-mode {
|
|
cursor: grab;
|
|
}
|
|
|
|
.delete-icon {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #F56C6C;
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.2s;
|
|
z-index: 10;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.menu-item:hover .delete-icon {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.delete-icon:hover {
|
|
background: #F78989;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.menu-item:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background: rgba(0, 138, 255, 0.1);
|
|
color: #008aff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
|
|
}
|
|
|
|
.menu-item.active {
|
|
background: rgba(0, 138, 255, 0.15);
|
|
color: #008aff;
|
|
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
|
|
}
|
|
|
|
.menu-item.edit-mode {
|
|
cursor: grab;
|
|
}
|
|
|
|
.menu-item.edit-mode:hover {
|
|
background: rgba(0, 138, 255, 0.1);
|
|
color: #008aff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
|
|
}
|
|
|
|
.ghost-item {
|
|
opacity: 0.4;
|
|
background: rgba(0, 138, 255, 0.05);
|
|
border: 2px dashed rgba(0, 138, 255, 0.3);
|
|
}
|
|
|
|
.chosen-item {
|
|
background: rgba(0, 138, 255, 0.2);
|
|
color: #008aff;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.4);
|
|
}
|
|
|
|
.dragging-item {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
box-shadow: 0 8px 20px rgba(0, 138, 255, 0.3);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.add-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
color: #555;
|
|
font-size: 16px;
|
|
position: relative;
|
|
transition: all 0.3s;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(5px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.position-top .add-btn,
|
|
.position-bottom .add-btn {
|
|
margin-left: 0px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.position-left .add-btn {
|
|
margin-top: 10px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.add-btn:hover {
|
|
background: rgba(0, 138, 255, 0.1);
|
|
color: #008aff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
|
|
}
|
|
|
|
.delete-dialog-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
</style>
|