扫描库菜单增加

src/views/file/MenuItem.vue

@@ -6,9 +6,17 @@
         :class="{ 'parent-active': isParentActive(menuItemData.id.toString()) }"
     >
         <template #title>
-            <span :class="{ 'titleparent-active': isParentActive(menuItemData.id.toString()) }">
-                {{ menuItemData.folderName }}
-            </span>
+            <div class="menu-title-container">
+                <span :class="{ 'titleparent-active': isParentActive(menuItemData.id.toString()) }">
+                    {{ menuItemData.folderName }}
+                </span>
+                <HcIcon 
+                    name="apps" 
+                    ui="text-2xl"
+                    class="menu-action-icon"
+                    @click.stop="handleIconClick($event, menuItemData)"
+                />
+            </div>
         </template>
         <!-- 递归渲染子节点 -->
         <template v-for="child in menuItemData.childs" :key="child.id">
@@ -20,9 +28,24 @@
     <ElMenuItem 
         v-else
         :index="menuItemData.id.toString()"
+        class="menu-item-container"
     >
-        {{ menuItemData.folderName }}
+        <span>{{ menuItemData.folderName }}</span>
+        <HcIcon 
+            name="apps" 
+            ui="text-2xl"
+            class="menu-action-icon"
+            @click.stop="handleIconClick($event, menuItemData)"
+        />
     </ElMenuItem>
+
+    
+    <!-- 右键菜单 -->
+    <hc-context-menu ref="contextMenuRef" :datas="menuData" @item-click="handleMenuSelect" />
+    <!-- 新增节点 -->
+    <hc-new-dialog v-model="addModal" :loading="addLoading" is-table title="新增节点" @close="addModalClose" @save="addModalSave">
+        eeeeeeee
+    </hc-new-dialog>
 </template>
 
 <script setup>
@@ -54,33 +77,78 @@ watch(() => props.selectedKeyPath, (newVal) => {
     selectedKeyPath.value = newVal || []
 }, { immediate: true })
 
-// 菜单折叠状态
-
-
 // 判断父菜单是否应该激活
 const isParentActive = (parentIndex) => {
     return selectedKeyPath.value.includes(parentIndex)
 }
+
+// 右键菜单数据
+const contextMenuRef = ref(null)
+const menuData = ref([
+    { icon: 'add-circle', label: '新增节点', key: 'test-1' },
+    { icon: 'delete-bin', label: '删除节点', key: 'test-3' },
+])
+
+// 处理图标点击显示右键菜单（传递当前menuItemData）
+const handleIconClick = (event, data) => {
+    console.log(data, 'data')
+    
+    event.preventDefault()
+    contextMenuRef.value?.showMenu(event, data)
+}
+
+// 菜单被点击时输出当前menuItemData
+const handleMenuSelect = (item, data) => {
+    console.log('当前菜单项数据：', data) // 直接输出传递过来的menuItemData
+    console.log('点击的菜单选项：', item) // 可选：同时输出点击的菜单选项
+}
+
+// 新增节点相关
+const addModal = ref(false)
+const addModalClose = () => {
+    addModal.value = false
+}
+const addModalSave = () => { 
+}
+const addLoading = ref(false)
 </script>
 
 <style scoped>
-/* 基础菜单样式 */
+/* 样式保持不变 */
+.menu-title-container,
+.menu-item-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
 
+.menu-action-icon {
+    margin-left: auto;
+    opacity: 0;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+    position: absolute;
+    right: 16px;
+}
+
+.el-sub-menu__title:hover .menu-action-icon,
+.el-menu-item:hover .menu-action-icon {
+    opacity: 1;
+}
 
-/* 菜单项基础样式 */
 .custom-menu .el-menu-item,
 .custom-menu .el-sub-menu__title {
     position: relative;
     transition: all 0.3s ease;
+    padding-right: 40px !important;
 }
 
