From d958e1e0a3f9c1e051e803831552ec7d62e76da6 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期二, 04 三月 2025 11:19:28 +0800
Subject: [PATCH] 模型库更新
---
src/components/TreeMenu.vue | 158 +++++++++++++++++++++++++++++-----------------------
1 files changed, 87 insertions(+), 71 deletions(-)
diff --git a/src/components/TreeMenu.vue b/src/components/TreeMenu.vue
index c5e57bc..41ed582 100644
--- a/src/components/TreeMenu.vue
+++ b/src/components/TreeMenu.vue
@@ -1,6 +1,13 @@
<template>
<div class="tree-menu">
- <SearchBar @search="handleSearch" />
+ <div class="topMenu">
+ <span class="topMenu-title">妯″瀷搴�</span>
+ <div class="btnGroup">
+ <el-icon class="icon1"><FolderAdd /></el-icon>
+ <el-icon class="icon2"><Edit /></el-icon>
+ <el-icon class="icon3"><Delete /></el-icon>
+ </div>
+ </div>
<el-tree
ref="treeRef"
:data="filteredData"
@@ -20,108 +27,117 @@
</template>
<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import SearchBar from './SearchBar.vue'
-import { Document, FolderOpened } from '@element-plus/icons-vue'
+import { ref, watch, defineProps } from "vue";
+import { useRouter } from "vue-router";
+import { Document, FolderOpened } from "@element-plus/icons-vue";
-const router = useRouter()
-const treeRef = ref()
+const router = useRouter();
+const treeRef = ref();
+const props = defineProps<{
+ menuItem: string;
+}>();
interface TreeNode {
- label: string
- path?: string
- icon?: string
- children?: TreeNode[]
+ label: string;
+ path?: string;
+ icon?: string;
+ children?: TreeNode[];
}
-const treeData = ref<TreeNode[]>([
+const modelTreeData = ref<TreeNode[]>([
{
- label: '妯″瀷绠＄悊',
- icon: 'FolderOpened',
+ label: "鍨嬪彿",
+ icon: "FolderOpened",
children: [
{
- label: '鏈烘瀯妯″瀷',
- path: '/mechanism',
- icon: 'Document'
+ label: "鐫�闄嗗櫒妯″瀷搴�",
+ path: "/model/landerModel",
+ icon: "Document",
},
{
- label: '杩愬姩瀛︽ā鍨�',
- path: '/kinematic',
- icon: 'Document'
- }
- ]
+ label: "宸¤鍣ㄦā鍨嬪簱",
+ path: "/model/roverModel",
+ icon: "Document",
+ },
+ {
+ label: "椋炶穬鍣ㄦā鍨嬪簱",
+ path: "/model/leapMachineModel",
+ icon: "Document",
+ },
+ ],
},
- {
- label: '鍙鍖栦豢鐪�',
- icon: 'FolderOpened',
- children: [
- {
- label: '浠跨湡閰嶇疆',
- path: '/simulation-config',
- icon: 'Document'
- },
- {
- label: '浠跨湡缁撴灉',
- path: '/simulation-result',
- icon: 'Document'
- }
- ]
- },
- {
- label: '绯荤粺绠＄悊',
- icon: 'FolderOpened',
- children: [
- {
- label: '鐢ㄦ埛绠＄悊',
- path: '/system/user',
- icon: 'Document'
- },
- {
- label: '鏉冮檺璁剧疆',
- path: '/system/permission',
- icon: 'Document'
- }
- ]
- }
-])
+]);
const defaultProps = {
- children: 'children',
- label: 'label'
-}
+ children: "children",
+ label: "label",
+};
-const filteredData = ref(treeData.value)
+const filteredData = ref(modelTreeData.value);
const filterNode = (value: string, data: TreeNode) => {
- if (!value) return true
- return data.label.toLowerCase().includes(value.toLowerCase())
-}
-
-const handleSearch = (searchText: string) => {
- treeRef.value?.filter(searchText)
-}
+ if (!value) return true;
+ return data.label.toLowerCase().includes(value.toLowerCase());
+};
const handleNodeClick = (data: TreeNode) => {
if (data.path) {
- router.push(data.path)
+ router.push(data.path);
}
-}
+};
+
+watch(
+ () => props.menuItem,
+ (value) => {
+ if (value == "/" || value == "/model") {
+ filteredData.value = modelTreeData.value;
+ } else {
+ filteredData.value = []
+ }
+ }
+);
</script>
<style lang="less" scoped>
.tree-menu {
height: 100%;
background-color: #fff;
-
+
:deep(.el-tree) {
padding: 10px;
}
-
+
.custom-tree-node {
display: flex;
align-items: center;
gap: 8px;
}
+
+ .topMenu {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid #ebeef5;
+ .topMenu-title {
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .btnGroup {
+ display: flex;
+ gap: 12px;
+ cursor: pointer;
+
+ .icon1,
+ .icon2,
+ .icon3 {
+ font-size: 18px;
+ color: #606266;
+ &:hover {
+ color: #409eff;
+ }
+ }
+ }
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1