更新结构

QYF-GitLab1

2025-03-03 f5eb93a15ff74eeb8b6b307e3a38b95319c084e1

更新结构

 src/App.vue

@@ -1,18 +1,25 @@
<script setup lang="ts">
// import { RouterView } from "vue-router";
import { ref } from 'vue';
import Header from './layout/Header.vue';
import TreeMenu from './components/TreeMenu.vue';

const menuItem = ref('/')

const handMenu = (key: string) => {
  menuItem.value = key;
};

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header height="60px">
        <Header/>
        <Header @selectMenu="handMenu"/>
      </el-header>
      <el-container>
        <el-aside width="240px">
          <TreeMenu />
          <TreeMenu :menuItem="menuItem"/>
        </el-aside>
        <el-main>
          <RouterView />

 src/components/HelloWorld.vue

File was deleted

 src/components/SearchBar.vue

File was deleted

 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,126 @@
</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[]>([
  {
    label: '模型管理',
    icon: 'FolderOpened',
    children: [
      {
        label: '机构模型',
        path: '/mechanism',
        icon: 'Document'
      },
      {
        label: '运动学模型',
        path: '/kinematic',
        icon: 'Document'
      }
    ]
    label: "模型管理",
    icon: "Document",
    path: "/model",
  },
  {
    label: '可视化仿真',
    icon: 'FolderOpened',
    label: "可视化仿真",
    icon: "FolderOpened",
    children: [
      {
        label: '仿真配置',
        path: '/simulation-config',
        icon: 'Document'
        label: "测试仿真",
        path: "/simulation-test",
        icon: "FolderOpened",
        children: [
          {
            label: "仿真详情",
            path: "/simulation-config",
            icon: "Document",
          },
          {
            label: "测试报告",
            path: "/simulation-result",
            icon: "Document",
          },
        ],
      },
      {
        label: '仿真结果',
        path: '/simulation-result',
        icon: 'Document'
      }
    ]
        label: "实时仿真",
        path: "/simulation-test",
        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(treeData.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) => {
    console.log(value,'tree');
  }
);
</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> 
</style>

 src/layout/Header.vue

@@ -19,12 +19,14 @@
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ref, defineEmits } from "vue";

const activeIndex = ref("/");
const emit = defineEmits(["selectMenu"]);

const handleSelect = (key: string) => {
  console.log(key);
  activeIndex.value = key;
  emit("selectMenu", key);
};
</script>


 src/layout/main.vue

 src/router/index.ts

@@ -5,17 +5,17 @@
  routes: [
    {
      path: '/',
      redirect: '/mechanism'
      redirect: '/model'
    },
    {
      path: '/mechanism',
      name: 'mechanism',
      component: () => import('../views/model/Mechanism.vue')
      path: '/model',
      name: 'model',
      component: () => import('../views/model/index.vue')
    },
    {
      path: '/kinematic',
      name: 'kinematic',
      component: () => import('../views/model/Kinematic.vue')
      component: () => import('../views/model/index.vue')
    },
    {
      path: '/simulation-config',
@@ -28,15 +28,16 @@
      component: () => import('../views/simulation/Result.vue')
    },
    {
      path: '/simulation-test',
      name: 'simulationTest',
      component: () => import('../views/simulation/test.vue')
    },  
    {
      path: '/system/user',
      name: 'systemUser',
      component: () => import('../views/system/User.vue')
    },
    {
      path: '/system/permission',
      name: 'systemPermission',
      component: () => import('../views/system/Permission.vue')
    }

  ]
})


 src/views/model/Mechanism.vue

File was deleted

 src/views/model/index.vue

 src/views/simulation/Test.vue

File was renamed from src/views/system/Permission.vue
@@ -1,6 +1,6 @@
<template>
  <div class="permission-manage">
    <h2>权限设置</h2>
    <h2>仿真测试</h2>
  </div>
</template>