From f5eb93a15ff74eeb8b6b307e3a38b95319c084e1 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 03 三月 2025 10:32:46 +0800
Subject: [PATCH] 更新结构
---
src/layout/Header.vue | 6 +
/dev/null | 14 ---
src/views/simulation/Test.vue | 2
src/components/TreeMenu.vue | 161 +++++++++++++++++++++++-----------------
src/views/model/index.vue | 0
src/router/index.ts | 21 ++--
src/App.vue | 13 ++
7 files changed, 119 insertions(+), 98 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index a539bf8..3c352f4 100644
--- a/src/App.vue
+++ b/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 />
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 546ebbc..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
- msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
- <h1>{{ msg }}</h1>
-
- <div class="card">
- <button type="button" @click="count++">count is {{ count }}</button>
- <p>
- Edit
- <code>components/HelloWorld.vue</code> to test HMR
- </p>
- </div>
-
- <p>
- Check out
- <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
- >create-vue</a
- >, the official Vue + Vite starter
- </p>
- <p>
- Learn more about IDE Support for Vue in the
- <a
- href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
- target="_blank"
- >Vue Docs Scaling up Guide</a
- >.
- </p>
- <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
- color: #888;
-}
-</style>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
deleted file mode 100644
index 70ef343..0000000
--- a/src/components/SearchBar.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
- <div class="search-container">
- <el-input
- v-model="searchText"
- placeholder="鎼滅储..."
- prefix-icon="Search"
- clearable
- @input="handleSearch"
- />
- </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const searchText = ref('')
-const emit = defineEmits(['search'])
-
-const handleSearch = () => {
- emit('search', searchText.value)
-}
-</script>
-
-<style lang="less" scoped>
-.search-container {
- padding: 16px;
- border-bottom: 1px solid #eee;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/TreeMenu.vue b/src/components/TreeMenu.vue
index c5e57bc..ef177b3 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,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>
\ No newline at end of file
+</style>
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index c7c0220..9c2043d 100644
--- a/src/layout/Header.vue
+++ b/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>
diff --git a/src/layout/main.vue b/src/layout/main.vue
deleted file mode 100644
index e69de29..0000000
--- a/src/layout/main.vue
+++ /dev/null
diff --git a/src/router/index.ts b/src/router/index.ts
index 414b936..d4ca3cc 100644
--- a/src/router/index.ts
+++ b/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')
- }
+
]
})
diff --git a/src/views/model/Mechanism.vue b/src/views/model/Mechanism.vue
deleted file mode 100644
index 7e82186..0000000
--- a/src/views/model/Mechanism.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
- <div class="mechanism">
- <h2>鏈烘瀯妯″瀷</h2>
- </div>
-</template>
-
-<script setup lang="ts">
-</script>
-
-<style lang="less" scoped>
-.mechanism {
- padding: 20px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/model/Kinematic.vue b/src/views/model/index.vue
similarity index 100%
rename from src/views/model/Kinematic.vue
rename to src/views/model/index.vue
diff --git a/src/views/system/Permission.vue b/src/views/simulation/Test.vue
similarity index 86%
rename from src/views/system/Permission.vue
rename to src/views/simulation/Test.vue
index b20a2fd..da6de3f 100644
--- a/src/views/system/Permission.vue
+++ b/src/views/simulation/Test.vue
@@ -1,6 +1,6 @@
<template>
<div class="permission-manage">
- <h2>鏉冮檺璁剧疆</h2>
+ <h2>浠跨湡娴嬭瘯</h2>
</div>
</template>
--
Gitblit v1.9.1