-/* 选中菜单项样式 */
 .custom-menu .el-menu-item.is-active {
     color: #149BF4 !important;
     background-color: #E6F7FF !important;
 }
 
-/* 选中菜单项右侧边框 */
 .custom-menu .el-menu-item.is-active::after {
     content: '';
     position: absolute;
@@ -91,37 +159,24 @@ const isParentActive = (parentIndex) => {
     background-color: #149BF4;
 }
 
-/* 父菜单标题激活样式 */
 .titleparent-active {
     color: #149BF4 !important;
     font-weight: bold !important;
 }
 
-/* 父菜单激活时箭头变色 - 通过父级激活类控制 */
-.parent-active .el-sub-menu__icon-arrow {
-    color: #149BF4 !important;
-}
-
-/* 解决scoped样式穿透问题 */
-/* :deep(.parent-active) .el-sub-menu__icon-arrow {
-    color: #149BF4 !important;
-} */
 :deep(.el-sub-menu.parent-active) .el-sub-menu__icon-arrow {
   color: #149BF4 !important;
   transition: color 0.3s ease;
 }
-/* 方
-/* 二级菜单背景色 - 保持f7f7f7 */
+
 .custom-menu .el-sub-menu .el-menu {
     background-color: #F7F7F7 !important;
 }
 
-/* 二级菜单项默认样式 */
 .custom-menu .el-sub-menu .el-menu .el-menu-item {
     background-color: #F7F7F7 !important;
 }
 
-/* 二级菜单项选中样式 */
 .custom-menu .el-sub-menu .el-menu .el-menu-item.is-active {
     background-color: #E6F7FF !important;
 }

src/views/file/scan.vue

@@ -4,6 +4,7 @@
             <template #left>
                 <hc-card scrollbar>
                     <!-- Element Plus 菜单组件 -->
+                    <el-button hc-btn type="primary" class="mb-2" @click="addClick">新增节点</el-button>
                     <ElMenu
                         v-if="folderData.length > 0"
                         v-loading="folderLoading"
@@ -30,16 +31,16 @@
                 <template #header>
                     <el-button hc-btn color="#12B9A7" class="text-white" :disabled="!folderId" @click="movesClick">移动</el-button>
                     <!-- <el-button hc-btn color="#149BF4" class="text-white">自动识别</el-button> -->
-                    <HcTooltip keys="file_records_btn_split">
-                        <el-badge :value="taskMount" class="ml-1 mr-4 cursor-pointer" :offset="[5, 5]" @click.native.stop="taskCountClick">
-                            <el-button hc-btn style="background-color: #8B5CF6; border-color: #8B5CF6; color:white" @click.native.stop="splitClick">自动识别</el-button>
-                            <template #content="{ value }">
-                                <div class="custom-content">
-                                    <span>{{ value }}</span>
-                                </div>
-                            </template>
-                        </el-badge>
-                    </HcTooltip>
+                   
+                    <el-badge :value="taskMount" class="ml-1 mr-4 cursor-pointer" :offset="[5, 5]" @click.native.stop="taskCountClick">
+                        <el-button hc-btn style="background-color: #8B5CF6; border-color: #8B5CF6; color:white" @click.native.stop="splitClick">自动识别</el-button>
+                        <template #content="{ value }">
+                            <div class="custom-content">
+                                <span>{{ value }}</span>
+                            </div>
+                        </template>
+                    </el-badge>
+                    
                     <el-button hc-btn class="text-white" color="#149BF4" :disabled="!tableCheckedKeys.length" @click="editClick">编辑</el-button>
                     <el-button v-del-com:[delClick] hc-btn type="danger" :disabled="!tableCheckedKeys.length">删除</el-button>
                 </template>
@@ -576,6 +577,10 @@ const getSplitInfo = async ()=>{
 const splitModal = ref(false)
 const splitModalClose = ()=>{
     splitModal.value = false
+}
+//新增节点
+const addClick = ()=>{
+    
 }
 </script>