add:顶部 导航栏

frontend/src/components/header-bar/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="header-bar">
+    <div class="header-bar__menu">
+      <div v-for="(item, index) in menu" :key="index" class="header-bar__menu-item" @click="item.click">
+        <img v-if="item.icon" :src="item.icon" class="header-bar__menu-icon" />
+        <span class="header-bar__menu-name">{{ item.name }}</span>
+      </div>
+    </div>
+    <div class="header-bar__title">
+      <span class="header-bar__text">{{ title }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+// 定义 props
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  menu: {
+    type: Array,
+    default: () => []
+  }
+});
+
+</script>
+
+<style scoped>
+.header-bar {
+  position: fixed;
+  app-drag: drag;
+  -webkit-app-region: drag;
+  top: 0;
+  width: 100%;
+  height: 30px;
+  z-index: 100000;
+  background: #F7F7F7;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.header-bar__menu {
+  display: flex;
+  align-items: center;
+}
+
+.header-bar__menu-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.header-bar__menu-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+}
+
+.header-bar__menu-name {
+  font-size: 14px;
+}
+
+.header-bar__title {
+  display: flex;
+  align-items: center;
+  justify-content: center; /* 居中显示标题 */
+  flex: 1; /* 占据剩余空间 */
+}
+
+.header-bar__logo {
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
+
+.header-bar__text {
+  font-weight: 600;
+  font-size: 14px;
+  color: #474747;
+}
+
+.header-bar__buttons {
+  display: flex;
+  align-items: center;
+}
+
+.header-bar__button {
+  margin-left: 10px;
+  padding: 5px 10px;
+  border: none;
+  background-color: #f0f0f0;
+  cursor: pointer;
+}
+
+.header-bar__button:hover {
+  background-color: #e0e0e0;
+}
+</style>

frontend/src/views/Home/index.vue

@@ -1,6 +1,16 @@
 <template>
 
 
+  <headerBar
+    title="拍摄物体镜头矫正"
+    :menu="[
+        {
+          name:'首页',
+          icon:'设置',
+          onClick: openSeeting
+        },
+    ]"
+  />
   <div class="mb-4">
 
     <template v-if="!show">
@@ -60,6 +70,8 @@ import { login, getUserInfo } from '@/apis/user';
 import Login from '@/components/login/index.vue';
 import HardwareCheck from '@/components/check/index.vue'
 
+import headerBar from '@/components/header-bar/index.vue'
+
 
 const useUserInfoStore = useUserInfo();
 const dialogVisible = ref(false);
@@ -241,6 +253,7 @@ function socketDisconnect(){
 
 
 function openSeeting(){
+  console.log('aaaaa')
   clientStore.ipc.removeAllListeners(icpList.utils.openMain);
   let params = {
     title: '设置',