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.
627 lines
14 KiB
627 lines
14 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="$t('leftMenu.hideMenu')">
|
|
<i class="el-icon-arrow-left"></i>
|
|
</div>
|
|
|
|
<!-- 一级菜单 -->
|
|
<div class="menu-container">
|
|
<draggable
|
|
v-model="localMenuItems"
|
|
class="menu-icons"
|
|
:animation="200"
|
|
ghost-class="ghost-item"
|
|
chosen-class="chosen-item"
|
|
drag-class="dragging-item"
|
|
handle=".menu-item"
|
|
:disabled="!isEditMode"
|
|
@end="onDragEnd"
|
|
@wheel.native="handleWheel"
|
|
>
|
|
<div
|
|
v-for="item in localMenuItems"
|
|
:key="item.id"
|
|
class="menu-item"
|
|
:class="{ active: isItemActive(item), 'dragging': isDragging, 'edit-mode': isEditMode }"
|
|
@click="handleSelectMenu(item)"
|
|
@contextmenu.prevent="handleRightClick(item)"
|
|
:title="item.name"
|
|
>
|
|
<svg-icon v-if="isSvgIcon(item.icon)" :icon-class="item.icon" class="menu-item-svg-icon" />
|
|
<i v-else :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="$t('leftMenu.addNewMenu')">
|
|
<i class="el-icon-plus"></i>
|
|
</div>
|
|
|
|
<div v-if="isEditMode" class="save-btn" @click="handleSave" :title="$t('leftMenu.saveIconEdit')">
|
|
<i class="el-icon-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 删除确认弹窗 -->
|
|
<el-dialog
|
|
:title="$t('leftMenu.confirmDelete')"
|
|
: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>{{ $t('leftMenu.deleteConfirm', { name: itemToDelete ? itemToDelete.name : '' }) }}</span>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="showDeleteDialog = false" size="small">{{ $t('leftMenu.cancel') }}</el-button>
|
|
<el-button type="danger" @click="confirmDelete" size="small">{{ $t('leftMenu.delete') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 图标选择弹窗 -->
|
|
<icon-select-dialog
|
|
:visible.sync="showIconSelectDialog"
|
|
:available-icons="availableIcons"
|
|
@confirm="confirmAddIcons"
|
|
@reset-default="handleResetDefault"
|
|
/>
|
|
</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: () => []
|
|
},
|
|
/** 与 index 中 defaultMenuItems 一致，用于从选择图标中恢复内置项时使用稳定 id */
|
|
defaultMenuItems: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'left'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
localMenuItems: [],
|
|
isDragging: false,
|
|
showDeleteDialog: false,
|
|
itemToDelete: null,
|
|
showIconSelectDialog: false,
|
|
// 拖拽配置已直接通过 draggable 组件的 props 传入（animation、ghost-class 等）
|
|
}
|
|
},
|
|
watch: {
|
|
menuItems: {
|
|
handler(newVal) {
|
|
this.localMenuItems = [...newVal]
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
/** 判断是否为本地 SVG 图标（非 Element 的 el-icon-* 类名） */
|
|
isSvgIcon(icon) {
|
|
return icon && typeof icon === 'string' && !icon.startsWith('el-icon-')
|
|
},
|
|
|
|
/** 框选等项通过图标编辑添加时 id 为随机字符串，activeMenu 固定为 platformBoxSelect，需按 action 匹配高亮 */
|
|
isItemActive(item) {
|
|
if (this.activeMenu === item.id) return true
|
|
if (this.activeMenu === 'platformBoxSelect' && item.action === 'platformBoxSelect') return true
|
|
return false
|
|
},
|
|
|
|
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) {
|
|
const defaults = this.defaultMenuItems || []
|
|
selectedItems.forEach(item => {
|
|
const preset = defaults.find(d => d.id === item.id)
|
|
if (preset) {
|
|
this.localMenuItems.push({ ...preset })
|
|
} else {
|
|
const newId = Date.now().toString() + Math.random().toString(36).substr(2, 9)
|
|
this.localMenuItems.push({
|
|
id: newId,
|
|
name: item.name,
|
|
icon: item.icon,
|
|
action: item.id
|
|
})
|
|
}
|
|
})
|
|
this.$emit('update:menuItems', this.localMenuItems)
|
|
},
|
|
|
|
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
|
|
},
|
|
|
|
handleSave() {
|
|
this.$emit('save-menu-items', this.localMenuItems)
|
|
this.$emit('exit-icon-edit')
|
|
this.$message.success(this.$t('leftMenu.iconEditSaved'))
|
|
},
|
|
|
|
handleResetDefault() {
|
|
this.localMenuItems = []
|
|
this.$emit('reset-menu-items')
|
|
this.$message.success(this.$t('leftMenu.resetDefault'))
|
|
}
|
|
}
|
|
}
|
|
</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(22, 93, 255, 0.1);
|
|
border-radius: 8px;
|
|
z-index: 90;
|
|
box-shadow: 0 4px 12px rgba(22, 93, 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;
|
|
min-height: 45px;
|
|
flex-direction: row;
|
|
padding: 8px 10px 8px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.floating-left-menu.position-bottom {
|
|
bottom: 10px;
|
|
top: auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: auto;
|
|
min-width: 200px;
|
|
min-height: 45px;
|
|
flex-direction: row;
|
|
padding: 8px 10px 8px 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.floating-left-menu.position-left {
|
|
top: 70px;
|
|
left: 20px;
|
|
width: auto;
|
|
min-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: #165dff;
|
|
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: 0px;
|
|
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 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin: 0;
|
|
overflow: visible;
|
|
flex: 1;
|
|
width: auto;
|
|
}
|
|
|
|
.position-top .menu-container,
|
|
.position-bottom .menu-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 5px;
|
|
width: 100%;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.position-top .menu-icons .menu-item,
|
|
.position-bottom .menu-icons .menu-item {
|
|
width: 32px;
|
|
height: 32px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.position-left .menu-icons {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-rows: repeat(auto-fill, 35px);
|
|
grid-template-columns: 32px;
|
|
gap: 5px;
|
|
margin-top: 30px;
|
|
max-height: calc(100vh - 280px);
|
|
overflow: visible;
|
|
width: auto;
|
|
}
|
|
|
|
.position-left .menu-icons .menu-item {
|
|
width: 32px;
|
|
height: 32px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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 .menu-item-svg-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.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(22, 93, 255, 0.1);
|
|
color: #165dff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(22, 93, 255, 0.2);
|
|
}
|
|
|
|
.menu-item.active {
|
|
background: rgba(22, 93, 255, 0.15);
|
|
color: #165dff;
|
|
box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
|
|
}
|
|
|
|
.menu-item.edit-mode {
|
|
cursor: grab;
|
|
}
|
|
|
|
.menu-item.edit-mode:hover {
|
|
background: rgba(22, 93, 255, 0.1);
|
|
color: #165dff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(22, 93, 255, 0.2);
|
|
}
|
|
|
|
.ghost-item {
|
|
opacity: 0.4;
|
|
background: rgba(22, 93, 255, 0.05);
|
|
border: 2px dashed rgba(22, 93, 255, 0.3);
|
|
}
|
|
|
|
.chosen-item {
|
|
background: rgba(22, 93, 255, 0.2);
|
|
color: #165dff;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.4);
|
|
}
|
|
|
|
.dragging-item {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
box-shadow: 0 8px 20px rgba(22, 93, 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(22, 93, 255, 0.1);
|
|
color: #165dff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(22, 93, 255, 0.2);
|
|
}
|
|
|
|
.save-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(5px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
color: #67c23a;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.position-top .save-btn,
|
|
.position-bottom .save-btn {
|
|
margin-left: 0px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.position-left .save-btn {
|
|
margin-top: 10px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.save-btn:hover {
|
|
background: rgba(103, 194, 58, 0.1);
|
|
color: #67c23a;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 10px rgba(103, 194, 58, 0.2);
|
|
}
|
|
|
|
.delete-dialog-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
</style>
|
|
|